JavaScript25 유사배열객체에 배열메서드 적용(call, apply) 앞 게시물에서는 상황별로 this에 어떤 값이 바인딩되는지를 알아봤다면, 이러한 규칙을 깨고 this에 별도의 대상을 바인딩하는 방법이 있다. 바로 call / apply 메서드이다. call / apply 메서드에서 소개해 볼 세가지 기능은 아래와 같다. 1. this에 별도의 대상 바인딩 (this에 원하는 값을 지정해서 호출) 2. 유사배열객체에 배열메서드 적용 3. 문자열에 배열메서드 적용 1. this에 별도의 대상 바인딩 함수로서 호출하면 this는 전역객체를 참조하고 메서드로서 호출하면 this는 프로퍼티명 앞의 객체를 참조하지만, call / apply 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. 1-1. 함수로서 호출 let func = function (a, b, c) .. 2022. 1. 30. This에 대한 정리 다른 대부분의 객체지향 언어에서의 this는 클래스로 생성한 인스턴스 객체를 의미한다. this가 결정되는 과정은 이런 흐름으로 결정된다. 함수 호출 => 실행 컨텍스트 생성 => EnvironmentRecord : 변수정보수집(호이스팅) OuterEnvironmentReference : 스코프체인 ThisBinding : this가 결정 결국 함수를 호출할 때, this가 결정된다고 생각하면 된다 이러한 this가 상황에 따라 달라지는데 정리해보면 이렇다. 1. 메서드로서 호출 아주 간단하다. this는 프로퍼티명 앞의 객체 2. 함수로서 호출 호출 주체를 명시하지 않고 실행한 것이기 때문에 this가 지정되지 않는다. 결국, this가 지정되지 않은 경우 this는 전역 객체를 바라본다. 그렇다면 호.. 2022. 1. 22. continue 문 continue 문은 해당 for문의 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가 루프문의 다음 코드를 실행한다. (즉, 조건문이 참이면 제거된다고 생각하자) let text = ''; for (let i = 0; i 금일 현재시간 이후 시간만 나열 금일 도착 가능 시간 나열시 => 금일 현재시간 or 출발시간 이후 시간만 나열 해당하는 조건들을 continue화해서 등록가능한 시간만 추출이 가능하다. // 금일 등록가능한 도.. 2022. 1. 5. 스코프 체인 예시 실행 컨텍스트의 LexicalEnvironment 수집 정보는 - enviornmentRecord (변수정보 수집)(호이스팅) - outerEnvironmnetReference (스코프 체인) (선언될 당시의 LexicalEnvironment를 참조) "var a = 3"의 유무에 따라서 스코프체인 값이 바뀌는 예시를 기록해보고자 한다. 1) 4번째 줄이 undefined인 이유 inner의 environmentRecord에 a가 "있기때문에" undefined 출력 (아직 할당된 값은 없어서 undefined) var a = 1; var outer = function() { var inner = function() { console.log(a); // undefined var a = 3; }; inne.. 2021. 12. 25. JavaScript 안드로이드 아이폰 구분 WebVIew기반의 앱을 만들다보면 Android 와 IOS를 구분해야하는 일이 생긴다. 웹으로 접속했을 때 앱을 다운받을 수 있도록 유도하는 마케팅을 위해 원링크, 딥링크 등의 개념이나 Appflyers의 제로플랜 등을 찾아볼 수도 있지만, 자바스크립트로 기기를 구분하여 해당 앱스토어로 링크로 연결될 수 있는 로직을 찾아보았다. 자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent라는 객체를 사용하여 Android와 IOS를 구분할 수 있다. 다음은 User-Agent를 통해 얻어낸 Android, IOS 각 기기의 정보이다. Android Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) Ap.. 2021. 10. 28. 불변객체에 대하여.. 기본적으로 객체의 프로퍼티를 변경 시에는 불변객체가 지켜지지 않고 객체 자체를 변경 할 때 불변객체가 지켜진다. 해당 코드로 보자! 1. 객체 프로퍼티 변경 (불변객체 X) let obj1 = { a: 10, b: 'bbb'}; let obj2 = obj1; obj2.a = 20; //프로퍼티 변경 console.log(obj1 === obj2); // true console.log("obj1", obj1); // 'obj1' { a: 20, b: 'bbb' } console.log("obj2", obj2); // 'obj2' { a: 20, b: 'bbb' } obj2.a 프로퍼티만 변경했는데 원본 객체 obj1.a 또한 변경된 것을 볼 수 있다. 이처럼 객체의 프로퍼티 변경은 원본객체를 유지하지 않는.. 2021. 10. 3. 비동기 병렬처리( Promise.all ) 비동기 처리를 위해서 Promise, Async-await등을 사용하는데 순차적인 처리와 병렬 처리는 구현하려는 목적에 맞게 사용하면 될 것 같다. Async-await을 이용한 순차적인 처리는 "유저를 조회하고, 거기서 얻은 유저 아이디를 통해 장바구니 상품을 가져온다"와 같은 상황에 적합한 처리가 되지만 하나씩 순서대로 처리하는 만큼 절대적인 시간이 소모된다. 반대로 순서가 보장되지 않더라도 "일괄적으로 모든 데이터를 업데이트"를 하는 상황 같은 경우에는 Promise.all과 같은 병렬적인 처리가 적합하다. 모든 데이터가 한번에 처리되므로 시간 또한 절반 정도 절약된다! 1. 비동기 순차적인 처리 const sequenceFunc = async (number) => { return new Promi.. 2021. 9. 28. 이전 1 2 3 다음
