[JS] 비동기 처리_MicroTask Queue

단일 스레드 자바스크립트가 비동기를 처리하는 방식이 Event loop, Queue, Stack과 관련 있는 것은 알았지만 setTimeout과 Promise를 동시에 콘솔에 찍는 경우 선뜻 답이 나오지 않았다.

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

결과 값은 1 -> 4 -> 3 -> 2가 된다.

이는 MicroTask queue가 존재하기 때문
MicroTask queue는 일반 Queue보다 우선순위를 갖는다. 새치기쟁이

Promise의 경우 MicroTask에 들어가게 되어 setTimeout 보다 우선적으로 처리된다.

아무리 setTimeout이 먼저 Queue 영역에 대기를 하고 있어도 stack이 비워지기전 MicroTasks 영역에 API가 들어오면 무조건 MicroTasks API가 먼저 stack에 올라가 실행이된다.

이 모든 과정이 헷갈리면 노트에 직접 그리면서 해보면 도움이 된다.

참고: 바로가기