JavaScript Event Loop - Complete Guide to Asynchronous Execution

What is the JavaScript Event Loop?

The Event Loop is the mechanism that allows JavaScript to perform non-blocking operations despite being single-threaded. It handles the execution of code, collection of events, and execution of queued sub-tasks.

JavaScript has a single thread of execution, meaning it can only do one thing at a time. The Event Loop enables asynchronous behavior by coordinating between the Call Stack, Callback Queue, and Web APIs.

Understanding the Event Loop is crucial for writing efficient asynchronous JavaScript code and debugging timing-related issues in your applications.

console.log('Start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

console.log('End');

// Output:
// Start
// End
// Timeout callback

Components of the Event Loop

The Event Loop consists of several key components that work together to manage JavaScript execution: the Call Stack, Web APIs, Callback Queue, and Microtask Queue.

function first() {
  console.log('First function start');
  second();
  console.log('First function end');
}

function second() {
  console.log('Second function start');
  third();
  console.log('Second function end');
}

function third() {
  console.log('Third function');
}

first();

// Output:
// First function start
// Second function start
// Third function
// Second function end
// First function end

console.log('1. Synchronous code');

setTimeout(() => {
  console.log('3. Timeout callback');
}, 1000);

console.log('2. More synchronous code');

// Web API handles the timeout
// After 1 second, callback moves to Callback Queue
// Event Loop checks Call Stack, finds it empty, moves callback to Call Stack

// Output:
// 1. Synchronous code
// 2. More synchronous code
// 3. Timeout callback

Microtasks vs Macrotasks

JavaScript has two types of task queues: Microtask Queue (higher priority) and Macrotask Queue (Callback Queue). Microtasks are executed before macrotasks in each Event Loop tick.

Promises and MutationObserver callbacks are microtasks, while setTimeout, setInterval, and I/O operations are macrotasks.

console.log('Start');

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

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

console.log('End');

// Output:
// Start
// End
// Microtask: Promise
// Macrotask: setTimeout

console.log('Start');

setTimeout(() => {
  console.log('Macrotask 1');
}, 0);

Promise.resolve().then(() => {
  console.log('Microtask 1');
  return Promise.resolve();
}).then(() => {
  console.log('Microtask 2');
});

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

console.log('End');

// Output:
// Start
// End
// Microtask 1
// Microtask 3
// Microtask 2
// Macrotask 1

Event Loop Execution Order

The Event Loop follows a specific execution order in each iteration (tick):

1. Execute all code in the Call Stack

2. Execute all microtasks in the Microtask Queue

3. Execute one macrotask from the Macrotask Queue

4. Repeat

console.log('1. Synchronous start');

setTimeout(() => {
  console.log('4. Macrotask (setTimeout)');
  Promise.resolve().then(() => {
    console.log('5. Microtask in macrotask');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('2. First microtask');
  Promise.resolve().then(() => {
    console.log('3. Nested microtask');
  });
});

console.log('End synchronous code');

// Execution order:
// 1. Synchronous start
// End synchronous code
// 2. First microtask
// 3. Nested microtask
// 4. Macrotask (setTimeout)
// 5. Microtask in macrotask

Common Event Loop Patterns

Understanding Event Loop behavior helps explain many JavaScript patterns and potential pitfalls.

console.log('Start');

setTimeout(() => {
  console.log('Timeout 0ms');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise resolved');
});

console.log('End');

// Why 0ms timeout doesn't execute immediately:
// - setTimeout schedules for next macrotask
// - Promise schedules for current microtask
// - Microtasks run before macrotasks

// Output:
// Start
// End
// Promise resolved
// Timeout 0ms

console.log('Start');

// This blocks the Event Loop
const start = Date.now();
while (Date.now() - start < 3000) {
  // Busy wait for 3 seconds
}

console.log('End - 3 seconds later');

// Any setTimeout or Promise callbacks
// scheduled during this 3 seconds
// will execute after the blocking code completes

// Dangerous: Infinite microtasks
Promise.resolve().then(function loop() {
  console.log('Microtask loop');
  return Promise.resolve().then(loop);
});

// This will prevent any macrotasks from executing
// The UI will freeze, setTimeout callbacks won't run
setTimeout(() => {
  console.log('This will never execute');
}, 0);

Async/Await and Event Loop

Async/await is syntactic sugar over Promises and follows the same Event Loop rules.

async function asyncExample() {
  console.log('1. Function start');

  await Promise.resolve();
  console.log('3. After first await');

  await new Promise(resolve => setTimeout(resolve, 0));
  console.log('5. After second await');

  console.log('6. Function end');
}

console.log('0. Before function call');
asyncExample();
console.log('2. After function call');

// Output:
// 0. Before function call
// 1. Function start
// 2. After function call
// 3. After first await
// 4. Timeout callback (from setTimeout)
// 5. After second await
// 6. Function end

Event Loop in Different Environments

The Event Loop behaves differently in browsers vs Node.js, though the core concepts are similar.

// Browser-specific APIs
console.log('Synchronous');

requestAnimationFrame(() => {
  console.log('Animation frame callback');
});

setTimeout(() => {
  console.log('Timer callback');
}, 0);

// User interactions (clicks, scrolls) also queue tasks
document.addEventListener('click', () => {
  console.log('Click handler');
});

// Node.js has additional phases
const fs = require('fs');

console.log('Start');

fs.readFile('file.txt', () => {
  console.log('File read callback');
});

setTimeout(() => {
  console.log('Timer callback');
}, 0);

process.nextTick(() => {
  console.log('nextTick callback');
});

Promise.resolve().then(() => {
  console.log('Promise microtask');
});

// Node.js Event Loop phases:
// 1. Timers (setTimeout, setInterval)
// 2. Pending callbacks (I/O callbacks)
// 3. Idle/Prepare
// 4. Poll (I/O)
// 5. Check (setImmediate)
// 6. Close callbacks

Debugging Event Loop Issues

Common Event Loop problems and how to debug them.

// Monitor Event Loop lag
let lastTime = Date.now();

setInterval(() => {
  const currentTime = Date.now();
  const lag = currentTime - lastTime - 1000;

  if (lag > 50) { // More than 50ms lag
    console.warn(`Event Loop blocked for ${lag}ms`);
  }

  lastTime = currentTime;
}, 1000);

// Break long synchronous work into chunks
function processLargeArray(array) {
  const chunkSize = 1000;
  let index = 0;

  function processChunk() {
    const endIndex = Math.min(index + chunkSize, array.length);

    for (let i = index; i < endIndex; i++) {
      // Process array[i]
      heavyComputation(array[i]);
    }

    index = endIndex;

    if (index < array.length) {
      // Schedule next chunk for next Event Loop tick
      setTimeout(processChunk, 0);
    }
  }

  processChunk();
}

Interview Questions about Event Loop

Event Loop questions are very common in JavaScript interviews.

console.log('A');

setTimeout(() => console.log('B'), 0);

Promise.resolve().then(() => console.log('C'));

console.log('D');

// What will be the output?
// Answer: A, D, C, B

// Explanation:
// 1. 'A' - synchronous
// 2. setTimeout queues 'B' in macrotask queue
// 3. Promise queues 'C' in microtask queue
// 4. 'D' - synchronous
// 5. Microtasks execute: 'C'
// 6. Macrotasks execute: 'B'

setTimeout(() => console.log('A'), 0);

Promise.resolve().then(() => {
  console.log('B');
  setTimeout(() => console.log('C'), 0);
  Promise.resolve().then(() => console.log('D'));
});

setTimeout(() => console.log('E'), 0);

// Output: B, D, A, C, E

// Why?
// 1. Two setTimeout calls queue A and E in macrotask queue
// 2. Promise queues B, D, C in microtask and macrotask queues
// 3. First tick: execute microtask B, then nested microtask D
// 4. Second tick: execute macrotask A, then queue C from A's microtask
// 5. Third tick: execute macrotask E
// 6. Fourth tick: execute macrotask C