이벤트 루프(Event Loop)란?

자바스크립트는 단일 스레드(single-threaded) 언어이다. 이는 한 번에 한 작업만 실행할 수 있다는 뜻이다. 그럼에도 불구하고 우리가 자주 사용하는 setTimeout, fetch, addEventListener 같은 비동기 작업이 가능한 이유는 바로 이벤트 루프(Event Loop) 구조 덕분이다.

📦 자바스크립트의 구성 요소

  1. Call Stack (호출 스택)
  2. Web APIs (브라우저 제공 기능)
  3. Callback Queue (콜백 큐)
  4. Event Loop (이벤트 루프)

이 네 가지가 비동기 처리를 가능하게 만든다.

🔁 이벤트 루프 동작 방식

  1. 코드 실행 → Call Stack에 쌓여서 순차 실행됨
  2. 비동기 함수 호출 → Web API로 전달됨 (예: setTimeout)
  3. 완료된 작업의 콜백 함수 → Callback Queue에 저장됨
  4. Call Stack이 비면 → Event Loop가 Queue에서 콜백을 꺼내 Stack에 넣음

🔍 예제 코드로 이해하기

console.log("1");

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

console.log("3");

출력 결과:

1
3
2
  • setTimeout은 Web API로 넘겨짐
  • console.log("3")까지 실행된 후, 이벤트 루프가 콜백 큐에 있는 console.log("2")를 호출함

🧠 마이크로태스크 vs 매크로태스크

  • Microtasks: Promise.then, MutationObserver 등 (우선순위 높음)
  • Macrotasks: setTimeout, setInterval, setImmediate 등

이벤트 루프는 콜 스택이 비는 순간마다 Microtask Queue를 먼저 비운 후, Macrotask Queue로 넘어감.

✅ 정리

  • 자바스크립트는 싱글 스레드지만 이벤트 루프 덕분에 비동기 처리가 가능
  • Call Stack이 비는 순간, 이벤트 루프가 콜백 큐에서 작업을 꺼내 실행함
  • Promise 같은 마이크로태스크는 일반 콜백보다 먼저 처리됨