The Event Loop: Microtasks & Macrotasks

Call Stack, Web APIs, Task Queue, and Microtask prioritization (Promise vs setTimeout)

« Scope, Closures & The Temporal Dead Zone« Previous Prototypes, Prototypal Inheritance & ES6 Classes »Next »

JavaScript is single-threaded, using an Event Loop concurrency model to handle asynchronous I/O, timers, and user interactions without blocking.

The Execution Hierarchy of the Event Loop

1Call Stack: Executes synchronous JavaScript functions one at a time (LIFO).

2Web APIs: Background browser threads handling timers, network fetch, and DOM events.

3Microtask Queue: Highest priority queue. Contains resolved Promise callbacks (.then(), await) and queueMicrotask(). The event loop drains ALL microtasks before moving to rendering or timers!

4Macrotask Queue (Task Queue): Lower priority queue for setTimeout, setInterval, and I/O callbacks.

Predicting Event Loop Output Order

Try It Yourself »

console.log("1: Synchronous start");

setTimeout(() => {
  console.log("4: Macrotask (setTimeout)");
}, 0);

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

console.log("2: Synchronous end");

// Console Execution Order:
// 1: Synchronous start
// 2: Synchronous end
// 3: Microtask (Promise)
// 4: Macrotask (setTimeout)

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which queue has higher priority and executes first when the call stack clears: Microtasks (Promises) or Macrotasks (setTimeout)?

« Previous: Scope, Closures & The Temporal Dead Zone Next: Prototypes, Prototypal Inheritance & ES6 Classes »