JavaScript 이벤트 루프 완전 정복

싱글 스레드인 JavaScript가 어떻게 비동기를 처리하는지는 결국 이벤트 루프 하나로 설명된다.

콜 스택과 큐#

동기 코드는 콜 스택에서 즉시 실행된다. setTimeout 콜백은 태스크 큐로, Promise.then은 마이크로태스크 큐로 들어간다. 루프는 스택이 빌 때마다 마이크로태스크를 전부 비우고, 그 다음 태스크 하나를 꺼낸다.

console.log('1');
setTimeout(() => console.log('2'));
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 출력: 1 4 3 2

왜 3이 2보다 먼저인가#

4까지 동기로 찍힌 뒤, 마이크로태스크 큐(3)가 태스크 큐(2)보다 우선하기 때문이다. 이 순서를 외우지 말고 "스택이 비면 마이크로태스크 먼저"라는 규칙으로 기억하자.