[JavaScript] 동작 원리 ② – 이벤트 루프와 Queue 이해하기

지난 글 [JavaScript] 동작 원리 ① – 실행 컨텍스트와 콜 스택 개념 정리에 이어지는 자바스크립트기본 2편이다
이번엔 이벤트 루프와 큐에 대한 이해해보고 싱글스레드 기반의 자바스크립트에서 비동기처리와 관련된 동작들이 어떻게 실행되는지 파악해볼 것이다.

 

# Queue

비동기 처리를 위한 작업들이 대기하고 있는 공간

 

## 태스크 큐(Task Queue)와 마이크로태스크 큐(Microtask Queue)

큐 이름	포함하는 작업 예시	처리 우선순위
태스크 큐 (Task Queue)	setTimeout, setInterval, DOM 이벤트 등	낮음
마이크로태스크 큐 (Microtask Queue)	Promise.then, queueMicrotask 등	높음

 

# 이벤트 루프

이벤트 루프는 자바스크립트안에서 비동기 처리를 가능하게 하는 핵심 메커니즘

이벤트 루프 이미지 설명

 

기본적인 함수 호출은 콜 스택에 쌓이지만 비동기 작업은 바로 실행되지 않는다. setTimeout, fetch, Promise.then 등의 비동기 함수는 브라우저나 Node의 API가 처리한 후 콜백이나 .then()을 큐에 넣고, 스택이 비었을 때 실행되도록 이벤트 루프가 처리한다.

 

 

이벤트 루프의 큐 처리 형태

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

queue.waitForMessage() 함수는 처리할 수 있는 메시지가 존재하지 않으면 새로운 메시지가 도착할 때까지 동기적으로 대기

 

=>이벤트 루프는 콜 스택과 태스크 큐 사이에서 업무를 조율하는 중재자 역할을 한다.

 

## 예시로 이해해보기

console.log("A");

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

console.log("C");

 

결과는

A
C
B

 

1. console.log("A") → 바로 실행, 콜 스택에서 처리됨
2. setTimeout(..., 0) → Web API로 보내졌다가, 0ms 뒤 태스크 큐에 콜백 등록
3. console.log("C") → 콜 스택에서 바로 실행
4. 콜 스택이 비자, 이벤트 루프가 태스크 큐에서 console.log("B")를 꺼내 실행

# 마무리

- 자바스크립트는 싱글스레드지만 이벤트 루프 덕분에 비동기 처리가 가능하다.

- 콜 스택이 비어야만 이벤트 루프가 태스크 큐에서 콜백을 꺼내 실행한다.

# 참고

- MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

- 위키독스 https://wikidocs.net/251900