console.log 줄에서 엔진은 현재 환경에서 z를 찾지만 y를 찾기 위해 외부 환경(example 호출을 위한 환경)으로 이동해야 하고 x를 찾기 위해 두 단계를 이동해야 한다. 이 모든 것이 우리가 ClosuresInLoopsWithLet을 이해하는 데 어떻게 도움이 될까? 그 함수를 다시 살펴보자. 코드 2-6을 보자.
코드 2-6 루프 내 클로저, let으로 해결(이전과 동일)–closures-in-loops-with-let.js
function closuresInLoopsWithLet() {
for (let counter = 1; counter <= 3; ++counter) {
setTimeout(function() {
console.log(counter);
}, 10);
}
}
closuresInLoopsWithLet();
for 루프를 실행할 때 자바스크립트 엔진은 각 루프 반복에 대해 각각 별도의 counter 변수가 있는 새 환경 객체를 생성하므로 각 타이머 콜백은 다른 counter 변수를 감싼다. 다음은 자바스크립트 엔진이 해당 루프로 수행하는 작업이다.
1. 호출에 대한 환경 객체를 만든다. CallEnvObject라고 하자.
2. ClosuresInLoopsWithLet 함수(생성된 곳, 이 경우 전역 환경)에 저장된 환경에 대한 CallEnvObject의 외부 환경 참조를 설정한다.