[JavaScript] 이벤트 루프(Event Loop)란?

srchae·2025년 3월 28일

🖐🏻Intro

오늘도 어김없이 기술 면접을 대비한 메일링으로 하여금 이를 글로써 정리해보려 한다.

다소 설명이 부족할 수 있지만 최대한 독자의 관점에서 쉽게 이해할 수 있길 기대하며, 해당 글만을 읽기에서 그치지 않았으면 하는 바램 또한 담겨있다.

call stack을 순차적으로 실행할 때, 비동기 콜백이 있다면 task queue로 이동 시키고, call stack 이 비워졌을 때, task queue에서 대기 중이던 함수를 실행 시키기 위해 이를 다시 call stack으로 이동시키는 등의

이와 같은 일련의 과정을 관리하는 관리자의 역할을 의미한다.

즉, "call stack이 비었는지"를 계속 확인하고,
비었다면 "task queue에 쌓인 콜백을 call stack으로 이동시켜 실행"시키는
감시자이자 중재자 역할을 의미한다.

이는 충분히 알 수 있는 개념이기에, 도식화한 그림으로 대체하고 넘어갈 것이다.

stack은 후입선출, queue는 선입선출인 것이 내용의 핵심이다.

call ⇒ 함수를 호출하다 + stack ⇒ 쌓이다

동기 함수가 실행 순서에 의해 쌓이며 처리되는 공간을 의미하고, 나중에 들어온 함수부터 실행되는 구조(LIFO)이다.

비동기 작업 후 실행될 콜백 함수가 대기되는 공간을 의미하며, 이는 먼저 들어온 함수부터 빠져나가는 구조(FIFO)이다.

비동기 작업 중에서도 우선적으로 처리해야 하는 함수들이 들어가는 공간을 의미한다.

여기서 말하는 우선적으로 처리해야 하는 함수는 Promise의 then, catch, finally와 같은 내용이다.

그래서 이와 같은 내용이 포함된 로직의 경우는 call stack이 비면, task queue의 내용 이전에 microtask queue를 먼저 실행한다.

console.log("1");

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

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

console.log("4");

1 -> 4 -> 3 -> 2의 순서와 같이 실행이 된다.

이벤트 루프는 비동기를 빼놓으면 설명이 안 된다. 즉, 자바스크립트의 비동기 처리의 핵심 개념이라는 의미이기에! 큰 내용은 아닐 수 있지만 정리하며 괜히 뿌듯했다

아 그리고, 일반적인 비동기 작업이 대기하는 공간을 다른 말로 매크로태스크 큐(macrotask queue)라고도 한다네요..?

🐥집요함과 꾸준함🪽