JavaScript ✅ 이벤트 루프, Call Stack, Microtask

 

 

JavaScript는 싱글 스레드 언어입니다.
그런데도 여러 작업을 동시에 처리하는 것처럼 보이는 이유는 이벤트 루프(Event Loop) 덕분입니다.

---

📌 1. Call Stack (콜 스택)

• 자바스크립트 엔진이 실행하는 함수 호출 기록 저장소
• LIFO(Last In First Out) 구조
• 함수 실행 → 스택에 push, 종료 → pop

 

function a() { console.log("a"); }
function b() { a(); console.log("b"); }
b();
// 실행 순서: a → b

---

📌 2. Web APIs & Task Queue

브라우저는 JS 엔진 외에도 **Web APIs (DOM, Timer, HTTP 요청)**를 제공합니다.
비동기 함수(setTimeout, fetch)는 Web API 영역에서 실행 후 Task Queue에 등록됩니다.

 

console.log("start");

setTimeout(() => console.log("timeout"), 0);

console.log("end");

 

👉 실행 순서

 

start
end
timeout

 

📌 이유: setTimeout 콜백은 Task Queue로 넘어가고, Call Stack이 비워진 뒤 실행

---

📌 3. Microtask Queue (Promise, async/await)

Promise.then이나 async/await은 Microtask Queue에 들어갑니다.
Microtask는 일반 Task보다 우선 실행됩니다.

 

console.log("start");

Promise.resolve().then(() => console.log("promise"));
setTimeout(() => console.log("timeout"), 0);

console.log("end");

 

👉 실행 순서

 

start
end
promise
timeout

 

📌 Promise → Microtask Queue → Task Queue(setTimeout)보다 먼저 실행

---

📌 4. async/await 동작 원리

await은 사실상 Promise 체인으로 동작합니다.

 

async function test() {
  console.log("1");
  await Promise.resolve();
  console.log("2");
}

test();
console.log("3");

 

👉 실행 순서

 

1
3
2

 

📌 await 이후의 코드는 Microtask Queue에 들어가서 Call Stack이 비워진 뒤 실행

---

📌 5. 정리된 이벤트 루프 동작 순서

1. Call Stack 실행
2. Microtask Queue (Promise, async/await) 처리
3. Task Queue (setTimeout, setInterval, 이벤트 핸들러) 처리

---

⚡ 6. 실무 활용 팁

• ✅ 비동기 처리 순서를 정확히 이해해야 버그 방지 가능
• ✅ Promise와 async/await는 setTimeout보다 먼저 실행됨
• ✅ 긴 연산은 Web Worker 사용 → 메인 스레드 블로킹 방지
• ✅ 프레임워크(React, Vue) 렌더링 최적화 이해에도 중요

---

📝 마무리 정리

• JS는 싱글 스레드지만 이벤트 루프 덕분에 비동기 가능
• 실행 순서: Call Stack → Microtask → Task
• Promise/async는 setTimeout보다 먼저 실행됨
• 이벤트 루프 이해 = 자바스크립트 성능 최적화의 시작!