2.7.1 “루프 내 클로저” 문제

아마도 “루프 내 클로저” 문제에 대해 잘 알고 있을 것이다. 코드 2-3의 코드를 실행하여 이 문제를 확인하자.

코드 2-3 루프 내 클로저 문제–closures-in-loops-problem.js

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

(이 문제를 해결하는 데 도움이 될 수 있는 setTimeout의 기능은 무시하자. 이는 비동기 작업의 자리를 표시하는 예일 뿐이다).

코드가 1, 2, 3을 출력할 것으로 예상했을 텐데 실제로는 4, 4, 4를 출력한다. 그 이유는 루프가 끝날 때까지 각 타이머가 콜백을 실행하지 않기 때문이다. 콜백을 호출할 때까지 counter의 값은 4이고 var로 선언되었기 때문에 counter는 ClosuresInLoopsProblem 함수 전체에서 정의된다. 세 타이머 콜백은 모두 동일한 counter 변수를 통해 감싸지므로 모두 값 4를 본다.