JavaScript 이벤트 루프와 태스크 큐

🔁 이벤트 루프와 태스크 큐 완벽 이해

자바스크립트는 싱글 스레드 언어입니다. 그럼에도 불구하고 동시에 여러 작업을 처리하는 듯한 비동기 처리가 가능한 이유는 바로 이벤트 루프(Event Loop)와 태스크 큐(Task Queue) 덕분입니다.

1️⃣ 자바스크립트의 실행 구조

• Call Stack: 현재 실행 중인 코드 (동기 작업)를 저장하는 스택
• Web APIs: setTimeout, AJAX, 이벤트 리스너 등 브라우저에서 제공하는 비동기 API
• Task Queue (Callback Queue): 완료된 비동기 작업의 콜백 함수들이 대기하는 큐
• Microtask Queue: Promise의 then/catch/finally 처리 등이 대기하는 큐
• Event Loop: 콜 스택이 비었는지 확인하고, 큐에서 작업을 가져오는 역할

2️⃣ 이벤트 루프의 작동 원리

1. 코드가 실행되면 Call Stack에 쌓여 순서대로 실행됩니다.
2. 비동기 함수 (예: setTimeout)는 Web API에서 실행을 위임하고, 콜백은 Task Queue에 등록됩니다.
3. Promise.then 같은 마이크로태스크는 Microtask Queue에 등록됩니다.
4. 이벤트 루프는 Call Stack이 비었을 때 먼저 Microtask Queue를 비우고, 그 다음 Task Queue에서 콜백을 가져와 실행합니다.

📌 예제 코드

console.log("1");

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

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

console.log("4");

출력 결과는?

1
4
3
2

그 이유는 Promise.then은 Microtask Queue에 들어가서 setTimeout보다 먼저 실행되기 때문입니다.

3️⃣ 시각적으로 이해하기

이벤트 루프는 마치 다음과 같은 구조로 작동합니다:

▶ Call Stack 비어있나?
   └── 예: Microtask Queue → 실행
          └── 끝나면: Task Queue → 실행

🧠 요약

• 자바스크립트는 싱글 스레드지만, 이벤트 루프 덕분에 비동기 처리가 가능하다.
• Microtask Queue (Promise)는 Task Queue (setTimeout)보다 먼저 처리된다.
• 이벤트 루프는 Call Stack이 비었을 때만 큐에서 작업을 꺼낸다.