이벤트 루프와 태스크 큐 (Event Loop)
자바스크립트는 일꾼(Thread)이 하나뿐인데 어떻게 동시에 여러 일을 처리할까요? 브라우저의 Web APIs, Task Queue, Microtask Queue를 순회하는 이벤트 루프(Event Loop) 덕분입니다.
console.log("1. 동기 코드 시작");
// setTimeout은 Task Queue (Macrotask)로 들어감
setTimeout(() => {
console.log("4. setTimeout 콜백 실행 (제일 늦음)");
}, 0);
// Promise.then은 Microtask Queue로 들어감 (우선순위가 가장 높음!)
Promise.resolve().then(() => {
console.log("3. Promise 콜백 실행 (Microtask)");
});
console.log("2. 동기 코드 끝");
/*
[실행 순서 결과]
1. 동기 코드 시작 (Call Stack에서 즉시 실행)
2. 동기 코드 끝 (Call Stack에서 즉시 실행)
3. Promise 콜백 실행 (Call Stack이 비워지면 Microtask부터 처리)
4. setTimeout 콜백 실행 (Microtask가 다 비워진 후 처리)
*/