공부44 클로저의 활용 다음은 클로저의 대표적 예인 카운터다[1]. counter 함수를 호출할 때, counterClosure 컨텍스트[2]에 count와 changeCount가 담긴 스코프 체인[3]이 생성된다. 그러므로 counterClosure에서 count로의 접근이 가능해지게 된다. 이런 식으로 비공개 변수를 만들어 활용할 수 있다. 위 코드[4]도 마찬가지로 클로저를 활용한 예제다. 단, 함수 호출할 때마다 해당 함수에 대한 실행 컨텍스트가 생성된다. 따라서 counter1과 counter2는 서로 독립적이다. ----- 1. 다음 글에서 코드를 발췌했다. 2. 실행 컨텍스트란 코드 흐름이나 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다. 3. 스코프 체인은 해당 코드의 유효 범위 안에 있는 변수를 정의하는.. 2023. 3. 15. this 관련 몇 가지 예제 자바스크립트의 this는 자바와 다르게 함수 호출 방식에 따라 바인딩되는 객체가 동적으로 결정된다. 한 문장으로 정리하면 아래와 같다. 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함)의 this는 전역 객체를 가리킨다. 위 코드를 보면 생성자 함수(A)와 객체의 메소드(B) 안에서 this가 해당 객체를 가리키는 것을 볼 수 있다. 하지만 콜백함수(C) 안에서는 전역 객체, 즉 Window를 가리킨다[1]. 한편 다음 코드를 보자. 그런데 콜백 함수 내부에서 this를 잘 사용하고 있다.고 헷갈릴 수 있으나 콜백함수 내부에서 this를 사용한 것이 아닌 this를 콜백함수의 매개변수로 전달해준 것이므로 this는 배열 객체를 가리키고 있다. 한편 일반 함수와 다르게 ES6에.. 2023. 3. 15. 실행 컨텍스트 관련 예제 다음은 실행 컨텍스트 관련해 자주 등장하는 예제이다. 일전에 작성한 적이 있으나 해결법 관련해 한 번 더 남기고자 한다. 의도한 것은 1초 뒤, 0부터 4까지 순차적으로 출력하는 것이었으나 결과를 보면 5가 다섯 번 출력된 것을 확인할 수 있다. 그 이유는 1초 뒤 콜백 함수의 실행 시 참조하는 i 값이 5이기 때문이다[1][2]. 이를 해결하기 위한 네 가지 해결방법이 있다. 첫째, 전통적인 방법으로 콜백 함수로 클로저를 활용해 변수를 기억하도록 하는 방법[3]이다. 둘째, ES6에서 추가된 방법으로 let을 이용한 방법이다. 이는 함수 스코프인 var 변수와는 달리 let으로 선언된 변수는 for-loop마다 블록 스코프를 갖기 때문이다. 콜백 함수에서 참조하는 i값은 블록 스코프마다 서로 다르기 때.. 2023. 3. 15. 중복 제거 후 병합 알고리즘을 풀다 보면 배열에 담긴 값들을 매핑해주거나 빈도를 파악해야 하는 경우가 있다. 이때 매핑값들은 객체로 주어지는데 이 정보는 중복되면 안 된다. 보통은 매핑값으로 주어지는 경우에 중복 없이 주어지지만, 객체의 특성을 살펴보기 위해 남겨두도록 한다. 전개구문을 이용해 병합 시 중복 제거할 수 있다. 한편 배열을 돌며 빈도를 파악해야 하는 경우엔 다음과 같이 가능하다. 이미 살펴봤듯이 병합 시 중복값이 제거되므로, 이전값이 존재하더라도 현재값이 덮어씌우게 된다. 참고로 맵[1]의 경우 다음과 같이 중복을 제거할 수 있다. ------ 1. 맵과 객체의 가장 큰 차이 중 하나는 맵은 문자열 아닌 값, 즉 함수나 객체 등도 프로퍼티의 키 값으로 쓰일 수 있다는 점이다. 2023. 3. 13. 이전 1 2 3 4 5 ··· 11 다음
