더북(TheBook)

ES5와 이전 버전에서 이를 해결하는 일반적인 방법은 다른 함수를 도입하고 counter를 인수로 전달한 다음 console.log에서 counter 대신 해당 인수를 사용하는 것이다. 개발자는 코드 2-4와 같이 즉시 호출하는 인라인 익명 함수로 이를 수행하는 경우가 많다.

코드 2-4 루프 내 클로저 문제, 일반적인 ES5 해결법–closures-in-loops-es5.js

function closuresInLoopsES5() {
    for (var counter = 1; counter <= 3; ++counter) {
        (function(value) {       // 익명 함수의 시작
            setTimeout(function() {
                console.log(value);
            }, 10);
        })(counter);             // 끝에 counter를 넘겨 호출한다.
    }
}
closuresInLoopsES5();

이를 실행하면 타이머 함수가 counter가 아닌 value를 사용하기 때문에 예상되는 1, 2, 3을 출력하고 익명 래퍼 함수에 대한 각 호출은 타이머 함수가 종료될 자체 value 매개변수를 가져온다. 이러한 value 매개변수는 변경되지 않으므로 콜백은 예상 값(1, 2, 3)을 기록한다. 하지만 ES2015의 let 덕분에 훨씬 더 간단하게 해결할 수 있다. varlet으로 변경하면 된다. 코드 2-5의 코드를 실행하자.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.