[TECH-QA] 이벤트 루프

코드 예제 1

console.log("1");

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

Promise.resolve()
    .then(() => {
        console.log("3");
    })
    .then(() => {
        console.log("4");
    });

console.log("5");

출력

1
5
3
4
2

설명

• "1"과 "5"는 동기 코드로 먼저 실행.
• Promise의 then은 Microtask Queue에서 순차 실행 ("3", "4").
• setTimeout은 Task Queue에서 마지막에 실행 ("2")

코드 예제 2

console.log("시작");

// setTimeout으로 비동기 작업 추가 (Task Queue로 이동)
setTimeout(() => {
    console.log("setTimeout 실행 (5초 후)");
}, 5000);

// Promise로 비동기 작업 추가 (Microtask Queue로 이동)
Promise.resolve()
    .then(() => {
        console.log("Promise 실행");
    });

// 무거운 동기 작업 (Call Stack에서 바로 실행)
for (let i = 0; i < 3; i++) {
    console.log("동기 작업 ${i}");
}

console.log("끝");

실행 순서와 설명

시작
동기 작업 0
동기 작업 1
동기 작업 2
끝
Promise 실행
(5초 후) setTimeout 실행 (5초 후)

• console.log("시작"): Call Stack에 쌓이고 바로 실행되어 출력.
• setTimeout: 비동기 함수로, 5초 후 실행될 콜백이 Task Queue에 추가됨.
• Promise.resolve().then(): Promise는 Microtask Queue에 추가됨 (Microtask는 Task Queue보다 우선순위가 높음).
• for 루프: 동기 코드로 Call Stack에서 즉시 실행, "동기 작업 0, 1, 2" 출력.
• console.log("끝"): Call Stack에 쌓이고 바로 실행.
• Call Stack이 비어짐: 이벤트 루프가 Microtask Queue를 확인하고 Promise의 콜백을 실행 ("Promise 실행" 출력).
• 5초 후: 이벤트 루프가 Task Queue에서 setTimeout의 콜백을 가져와 실행 ("setTimeout 실행" 출력).

이벤트 루프의 동작 요약

• 동기 코드는 즉시 Call Stack에서 실행됩니다.
• 비동기 작업은 Task Queue(예: setTimeout) 또는 Microtask Queue(예: Promise)에 들어가 대기합니다.
• 이벤트 루프는 Call Stack이 비어 있을 때 큐에서 작업을 꺼내 실행하며, Microtask Queue가 Task Queue보다 우선순위가 높습니다.