비동기 함수 실행 순서 이해하기: 이벤트 루프와 태스크 큐 개념 정리

by

1. 비동기 함수 실행 순서를 이해해야 하는 이유

자바스크립트는 단일 스레드(single-thread) 기반의 언어로, 한 번에 하나의 작업만 실행할 수 있다. 하지만 실무에서는 비동기 작업(예: API 호출, 파일 읽기, 타이머 처리 등)을 동시에 실행해야 하는 경우가 많다.

이러한 문제를 해결하기 위해 **이벤트 루프(Event Loop)**와 태스크 큐(Task Queue) 개념이 등장했다. 이번 포스팅에서는 자바스크립트의 비동기 함수 실행 순서를 이해하고, 이벤트 루프와 태스크 큐가 어떻게 동작하는지 살펴보겠다.

2. 이벤트 루프(Event Loop)란?

이벤트 루프는 자바스크립트의 실행 컨텍스트(Execution Context)와 비동기 작업을 관리하는 핵심적인 역할을 한다. 이벤트 루프의 주요 기능은 다음과 같다.

  1. **콜 스택(Call Stack)**에 있는 작업을 실행한다.
  2. 콜 스택이 비어 있으면 **태스크 큐(Task Queue)**에서 대기 중인 작업을 가져와 실행한다.
  3. 이 과정이 지속적으로 반복된다.

즉, 이벤트 루프는 콜 스택과 태스크 큐를 모니터링하면서 실행 가능한 작업을 처리하는 역할을 한다.

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

자바스크립트의 비동기 함수 실행 순서는 **태스크 큐(Task Queue)**와 **마이크로태스크 큐(Microtask Queue)**의 영향을 받는다. 두 개념의 차이를 이해하는 것이 중요하다.

3.1 태스크 큐(Task Queue)

  • setTimeout(), setInterval() 등의 콜백 함수가 실행될 때 대기하는 공간
  • 이벤트 루프가 콜 스택을 비운 후 우선순위가 낮게 실행됨

3.2 마이크로태스크 큐(Microtask Queue)

  • Promise.then(), MutationObserver, queueMicrotask() 등의 작업이 대기하는 공간
  • 이벤트 루프가 콜 스택을 비운 후 즉시 실행됨 (우선순위가 높음)

📌 마이크로태스크 큐의 우선순위가 태스크 큐보다 높다.

4. 비동기 실행 순서 예제

4.1 setTimeout()과 Promise 실행 순서 비교

console.log("1. 코드 시작");

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

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

console.log("4. 코드 종료");

📌 출력 결과:

1. 코드 시작
4. 코드 종료
3. Promise 실행
2. setTimeout 실행

4.2 실행 순서 분석

  1. "1. 코드 시작" 실행 (콜 스택에 들어와 즉시 실행됨)
  2. setTimeout 콜백이 **태스크 큐(Task Queue)**로 이동 (0초 지연)
  3. Promise.then()이 **마이크로태스크 큐(Microtask Queue)**에 추가됨
  4. "4. 코드 종료" 실행 (콜 스택이 비어 있음)
  5. 마이크로태스크 큐의 작업(Promise.then())이 실행됨 → "3. Promise 실행" 출력
  6. 태스크 큐의 setTimeout()이 실행됨 → "2. setTimeout 실행" 출력

즉, 마이크로태스크 큐의 작업이 일반 태스크보다 먼저 실행된다.

5. 이벤트 루프와 비동기 함수 실행 흐름 정리

자바스크립트의 이벤트 루프는 다음과 같은 순서로 비동기 작업을 실행한다.

  1. 콜 스택(Call Stack): 동기적인 코드 실행
  2. 마이크로태스크 큐(Microtask Queue): Promise.then() 등 실행
  3. 태스크 큐(Task Queue): setTimeout(), setInterval() 등 실행
  4. 반복 (이벤트 루프가 계속해서 실행)

5.1 실행 순서 요약

실행 순서실행 항목
1동기 코드 실행 (콜 스택)
2마이크로태스크 실행 (Promise.then(), queueMicrotask())
3태스크 실행 (setTimeout(), setInterval())
4이벤트 루프 반복

6. 결론

  • **이벤트 루프(Event Loop)**는 자바스크립트가 비동기 작업을 처리하는 핵심 개념이다.
  • **태스크 큐(Task Queue)와 마이크로태스크 큐(Microtask Queue)**의 실행 순서를 이해하면, 비동기 작업을 보다 효율적으로 관리할 수 있다.
  • Promise의 .then()은 setTimeout()보다 먼저 실행된다.
  • 비동기 코드의 실행 순서를 올바르게 이해하면 더 나은 성능 최적화와 디버깅이 가능하다.

다음 포스트에서는 **”자바스크립트에서 비동기로 API 호출하는 3가지 방법”**을 다루겠다.

Leave a Comment