JavaScript Event Loop Cheat Sheet

function first() { second(); }function second() { third(); }function third() { console.log("deepest"); }first();// Stack grows: first -> second -> third// Each frame pops off as its function returns// JS is single-threaded: nothing else runs until the stack is empty

console.log("1: sync start");setTimeout(() => console.log("4: macrotask (setTimeout)"), 0);Promise.resolve().then(() => console.log("3: microtask (promise)"));console.log("2: sync end");// Output order: 1, 2, 3, 4// All sync code runs first, then ALL queued microtasks,// then one macrotask, then microtasks again, and so on.

setTimeout(() => console.log("timeout"), 0);Promise.resolve()  .then(() => console.log("promise 1"))  .then(() => console.log("promise 2"));   // Chained .then adds another microtaskqueueMicrotask(() => console.log("explicit microtask"));// Output: "promise 1", "explicit microtask", "promise 2", "timeout"// The ENTIRE microtask queue empties before the event loop// picks up the next macrotask (the setTimeout callback)

function blockFor(ms) {  const end = Date.now() + ms;  while (Date.now() < end) {}   // Busy-wait -- freezes everything}console.log("start");setTimeout(() => console.log("this is delayed"), 0);blockFor(3000);         // No callbacks, renders, or input can run for 3sconsole.log("end");// "this is delayed" only logs AFTER blockFor finishes,// even though the timer was 0ms