자바스크립트는 싱글 스레드로 작동하지만, 웹 브라우저나 Node.js 환경에서는 수많은 비동기 요청을 동시에 처리하는 것처럼 보입니다. 이것이 가능한 이유는 바로 이벤트 루프(Event Loop) 덕분입니다.

호출 스택과 태스크 큐

자바스크립트 엔진은 하나의 호출 스택(Call Stack)을 가지며, 함수가 실행될 때 이 스택에 push되고 완료되면 pop됩니다. 비동기 작업이 시작되면 브라우저의 Web APIs나 Node.js의 libuv 백그라운드 스레드에서 처리되고, 완료된 콜백은 태스크 큐(Task Queue / Callback Queue)로 들어갑니다.

마이크로태스크 vs 매크로태스크

태스크 큐는 크게 두 종류로 나뉩니다.

  • Microtask Queue: Promise.then, process.nextTick, MutationObserver 등이 위치하며, 매크로태스크보다 우선순위가 훨씬 높습니다.
  • Macrotask Queue: setTimeout, setInterval, setImmediate 등이 위치합니다.

이벤트 루프는 호출 스택이 비어 있는 시점에 마이크로태스크 큐를 완전히 비우고, 그 다음 매크로태스크 큐의 작업을 하나씩 호출 스택으로 가져와 실행합니다.