javascript : 자바스크립트의 실행 순서

console.log('A');
setTimeout(function(){
    console.log('B');
},0);
console.log('C');

A
C
B

 

자바스크립트의 함수 중에는 웹 브라우저에 처리를 부탁하는 함수가 있습니다. 대표적으로 타이머 함수와 웹 요청 관련 함수가 있으며, 웹 브라우저가 처리하고 처리가 완료되었다는 것을 자바스크립트에 알려줍니다.

 

이러한 함수는 현재 실행 중인 다른 코드의 실행이 끝나기 전에 실행되지 않습니다. 마치 회사에서 일하는 동안에 집에 배송된 택배를 확인할 수 없는 것과 같습니다. 일을 마치고 집에 와야 택배를 확인할 수 있겠죠?

 

setTimeout(function(){
    console.log('Set TimeOut');
})

while(true){}

다음과 같은 코드는 웹 브랄우저에 "0초 후에 집에 택배 좀 보내줘!"라고 말은 했지만 회사 일이 끝나지 않으므로 집에 와서 택배를 확인할 수 없는 것입니다.

 

for (var i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0
    );
}

3
3
3

 

따라서 변수를 호출하고 싶으면 클로저를 활용해야한다.

for (var i = 0; i < 3; i++) {
    (function (closed_i){
        setTimeout(() => {
            console.log(closed_i);
        }, 0);
    })(i);
}

0
1
2

 

 

for (var i = 0; i < 3; i++) {
    var f = (function (closed_i){
        setTimeout(() => {
            console.log(closed_i);
        }, 0);
    });
    f(i);
}

0
1
2