[ Javascript ] 자바스크립트의 실행 순서

자바스크립트의 실행 순서

 

자바스크립트의 실행 순서 예

console.log("A"); // 1
setTimeout(() => {
    console.log("B"); // 3
}, 0);

console.log("C"); // 2

코드를 실행하면 무조건 A -> C -> B 순서로 실행합니다.

 

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

이런 함수들은 현재 실행중인 다른코드의 실행이 끝나기 전에는 실행되지 않습니다.

 

단위 실행 예

setTimeout(() => {
    console.log("Set Timeout"); // 실행되지 않음
}, 0);

while(true) {}

위 코드는 0초뒤에 console.log()를 실행시키라고 해두었지만 아래 다른 코드의 실행이 끝나지 않았기 때문에 출력되지 않습니다.

 

---

 

반복문과 콜백 함수

 

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

for(var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i); // 10이 10번 
    }, 0);
}

위 코드는 반복문이 끝나는 시점이기 때문에 0,1,2,3,... 순서로 실행되지 않고 10이 열번 반복되는 현상이 됩니다.

그렇기때문에 0,1,2,3,... 순서로 실행하기 위해서는 변수를 따로 복사해 두어야 합니다.

 

클로저를 활용한 해결 예

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

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

 

forEach()메서드를 활용한 클로저 생성

let array = [0,1,2,3,4,5,6,7,8,9];

array.forEach((element, i) => {
    setTimeout(() => {
        console.log(element) // 0,1,2,3,4,5,6,7,8,9
        console.log(i) // 0,1,2,3,4,5,6,7,8,9
    }, 0);
});

forEach()메서드 또한 함수 내부에서 클로저가 만들어지므로 정상적으로 실행됩니다.