JavaScript Event Loop Explained: Internals, Call Stack, and Task Queues

// ─── Demonstrating the exact execution order of the event loop ───

console.log('1. Script start — synchronous, runs immediately on call stack');

setTimeout(() => {
  // This callback is a MACROTASK — handed to the Web API timer,
  // queued in the macrotask queue once the delay expires.
  // Even with 0ms, it CANNOT run until the call stack is clear
  // AND all current microtasks are drained.
  console.log('4. setTimeout callback — macrotask, runs last');
}, 0);

Promise.resolve('resolved value').then((value) => {
  // .then() schedules a MICROTASK.
  // Microtasks run after the current synchronous block finishes
  // but BEFORE the next macrotask is dequeued.
  console.log('3. Promise .then() — microtask, runs before setTimeout');
});

queueMicrotask(() => {
  // queueMicrotask is the raw microtask API — same queue as Promises.
  // Runs in FIFO order within the microtask queue.
  console.log('3a. queueMicrotask — also a microtask, after promise .then');
});

console.log('2. Script end — still synchronous, still on call stack');

// ─── What actually happens step by step ───
// Step 1: Call stack runs synchronously: logs 1, queues setTimeout
//         callback as macrotask, queues .then as microtask,
//         queues queueMicrotask callback, logs 2.
// Step 2: Call stack is now empty. Event loop checks microtask queue.
//         Drains it completely: logs 3, then 3a.
// Step 3: Microtask queue empty. Event loop dequeues one macrotask.
//         Runs setTimeout callback: logs 4.

// ─── Proving async/await is microtasks all the way down ───

async function fetchUserProfile() {
  console.log('B. fetchUserProfile started — before first await');

  // This await suspends fetchUserProfile and returns control to the
  // caller. The rest of the function body is scheduled as a microtask
  // once this Promise resolves.
  const userId = await Promise.resolve(42);

  // Everything after an await runs as a microtask callback.
  console.log(`D. fetchUserProfile resumed — userId is ${userId}`);

  const userRecord = await Promise.resolve({ id: userId, name: 'Amara' });

  // Each await is a new microtask boundary — control could theoretically
  // yield to other queued microtasks between each one.
  console.log(`F. fetchUserProfile resolved — user: ${userRecord.name}`);

  return userRecord;
}

console.log('A. Synchronous code before calling fetchUserProfile');

// Calling an async function runs it synchronously up to the first await,
// then returns a pending Promise. Execution continues here.
const profilePromise = fetchUserProfile();

console.log('C. Synchronous code AFTER calling fetchUserProfile');
// At this point the call stack finishes its synchronous work.
// Microtask queue drains: fetchUserProfile resumes at 'D',
// then hits the second await, then resumes at 'F'.

profilePromise.then((resolvedUser) => {
  // This .then fires AFTER all awaits inside fetchUserProfile complete.
  console.log(`G. profilePromise .then — final user: ${resolvedUser.name}`);
});

console.log('E. This runs before G because profilePromise is still pending here');

// ─── Key insight ───
// Notice 'E' logs before 'F' even though E is written after the .then.
// Why? Because when we reach console.log('E'), fetchUserProfile is still
// suspended at its second await. 'E' runs synchronously now.
// Only when the call stack clears does the microtask queue drain,
// resuming fetchUserProfile ('F'), then firing the .then ('G').

// ─── Demonstrating render pipeline interaction with the event loop ───

// BAD PATTERN: Blocking the main thread — drops frames
function processLargeDatasetBlocking(dataItems) {
  // If dataItems has 100,000 entries this runs for potentially
  // hundreds of milliseconds — no render step can fire during this.
  // The UI is completely frozen.
  const processedResults = [];
  for (const item of dataItems) {
    processedResults.push(item * 2); // Simulating CPU work
  }
  return processedResults;
}

// GOOD PATTERN: Chunked processing — yields to the event loop
function processLargeDatasetInChunks(dataItems, chunkSize = 1000) {
  return new Promise((resolve) => {
    const processedResults = [];
    let currentIndex = 0;

    function processNextChunk() {
      const endIndex = Math.min(currentIndex + chunkSize, dataItems.length);

      // Process one chunk synchronously
      for (let i = currentIndex; i < endIndex; i++) {
        processedResults.push(dataItems[i] * 2);
      }

      currentIndex = endIndex;

      if (currentIndex < dataItems.length) {
        // setTimeout(fn, 0) enqueues a macrotask — the browser CAN
        // run a render step before picking it up. This is how we
        // voluntarily yield control without blocking the UI.
        setTimeout(processNextChunk, 0);
      } else {
        resolve(processedResults);
      }
    }

    processNextChunk();
  });
}

// CORRECT PATTERN: DOM animation — use rAF, not setTimeout
function animateProgressBar(progressBarElement, targetWidth) {
  let currentWidth = 0;

  function animationStep(timestamp) {
    // requestAnimationFrame aligns execution with the display
    // refresh cycle. The timestamp is a DOMHighResTimeStamp.
    currentWidth = Math.min(currentWidth + 2, targetWidth);

    // Batching DOM writes inside rAF avoids forced synchronous
    // layouts (layout thrashing).
    progressBarElement.style.width = `${currentWidth}px`;

    if (currentWidth < targetWidth) {
      // Re-register for the NEXT frame, not a fixed timeout.
      requestAnimationFrame(animationStep);
    }
  }

  requestAnimationFrame(animationStep);
}

// Usage demonstrating the difference
const largeDataset = Array.from({ length: 50000 }, (_, index) => index);

console.log('Starting chunked processing — UI stays responsive');

processLargeDatasetInChunks(largeDataset, 5000)
  .then((results) => {
    console.log(`Processing complete — first result: ${results[0]}, last result: ${results[results.length - 1]}`);
    console.log(`Total items processed: ${results.length}`);
  });

console.log('This logs immediately — chunked work is non-blocking');

// ─── Node.js event loop phase ordering demonstration ───
// Run this with: node NodeEventLoopPhases.js

const { readFile } = require('fs');

// process.nextTick fires between phase transitions —
// BEFORE Promise microtasks, BEFORE setImmediate, BEFORE setTimeout.
process.nextTick(() => {
  console.log('2. process.nextTick — highest priority async callback');
});

// Promise .then fires in the microtask queue —
// after nextTick queue drains, before the event loop moves phases.
Promise.resolve().then(() => {
  console.log('3. Promise .then — microtask, after nextTick');
});

// setTimeout with 0ms delay — goes to Timers phase.
// In Node, 0ms is clamped to 1ms minimum by libuv.
setTimeout(() => {
  console.log('5. setTimeout — Timers phase (non-deterministic vs setImmediate outside I/O)');
}, 0);

// setImmediate — runs in the Check phase, AFTER the Poll phase.
setImmediate(() => {
  console.log('5-alt. setImmediate — Check phase (non-deterministic vs setTimeout outside I/O)');
});

console.log('1. Synchronous code — runs first, always');

// ─── Inside an I/O callback, ordering is DETERMINISTIC ───
readFile(__filename, () => {
  // Inside an I/O callback we're in the Poll phase.
  // setImmediate (Check phase) ALWAYS fires before setTimeout (next Timers phase)
  // when scheduled from within I/O.

  setTimeout(() => {
    console.log('8. setTimeout inside I/O — Timers phase of NEXT loop iteration');
  }, 0);

  setImmediate(() => {
    console.log('7. setImmediate inside I/O — ALWAYS before setTimeout here');
  });

  process.nextTick(() => {
    console.log('6. process.nextTick inside I/O — fires before both, between phases');
  });

  console.log('4. Synchronous code inside I/O callback');
});

// ─── Dangerous: recursive nextTick starves I/O ───
// DON'T DO THIS in production — it prevents the event loop
// from ever advancing past the nextTick queue.
/*
function dangerousRecursiveNextTick() {
  process.nextTick(dangerousRecursiveNextTick); // Starves all I/O!
}
dangerousRecursiveNextTick();
*/