태스크 큐 (Task Queue) / 매크로태스크 큐 (Macrotask Queue)

JavaScript는 한 번에 하나의 일을 할 수 있다.

그런데 동시에 두 가지 이상의 일이 들어왔을 때 큐에 넣었다가 꺼내서 처리를 하게 되는데 이때 사용하는 큐가 태스크 큐와 매크로태스트 큐다. 

 

표로 정리해보면 다음과 같다.

항목	마이크로태스크 큐	태스크 큐
우선순위	높음  (짧고 중요한 일)	낮음 (큰 일이나 기다리는 일)
처리 시점	현재 태스크 종료 직후	마이크로태스크가 모두 처리된 후
예시	Promise, Object.observe , process.nextTick, queueMicrotask	setTimeout, setInterval, setImmediate, I/O, UI 렌더링
반복 가능성	매우 빠르게 반복 가능 → 무한 루프 위험	매우 빠르게 반복 가능 → 무한 루프 위험

 

 

console.log('script start');
console.log('script end');

setTimeout(() => {
  console.log('setTimeout');
}, 0);


Promise.resolve().then(() => {
  console.log('promise 1');
}).then(() => {
  console.log('promise 2');
});

 

이런 코드가 있다고 하면 실행 결과는 아래와 같다.

script start
script end
promise 1
promise 2
setTimeout

 

1. 콜 스택에 들어온 동기 작업(console.log)이 먼저 실행
2. setTimeout → 태스크 큐
3. Promise.then() → 마이크로태스크 큐
4. 이벤트 루프는 마이크로태스크 큐를 먼저 처리
5. 마이크로태스크 큐가 비워진 후에야 태스크 큐의 setTimeout을 처리