NodeJS - Call Stack, Back Ground, Task Queue

function oneMore() {
  console.log("one more");
}
function run() {
  console.log("run run");
  setTimeout(() => {
    console.log("wow");
  }, 0);
  new Promise((resolve) => {
    resolve("hi");
  }).then(console.log);
  oneMore();
}

setTimeout(runs, 5000);

file을 시작하면 일단 호출스택에 무조건 anonymous가 깔린다. 그리고 위 코드 대로라면 메모리에 실행되기 위한 함수 2개가 선언된다.  그리고 메서드 setTimeout이  바로 실행된다. setTimeout메서드 실행이 완료되면 호출스택에서 setTimeout(run,5000)이 나오게 된다. 나가면서 setTimeout메서드가 백그라운드로 타이머를 하나 보내주게 된다. 그게 타이머(run,5초)이다.

그러고 나면 코드에 작성된 내용이 모두 끝나기 때문에 호출스택에 마지막에 깔려있던 anonymous가 끝난다. 하지만 프로그램은 끝나지 않는다. 백그라운드에 있는 타이머가 5초를 센 다음에 run 함수를 태스크 큐로 보낸다. 그리고 호출스택이 비어있는 것을 확인되면 run 함수가 이벤트 루프에 의해서 호출스택으로 이동한다. (태스크 큐에 있는 함수는 호출스택이 비어있지 않으면 호출스택으로 이동할 수 없다.)

 

호출스택에 들어간 run함수가 실행된다. run함수가 실행되면 바로 console.log("run run")이 콘솔창에 "run run"으로 찍힌다. 그다음에 run 함수에 있는 setTimeout이 실행된다. setTimeout의 시간이 0초로 설정 되었다고 해서 해당 함수가 바로 호출스택에서 실행되지 않는다.  setTimeout은 무조건 백그라운드를 거치게된다.

 

그리고 코드의 그 다음 줄에 있는 new Promise가 실행된다. new Promise는 실행되면 내부까지는 동기이기 때문에 호출스택에서 바로 실행된다.  그래서 Promise가 실행되는 순간 내부의 resolve('hi')함수도 같이 실행된다. resolve('hi')가 끝나고 Promise도 끝나는데 Promise는 then을 만나는 순간 비동기가된다. 그래서 then console.log(hi)가 백그라운드로 이동한다.

 

 

그다음에 oneMore 함수가 실행되면서 console.log('one more')가 콘솔창에 찍히면서 oneMore함수가 끝나고, run 함수도 끝나면서 호출 스택이 비워지게 된다. 하지만 백그라운드에는 아직 실행해야한 것들이 남아 있어서 프로그램은 끝나지 않는다.

 

원래 백그라운드로 넘겨진 것들은 무엇이 먼저 실행 될지 알 수 없다. 백그라운드에 넘겨진 함수가 여러개 있으면 백그라운드에서 먼저 끝나는 쪽이 먼저 태스크 큐로 옮겨진게 된다. 일단 타이머(익명,0)는  타이머 시간이 0이므로 백그라운드로 넘겨지자 마자 끝나게 된다. 그 다음에  then이 끝났다고 가정하면 console.log('hi')가 태스크 큐로 옮겨지게 된다. 

 

하지만 console.log('hi')는 Promise의 then이고, 익명함수 setTimeout에 의한 익명함수이다. 이때 Promise가 새치기를 한다.(Promise가 우선순위가 먼저이다.) 그래서 console.log('hi')가 먼저 이벤트 루프에 의해 호출스택으로 옮겨져서 실행되게 되고 그 다음에 익명함수가 호출스택으로 옮겨져 실행된다.

 

이벤트 루프가 태스크큐에서 호출스택으로 보내는 순서가 더 자세히 존재하긴 하지만 실무에서는 크게 중요한 사항이 아니고, Promise의 then쪽이 setTimeout 같은 일반 타이머보다 우선 순위가 높다.  비슷한 것으로 process.nextTick( )이라는 것이 존재한다.

 

💡호출스택만 JavaScript의 영역이고, 백그라운드・ 태스크 큐는 JavaScript가 아니라 C++ 혹은 운영체제 영역(JavaScript 엔진)이다.

 

출처

\https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EA%B5%90%EA%B3%BC%EC%84%9C/dashboard

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지 - 인프런 | 강의