The JavaScript Event Loop & Task Queues
02 // Simple Explanation (Mental Model)
JavaScript is single-threaded, meaning it can only do one task at a time. The event loop allows JavaScript to perform non-blocking asynchronous operations by offloading timers and network requests to browser/Node APIs and queuing callbacks.
03 // Technical Deep Dive & Internals
The Call Stack executes synchronous frames. When asynchronous tasks finish, their callbacks enter either the Microtask Queue (Promise callbacks, queueMicrotask, MutationObserver) or the Macrotask/Task Queue (setTimeout, setInterval, setImmediate, I/O). The Event Loop continuously checks if the Call Stack is empty; once empty, it exhausts the entire Microtask Queue before picking a single Macrotask.
console.log("1: Sync");
setTimeout(() => console.log("2: Macrotask (setTimeout)"), 0);
Promise.resolve().then(() => console.log("3: Microtask (Promise)"));
queueMicrotask(() => console.log("4: Microtask (queueMicrotask)"));
console.log("5: Sync");
// Output Order: 1 -> 5 -> 3 -> 4 -> 205 // Real-World Production Architecture
Handling UI rendering priorities, batching state updates in React, and scheduling background calculations without freezing the main thread.
06 // Common Pitfalls & Mistakes to Avoid
Assuming setTimeout(fn, 0) runs immediately. It will always wait until all synchronous code and all pending microtasks have finished.
09 // Quick Revision Notes (Pre-Interview Spec Sheet)
Call Stack -> Microtask Queue (exhausted completely) -> 1 Macrotask -> Repeat.