호출 스택과 이벤트 루프

호출 스택

function first() {
    second();
    console.log("첫번째");
}

function second() {
    third();
    console.log("두번째");
}

function third() {
    console.log("세번째");
}

first();

위의 코드를 실행한다면 결과가 어떻게 될까? 예상해보자.

🙄 나는 콘솔에 세번째 -> 두번째 -> 첫번째 순서로 찍힐 것 같다.

✨ 이유는 자바스크립트는 콜스택에 호출된 함수들을 담아둔다고 알고있다. 스택이란? 출입구가 하나라서 나중에 들어온 함수가 먼저 실행되는 자료구조라고 알고 있다. 위에서 first, second, third 함수를 선언했고 맨 아래에서 first()함수를 호출했다. 따라서 first 함수가 호출됐으니 해당 first함수를 콜스택에 담는다. first함수를 실행하는데 함수 내부에서 second()함수의 호출이 일어났으니 또 스택안의 first()함수 위에 second()함수를 넣는다. second()함수는 또 thirst()함수를 함수 내부에서 호출하고 있으므로 third()가 second()위에 담긴다.

third()함수는 콘솔에 "세번째"를 찍어 라는 코드가 들어있으므로 콘솔에 찍고 함수 실행 마무리와 동시에 콜스택에서 사라진다. third()가 지워졌으니 그 아래에 있던 second()가 실행되며 "두번째"를 찍고 마지막 first()를 실행해 "첫번째"를 찍는다.

• anonymous는 가상의 전역 컨텍스트로, 항상 있다고 생각하기!

 

이벤트루프

function run() {
    console.log("3초 후 실행");
}
console.log("시작");
setTimeout(run, 3000);
console.log("끝");

그렇담 위의 코드는 어떻게 실행될까?

🙄 시작 -> 끝 -> 3초 후 실행 순서로 찍힐 것 같다.

✨ 이유는 비동기적으로 실행되는 setTimeout함수는 콜스택에 담기지 않고 백그라운드에 담긴다고 들었다. 그래서 "시작"이 콘솔에 먼저 찍히고 아랫줄의 setTimeout함수는 콜스택이 아닌 백그라운드에 담겨 동기적으로 코드를 실행한다. 그동안 아랫줄의 코드로 인해 "끝"이 콘솔에 찍히고 백그라운드에 담겨있던 setTimeout이 실행완료되면 콜백큐에 콜백함수인 run함수가 전달된다. 이벤트루프는 항상 콜스택과 콜백큐를 지켜보다가 콜스택이 비어있을 때 콜백큐에 담겨있는 콜백함수를 콜스택에 옮겨준다. 그래서 run함수가 콜스택에 옮겨져 실행되고 "3초 후 실행"이 콘솔에 찍히게 된다.

• Promise.them/catch 그리고 process.nestTick은 테스크 큐에서 타이머같은 아이들을 새치기해서 먼저 실행된다.
• 백그라운드랑 콜백큐는 자바스크립트가 아니라 C++같은 언어로 작성되어서 비동기적(멀티 쓰레드)으로 실행된다.