[JavaScript] 마이크로태스크 큐

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

Promise.resolve(true) {
  console.log('promise');
}

이 코드를 실행하면 console에 promise 문자열이 먼저 찍히게 된다. 왜 그럴까?
바로 마이크로태스크 큐 때문이다.

promise 핸들러 .then/catch/finally는 항상 비동기적으로 실행된다.
promise가 즉시 이행되더라도 .then/catch/finallly 아래에 있는 코드들은 이 핸들러들이 실행되기 전에 실행된다.

이는 마이크로태스크 큐 때문인데,

• 마이크로태스크 큐는 먼저 들어온 작업을 먼저 실행한다.(FIFO)
• 실행할 것이 아무것도 남아있지 않을 때만 마이크로태스크 큐에 있는 작업이 실행되기 시작한다.

어떤 promise가 준비되었을 때 이 promise의 .then/catch/finally 핸들러가 큐에 들어간다고 생각하면 된다.

이때 핸들러들은 여전히 실행되지 않으며, 현재 코드에서 자유로운 상태가 되었을 때에서야 JS 엔진은 큐에서 작업을 꺼내 실행한다.

promise.then(handler); //핸들러가 큐에 저장됨
...
alert('코드 종료');
// 스크립트 실행이 끝나야 큐에 저장된 핸들러가 실행됨

상단의 코드를 실행 시 '코드 종료' 문자열이 먼저 console에 출력된다.
promise 핸들러는 항상 내부 큐를 통과하기 때문이다.

여러개의 .then/catch/finally를 사용해 만든 체인의 경우, 각 핸들러는 비동기적으로 실행됨. 큐에 들어간 핸들러 각각은 현재 코드가 완료되고, 큐에 적체된 이전 핸들러의 실행이 완료되었을 때 실행됨.

promise 핸들러를 먼저 실행되게 하려면?
.then을 사용해 큐에 넣으면 된다.

Promise.resolve()
  .then(() => alert("프라미스 성공!"))
  .then(() => alert("코드 종료"));

이 코드를 실행 시, console에 "프라미스 성공" 부터 먼저 찍히는 것을 볼 수 있다.

출처: https://ko.javascript.info/microtask-queue