JavaScript 이벤트 루프 완벽 정리

자바스크립트의 이벤트 루프(Event Loop) 는
싱글 스레드 언어인 JavaScript가 비동기 작업을 효율적으로 처리할 수 있게 하는 핵심 메커니즘이다.

---

왜 이벤트 루프가 필요할까?

자바스크립트는 기본적으로 한 번에 하나의 작업만 처리할 수 있는 싱글 스레드 언어이다.
그런데 어떻게 API 요청, setTimeout, UI 반응 등 다양한 작업을 동시에 처리할 수 있을까?

그 답이 바로 이벤트 루프에 있다!

이벤트 루프는
"콜 스택이 비어 있을 때, 대기 중인 비동기 콜백들을 하나씩 실행시켜주는 메커니즘"이다.

---

핵심 구조: 콜 스택 + 이벤트 루프 + 태스크 큐

JavaScript의 실행 구조는 다음처럼 구성되어 있다.

• Call Stack: 현재 실행 중인 함수가 쌓이는 곳 (동기 작업 처리)
• Web APIs: 타이머, AJAX, 이벤트 핸들러 등의 백그라운드 처리 영역
• Task Queues:
  • Macrotask Queue: setTimeout, setInterval 등
  • Microtask Queue: Promise.then, queueMicrotask 등
• Event Loop: 위 요소들을 관리하며 비동기 콜백을 콜 스택에 넣어줌

---

🔁 이벤트 루프 동작 예시

console.log('1');

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

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

console.log('4');

// 출력 결과

1
4
3
2

설명

1. '1' -> 동기 -> 즉시 실행
2. setTimeout() -> Web API -> MacroTask Queue에 등록
3. Promise.then() -> MicroTask Queue에 등록
4. '4' -> 동기 -> 즉시 실행
5. Call Stack 비자마자 -> MicroTask Queue 우선 실행 -> 3
6. 그 다음 -> MacroTask Queue 실행 -> 2

---

setTimeout(callback, 0) 의 오해

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

위 코드는 "0초 뒤에 실행" 되는 것이 아니라

• Web API에 타이머 등록
• 최소 0ms 후에 MacroTask Queue에 들어감
• 콜 스택이 비었을 때 실행됨

즉, 동기 코드가 모두 끝난 후에 실행이 된다!!

---

태스크 큐의 종류

종류	설명	대표 API
MacroTask Queue	일반적인 비동기 작업이 대기	setTimeout, setInterval, DOM 이벤트 등
MicroTask Queue	우선순위가 높은 비동기	Promise.then(), queueMicrotask() 등

---

이벤트 루프는 자바스크립트 비동기 처리의 핵심이자,
성능 최적화와 버그 해결에 있어서도 매우 중요한 개념이다.

다음에는 requestAnimationFrame, queueMicrotask 같은 심화 개념도 정리해보자! 🚀