[JavaScript] 이벤트 루프

"이벤트 루프에 대해 설명해주세요."

프론트엔드 자바스크립트 기술 면접 단골 손님 이벤트 루프에 대해서 알아보겠습니다.

❗️ 내가 이해하기 위해 적은 글 ❗️

싱글(단일) 스레드

자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 콜 스택만 사용합니다. 즉, 동시에 하나의 작업만 처리할 수 있다 는 뜻입니다.

하지만 자바스크립트를 사용하다 보면 마치 동시에 여러 작업이 처리되는 것처럼 보입니다. 예를 들어, 이벤트가 발생하는 동안에도 다른 작업이 진행되거나, 여러 개의 HTTP 요청이 동시에 처리되는 것처럼 보이는 경우가 있습니다.

이러한 동작이 가능한 이유는 바로 이벤트 루프 덕분입니다.
자바스크립트는 싱글 스레드 언어이지만, 자바스크립트가 실행되는 환경(예: 브라우저, Node.js)은 멀티 스레드 기능을 제공합니다.

이 환경과 자바스크립트 엔진이 연동하여 비동기 작업을 처리할 수 있도록 해주는 핵심 장치가 바로 이벤트 루프 입니다.

---

이벤트 루프의 동작 원리

이미지 출처: JavaScript Event Loop And Call Stack Explained

이미지 출처: MDN_이벤트 루프

이벤트 루프는 다음과 같은 방식으로 동작합니다.

1. Heap (힙): 객체와 같은 동적 메모리가 할당되는 영역입니다.
2. Call Stack(콜 스택): 코드가 실행될 때 함수들이 쌓이는 스택 메모리입니다. 싱글 스레드이므로 한 번에 하나의 작업만 실행할 수 있습니다.
3. Web APIs: 브라우저가 제공하는 API로, setTimeout, Promise, DOM 이벤트 등이 포합됩니다. 이들은 비동기 작업을 처리하는 데 사용됩니다.
4. Callback Queue(콜백 큐): 비동기 작업이 완료되면 해당 콜백 함수가 여기에 대기하며, 클 스택이 비어야 실행됩니다.
5. Microtask Queue(마이크로태스크 큐): Promise.then(), MutationObserver 같은 고우선순위 비동기 작업이 들어가는 큐입니다. 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐의 작업을 실행한 후, 콜백 큐에서 대기 중인 작업을 실행합니다.

---

이벤트 루프 흐름을 이해하기 위한 예제

console.log("Start");

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

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

console.log("End");

출력 결과

Start
End
Promise
setTimeout

실행 과정 분석

1. console.log("Start") 실행 → Call Stack에서 실행 후 제거

2. setTimeout 실행 → Web API에 넘김 (0ms 후 콜백 큐로 이동)

3. Promise.resolve().then() 실행 → 마이크로태스크 큐에 저장

4. console.log("End") 실행 → Call Stack에서 실행 후 제거

5. Call Stack이 비어 있음 → Microtask Queue에서 Promise 실행 후 제거

6. Call Stack이 다시 비어 있음 → Callback Queue에서 setTimeout 실행 후 제거

"Microtask Queue > Animation Frame > Task Queue" 순으로 Microtask Queue가 가장 먼저 실행되고 Task Queue가 가장 늦게 실행됩니다.

---

✅ 참고

• Javascript Event Loop 이벤트 루프 정리

• JavaScript-이벤트 루프, 콜 스택, 태스크 큐