JavaScript Event Loop Explained - Call Stack, Task Queue & Microtasks

The JavaScript event loop is one of the most important concepts to understand for writing efficient, non-blocking code. Despite JavaScript being single-threaded, the event loop enables asynchronous programming.

What is the Event Loop?

The event loop is a mechanism that allows JavaScript to perform non-blocking operations by offloading operations to the system kernel whenever possible. It continuously checks if the call stack is empty and moves tasks from the queue to the stack for execution.

Core Components

1. Call Stack

The call stack is where JavaScript keeps track of function calls. It works on a Last In, First Out (LIFO) principle.

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

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

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

first();

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

2. Web APIs / Node APIs

These are provided by the browser or Node.js environment, not the JavaScript engine itself:

setTimeout, setInterval
DOM events
Fetch API
File system operations (Node.js)

3. Task Queue (Callback Queue)

When asynchronous operations complete, their callbacks are placed in the task queue.

console.log('Start');

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

console.log('End');

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

4. Microtask Queue

Microtasks have higher priority than regular tasks. Promises and MutationObserver use the microtask queue.

console.log('Start');

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

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

console.log('End');

// Output:
// Start
// End
// Promise
// Timeout

How the Event Loop Works

Execute all synchronous code
Check microtask queue and execute all microtasks
Execute one task from the task queue
Repeat from step 2

console.log('1');

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

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

console.log('5');

// Output: 1, 5, 3, 4, 2

Common Patterns and Examples

Nested Timeouts

setTimeout(() => {
  console.log('Timeout 1');

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

  Promise.resolve().then(() => {
    console.log('Promise inside timeout');
  });
}, 0);

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

// Output:
// Promise 1
// Timeout 1
// Promise inside timeout
// Timeout 2

Blocking the Event Loop

Avoid long-running synchronous operations:

// Bad - blocks the event loop
function blockingOperation() {
  const start = Date.now();
  while (Date.now() - start < 5000) {
    // Blocking for 5 seconds
  }
  console.log('Done blocking');
}

// Good - non-blocking alternative
function nonBlockingOperation() {
  setTimeout(() => {
    console.log('Done waiting');
  }, 5000);
}

Breaking Up Long Tasks

// Process large array in chunks to avoid blocking
function processLargeArray(array) {
  const chunkSize = 100;
  let index = 0;

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

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

    index = endIndex;

    if (index < array.length) {
      // Schedule next chunk
      setTimeout(processChunk, 0);
    } else {
      console.log('Processing complete');
    }
  }

  processChunk();
}

const bigArray = Array(10000).fill(1);
processLargeArray(bigArray);

Microtasks vs Macrotasks

Microtasks

Promise callbacks (.then, .catch, .finally)
queueMicrotask()
MutationObserver

Macrotasks

setTimeout, setInterval
I/O operations
UI rendering

// Demonstrating priority
console.log('Start');

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

// Microtask
Promise.resolve().then(() => {
  console.log('Promise 1');

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

// Another macrotask
setTimeout(() => {
  console.log('Timeout 2');
}, 0);

// Microtask
queueMicrotask(() => {
  console.log('Microtask');
});

console.log('End');

// Output:
// Start
// End
// Promise 1
// Microtask
// Promise 2
// Timeout 1
// Timeout 2

Real-World Examples

Debouncing with Event Loop Understanding

function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    // Clear existing timeout (remove from task queue)
    clearTimeout(timeoutId);

    // Schedule new timeout
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Usage
const handleSearch = debounce((query) => {
  console.log('Searching for:', query);
}, 300);

// Rapid calls
handleSearch('j');
handleSearch('ja');
handleSearch('jav');
handleSearch('java');
// Only 'java' will be searched after 300ms

Async Iterator with Event Loop

async function* asyncGenerator() {
  for (let i = 0; i < 5; i++) {
    // Yield control back to event loop
    await new Promise((resolve) => setTimeout(resolve, 100));
    yield i;
  }
}

async function consumeAsyncIterator() {
  console.log('Start consuming');

  for await (const value of asyncGenerator()) {
    console.log('Value:', value);
    // Other tasks can run between iterations
  }

  console.log('Done consuming');
}

consumeAsyncIterator();
console.log('This runs immediately');

Handling Multiple Async Operations

// Parallel execution
async function fetchMultipleParallel() {
  console.time('parallel');

  const [user, posts, comments] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/posts'),
    fetch('/api/comments'),
  ]);

  console.timeEnd('parallel');
}

// Sequential execution
async function fetchMultipleSequential() {
  console.time('sequential');

  const user = await fetch('/api/user');
  const posts = await fetch('/api/posts');
  const comments = await fetch('/api/comments');

  console.timeEnd('sequential');
}

Common Pitfalls

1. Assuming setTimeout is Precise

const start = Date.now();

setTimeout(() => {
  const end = Date.now();
  console.log(`Elapsed: ${end - start}ms`);
  // May be more than 100ms due to event loop
}, 100);

// Block the event loop
for (let i = 0; i < 1000000000; i++) {
  // Heavy computation
}

2. Microtask Queue Starvation

// Dangerous - can starve the event loop
function addMicrotask() {
  Promise.resolve().then(() => {
    addMicrotask(); // Infinite microtasks
  });
}

// This will prevent any macrotasks from running
// addMicrotask(); // Don't run this!

3. Zalgo - Inconsistent Async Behavior

// Bad - sometimes sync, sometimes async
function inconsistentFunction(callback) {
  if (cache[key]) {
    callback(cache[key]); // Synchronous
  } else {
    fetchData(key).then(callback); // Asynchronous
  }
}

// Good - always async
function consistentFunction(callback) {
  if (cache[key]) {
    Promise.resolve(cache[key]).then(callback);
  } else {
    fetchData(key).then(callback);
  }
}

Debugging Event Loop Issues

Using Performance API

function measureEventLoopDelay() {
  let lastCheck = performance.now();

  function check() {
    const now = performance.now();
    const delay = now - lastCheck - 16; // Assuming 60fps (16ms)

    if (delay > 50) {
      console.warn(`Event loop delayed by ${delay.toFixed(2)}ms`);
    }

    lastCheck = now;
    requestAnimationFrame(check);
  }

  check();
}

Best Practices

Keep the call stack shallow: Avoid deep recursion
Use async operations: Don't block with synchronous I/O
Break up long tasks: Use setTimeout or requestIdleCallback
Understand priority: Microtasks before macrotasks
Monitor performance: Watch for event loop lag

Conclusion

Understanding the event loop is crucial for writing performant JavaScript applications. It explains why certain code executes in a specific order and helps you write better asynchronous code. Remember: JavaScript is single-threaded, but the event loop makes it powerful for handling concurrent operations.

Understanding the JavaScript Event Loop