The Event Loop: Microtasks vs. Macrotasks

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. Single-Threaded Concurrency

JavaScript is single-threaded (one Call Stack, executing one line of code at a time). Yet it handles async network requests and UI timers seamlessly using the Event Loop.

2. Why It Matters

Knowing the execution priority between Promises and setTimeout prevents subtle timing bugs in asynchronous applications.

3. Queue Priority Rules

The Event Loop continually monitors the Call Stack. When the Call Stack becomes completely empty, it processes pending callbacks in this exact order:

1. Microtask Queue (Highest Priority): Promises (.then(), async/await), queueMicrotask(). All microtasks drain completely before the loop touches macro tasks!
2. Task Queue / Macrotasks: setTimeout, setInterval, I/O events, UI rendering.

[ Call Stack (Empty) ]
         ^
         |-- 1. Drain ALL Microtasks (Promise.then)
         +-- 2. Process ONE Macrotask (setTimeout)

console.log("1. Sync Start");

setTimeout(() => console.log("2. Macrotask (Timeout)"), 0);

Promise.resolve().then(() => console.log("3. Microtask (Promise)"));

console.log("4. Sync End");

// Output Order:
// 1. Sync Start
// 4. Sync End
// 3. Microtask (Promise)  <- Drains BEFORE timeouts!
// 2. Macrotask (Timeout)

4. Common Mistakes

• Assuming setTimeout(fn, 0) Runs Immediately: setTimeout(fn, 0) yields control to the Event Loop. It runs ONLY after all synchronous code and microtasks finish!
• Starving the Event Loop with Endless Microtasks: Recursively queuing microtasks starves the Event Loop, permanently blocking timeouts, I/O, and UI repaints.

5. Next Steps

Promises always drain before setTimeout. Next, let's dive into Promises!