Event Loop

콜 스택(Call Stack)

• 함수 호출 정보를 쌓아두고, 실행이 끝나면 다시 이전 위치로 돌아갈 수 있게 한다.
• 자바스크립트는 싱글 스레드 언어로, 한 번에 하나의 작업만 처리할 수 있기 때문에 동기적으로 함수가 호출되고 종료되는 순서를 정확하게 관리한다.
• 에러가 발생했을 때, 스택 내부의 함수 호출 정보를 바탕으로 경로를 추적한다. 브라우저의 에러 메시지에서 Stack Trace가 콜 스택의 내용이다.
• 재귀 함수 등 복잡한 호출 구조에서도 실행 컨텍스트를 쌓아두어 올바르게 동작할 수 있다.

 

매크로태스크 큐(Macrotask Queue)

• Task Queue, Event Queue라고도 부른다.
• SetTimeout, setInterval, DOM 이벤트, I/O, UI 렌더링 등에서 발생한 비동기 콜백 함수가 대기하는 공간.
• 한 사이클마다 매크로태스크 큐에서 가장 오래된 태스크를 하나씩 꺼내 실행.

 

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

• Promise의 .then, .catch, .finally, .queueMicrotask, MutationObserber 등에서 발생한 비동기 콜백 함수가 대기하는 공간.
• 한 사이클마다 마이크로태스크 큐에 쌓인 모든 작업이 우선 실행.

 

Event Loop의 사이클(동작 순서)

1. 동기 코드 전부 실행.
2. 콜 스택이 비면, 마이크로태스크 큐의 모든 작업 실행.
3. 매크로 태스크 큐에서 가장 오래된 작업 하나만 실행.
4. 렌더링(필요한 경우만).
5. 반복.

console.log("Start");

setTimeout(() => console.log("Macro 1"), 0);
Promise.resolve().then(() => console.log("Micro 1"));
setTimeout(() => console.log("Macro 2"), 0);
Promise.resolve().then(() => console.log("Micro 2"));

console.log("End");

// Start
// End
// Micro 1
// Micro 2
// Macro 1
// Macro 2

출력의 5번째 줄까지는 첫 번째 사이클이고, 마지막 줄인 매크로태스크의 작업은 두 번째 사이클이다.