Web DevelopmentSoftware Engineering

Understanding JavaScript Event Loop: Beyond the Basics

A deep dive into the JavaScript event loop, microtasks, macrotasks, and how they affect your application's performance.

Mbeah Essilfie

July 15, 2026 at 06:02 AM

11 min read 1033 views

Understanding JavaScript Event Loop: Beyond the Basics

The Mental Model

JavaScript is single-threaded, but that doesn't mean it can only do one thing. The event loop is the mechanism that makes asynchronous operations possible without threads.

The Execution Order

console.log('1: Synchronous')

setTimeout(() => console.log('2: Macrotask'), 0)

Promise.resolve().then(() => console.log('3: Microtask'))

queueMicrotask(() => console.log('4: Microtask via queueMicrotask'))

console.log('5: Synchronous')

Output:

1: Synchronous
5: Synchronous
3: Microtask
4: Microtask via queueMicrotask
2: Macrotask

Microtasks (Promises, queueMicrotask) always execute before the next macrotask (setTimeout, setInterval, I/O). This is why a recursive microtask can starve the event loop.

The Full Picture

Call Stack — Executes synchronous code
Microtask Queue — Promises, MutationObserver, queueMicrotask
Macrotask Queue — setTimeout, setInterval, I/O, UI rendering
Animation Frames — requestAnimationFrame callbacks

After each macrotask completes, the engine drains all microtasks before moving to the next macrotask or rendering.

Real-World Impact: Chunking Heavy Work

// BAD: Blocks the main thread
function processItems(items: Item[]) {
  items.forEach(item => heavyComputation(item))
}

// GOOD: Yields to the event loop between chunks
async function processItemsChunked(items: Item[], chunkSize = 50) {
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize)
    chunk.forEach(item => heavyComputation(item))

    // Yield to allow UI updates and other tasks
    await new Promise(resolve => setTimeout(resolve, 0))
  }
}

Node.js Event Loop Phases

In Node.js, the event loop has additional phases:

Timers — setTimeout/setInterval callbacks
Pending callbacks — I/O callbacks deferred from previous cycle
Idle/Prepare — Internal use
Poll — Retrieve new I/O events
Check — setImmediate callbacks
Close — Socket close events

// setImmediate vs setTimeout in Node.js
setImmediate(() => console.log('immediate'))
setTimeout(() => console.log('timeout'), 0)
// Order is non-deterministic at top level!

// But inside an I/O callback, setImmediate always fires first:
const fs = require('fs')
fs.readFile(__filename, () => {
  setImmediate(() => console.log('immediate'))  // Always first
  setTimeout(() => console.log('timeout'), 0)
})