실행 컨텍스트 관련 예제

다음은 실행 컨텍스트 관련해 자주 등장하는 예제이다. 일전에 작성한 적이 있으나 해결법 관련해 한 번 더 남기고자 한다.

 

의도한 것은 1초 뒤, 0부터 4까지 순차적으로 출력하는 것이었으나 결과를 보면 5가 다섯 번 출력된 것을 확인할 수 있다. 그 이유는 1초 뒤 콜백 함수의 실행 시 참조하는 i 값이 5이기 때문이다[1][2]. 이를 해결하기 위한 네 가지 해결방법이 있다.

 

첫째, 전통적인 방법으로 콜백 함수로 클로저를 활용해 변수를 기억하도록 하는 방법[3]이다.

 

 

둘째, ES6에서 추가된 방법으로 let을 이용한 방법이다.

 

 

이는 함수 스코프인 var 변수와는 달리 let으로 선언된 변수는 for-loop마다 블록 스코프를 갖기 때문이다. 콜백 함수에서 참조하는 i값은 블록 스코프마다 서로 다르기 때문에 0-4까지의 값이 찍힌다. 참고로 아래 코드는 위와 결과가 다르다.

 

 

for문 내에서 i에 대한 선언(스코프는 선언 기준o 호출 기준x)이 되지 않았으므로 렉시컬 환경에서 변수를 찾다가 없으면 암묵적으로 var로 선언한다. 이 경우 전역 환경에 i의 선언부가 존재하므로 결과적으로 전역 변수를 참조하는 것이다.

 

셋째, ES5에 추가된 방법으로 Array.prototype.forEach 메소드를 이용한 방법[4][5]이다.

 

 

forEach 내부에선 일반 함수건 화살표 함수건 상관 없나?

 

넷째, bind...?

 

 

-----

1. 호출 스택에 setTimeout 메소드가 들어가면서 콜백 함수가 백그라운드로 빠지게 된다. 이후 1초가 지나면 해당 콜백함수는 백그라운드에서 태스크 큐로 보내지고, 호출 스택이 비어있다면 이벤트 루프가 태스크 큐에서 함수를 호출 스택으로 보낸다.

2. 함수 호출 시마다 컨텍스트가 생성되는데, 사용되는 변수들은 변수 객체(arguments, variable) 안에서 값을 찾고 없다면 스코프 체인(자신과 상위 스코프들의 변수 객체)을 따라 올라가며 찾는다(참고: 실행 컨텍스트 / ES2015 이후의 실행 컨텍스트).

3. 혹은 다음과 같이도 가능하다.

4. 참고

5.