코드 2-5 루프 내 클로저, let으로 해결–closures-in-loops-with-let.js

function closuresInLoopsWithLet() {
    for (let counter = 1; counter <= 3; ++counter) {
        setTimeout(function() {
            console.log(counter);
        }, 10);
    }
}
closuresInLoopsWithLet();

역시 예상대로 1, 2, 3을 출력한다. 작은 변화로 큰 결과를 얻었다. 하지만 어떻게 작동할까? 확실히 함수가 counter를 감쌀까? 어떻게 서로 다른 값을 볼 수 있을까?

익명 함수에 대한 호출이 타이머 함수에 대한 여러 value 매개변수를 생성한 것처럼 코드 2-5의 루프는 루프에서 생성된 타이머 함수에 대해 루프 반복마다 하나씩 여러 counter 변수를 생성한다. 따라서 각 반복은 자체 counter 변수를 갖는다.

왜 그런지를 이해하려면 자바스크립트에서 변수(와 상수)가 어떻게 작동하는지 더 자세히 살펴봐야 한다. 뒤에 나올 장에서도 이 내용이 도움이 될 것이다.