• 호출스택
• 이벤트 루프
• 태스크 큐

호출스택

function f1(){
    f2();
    console.log('f1');
}

function f2(){
    f3();
    console.log('f2');
}

function f3(){
    console.log('f3');
}

f1();

위 코드를 실행 결과는 아래와 같습니다.

f3, f2, 마지막으로 f1 순으로 출력되는 모습을 볼 수 있습니다. 어떻게 해서 이런 결과가 나왔는 지 알아봅시다.

위의 그림은 호출된 함수들이 스택에 쌓이는 과정을 나타낸 그림입니다.

1. 우선 자바스크립트 파일을 실행하면 main 이라는 함수(파일에 작성된 모든 명령을 실행하는 함수)를 호출 스택에 담고 실행하게 됩니다.(그림에서는 생략되어 있습니다. f1 밑에 main 하나가 더 있다고 생각하시면 됩니다.)
2. 그에 따라 파일에 작성된 f1,f2,f3 함수가 선언되고 마지막 줄 명령에 의해 f1 함수를 호출 스택에 담고 실행하게 됩니다.
3. 그러면 f1 함수 내에 있는 f2 함수를 호출 스택에 담고 실행합니다. 마찬가지로 다음 f3 함수를 호출스택에 담고 실행하게 됩니다.
4. 그 다음 f3 함수에 있는 console.log(‘f3’) 함수를 호출 스택에 담고 실행하면 f3이라는 글자가 콘솔창에 출력됩니다.
5. 실행이 종료된 console.log(‘f3’) 함수를 호출 스택에서 꺼내고 또한 실행이 종료된 f3 함수도 꺼내게 됩니다.
6. 다음 실행할 f2 함수 내의 console.log(‘f2’) 함수를 호출스택에 담고 실행하여 f2를 출력합니다.
7. 실행이 끝난 console.log(‘f2’)함수와 f2 함수를 스택에서 꺼내게 됩니다.
8. 이러한 과정을 반복하여 f1 함수까지 실행이 종료되고 호출 스택에서 꺼내지면서 main 함수의 실행을 마치게 됩니다.

이벤트 루프

function run(){
    console.log('3초후');
}

console.log('시작');
setTimeout(run,3000);
console.log('끝');

위 코드를 실행한 결과는 다음과 같습니다.

시작, 끝, 마지막으로 3초 후 실행 순으로 출력되는 모습을 볼 수 있습니다. 어떻게 해서 이런 결과가 나왔는 지 알아봅시다.

위의 그림은 호출된 함수들이 호출 스택과 태스크 큐에 들어가는 과정을 나타낸 그림입니다.

1. run 함수가 선언된 후 console.log(‘시작’) 함수가 호출 스택에 들어간 후 실행되어 출력됩니다.
2. 다음으로 setTimeout 함수가 호출 스택에 들어간 후 실행됩니다.
3. setTimeout 함수의 실행으로 run 함수를 3초(3000ms)후에 실행하도록 태스크 큐에 담기게 됩니다.
4. 다음 실행될 함수인 console.log(‘끝’) 함수가 호출 스택에 들어간 후 실행되어 출력됩니다.
5. 태스크 큐에서 3초가 지난 후 run 함수가 호출 스택에 담기게 됩니다.
6. run 함수에 있는 console.log(‘3초 후’) 함수가 호출 스택에 들어간 후 실행되어 출력됩니다.

태스크 큐

태스크 큐에 주로 들어가는 3가지 경우

1. setTimeout, setInterval, setImmediate 함수
2. Promise, resolve, reject / async, await
3. 이벤트리스너의 콜백

실제로 태스크 큐는 한 개가 아니라 여러 개이고 이벤트루프가 우선순위에 맞게 함수를 실행시키는 역할을 합니다.

자세한 내용은 노드 공식문서를 참조하시면 됩니다.