자바스크립트의 실행 순서와 관련된 문제

자바스킙트의 실행 순서 때문에 발생하는 문제를 하나 살펴보겠다.

실행결과를 예측해보자.

<script>

for (var i = 0; i < 3; i++) {

setTimeout(function () {

alert(i);

}, 0);

}

</script>

대부분 0, 1, 2를 출력한다고 생각했을 것이다.

그런데 코드를 실행하면 3, 3, 3을 출력한다.

이는 setTimeout() 함수를 호출하는 시점이 반복문이 모두 끝난 이후이므로 발생하는 문제다.

따라서 0, 1, 2를 출력하려면 변수를 따로 복사해두어야 한다.

이 문제를 자기 호출 함수와 클로저를 활용하여 해결해보자.

<script>

for (var i = 0; i < 3; i++) {

(function (closed_i) {

setTimeout(function () {

alert(closed_i);

}, 0);

})(i);

}

</script>

이렇게 하면 반복문을 도는 동안 클로저가 생성되어 변수 closed_i에 값을 저장할 수 있다.

또는 나중에 배우겠지만,

배열의 forEach() 메서드를 활용해도 된다.

<script>

[0, 1, 2].forEach(function (i) {

setTimeout(function () {

alert(i);

}, 0);

});

</script>

참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어