13. Event Loop Masterclass: Call Stack, Web APIs, Microtasks & Macrotasks • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

JavaScript **Single-Threaded** language hai (matlab ek time pe sirf ek hi line execute kar sakti hai). Par fir bhi hum 100 API calls, 10 timers aur video streaming bina browser hang kiye kaise chala lete hain?

Iska hero hai **The Event Loop & Concurrency Model!**

**Restaurant Analogy:**
> **Call Stack:** Ek akela Waiter jo ek time pe ek customer ka order serve karta hai.  
> **Web APIs (Browser):** Kitchen jahan khana (Timers, Network requests) background me pakta hai.  
> **Microtask & Task Queues:** Counter jahan taiyar dishes rakhi hain.  
> **Event Loop:** Restaurant Manager jo continuously dekhta hai: *"Waiter free hua kya? Agar free hai, toh counter se agla order Waiter ki plate (Call Stack) par daal do!"*

---

### 2. The 4 Main Components of Concurrency

#### 1. Call Stack (Synchronous Code)
Code line-by-line execute hota hai. Jab tak Call Stack empty nahi hota, Event Loop kisi bhi background callback ko touch nahi karega.

#### 2. Web APIs
Jab tu `setTimeout(cb, 1000)` ya `fetch()` likhta hai, JS engine use browser ke C++ background threads (Web APIs) ko de deta hai aur aage badh jata hai (Non-blocking).

#### 3. Microtask Queue (VIP Priority 🔥)
*   **Kaun aata hai yahan?** `Promise.then()`, `Promise.catch()`, `queueMicrotask()`, `MutationObserver`.
*   **Rule:** Event Loop Call Stack free hote hi **sabse pehle Microtask Queue ko poora khali karega**, chahe usme 1,000 tasks kyun na hon!

#### 4. Macrotask / Task Queue (Normal Priority)
*   **Kaun aata hai yahan?** `setTimeout`, `setInterval`, `setImmediate` (Node.js), I/O events.
*   **Rule:** Ek event loop tick me sirf **ek Macrotask** execute hota hai, fir dobara Microtasks check hote hain!

---

### 3. Execution Priority Order (Big Tech Output Trick)

```javascript
console.log("1: Start (Sync)");

setTimeout(() => {
    console.log("4: setTimeout (Macrotask)");
}, 0);

Promise.resolve().then(() => {
    console.log("2: Promise 1 (Microtask)");
}).then(() => {
    console.log("3: Promise 2 (Microtask Chaining)");
});

queueMicrotask(() => {
    console.log("2.5: queueMicrotask (Microtask)");
});

console.log("5: End (Sync)");
```

#### Output Sequence & Step-by-Step Logic:
1. `1: Start (Sync)` -> Call Stack
2. `5: End (Sync)` -> Call Stack (Sync khatam!)
3. `2: Promise 1 (Microtask)` -> Microtask Queue drained
4. `2.5: queueMicrotask` -> Microtask Queue drained
5. `3: Promise 2` -> Chained Microtask drained
6. `4: setTimeout` -> Macrotask Queue se finally execute hua!

---

### 4. Comparison Table: Microtasks vs Macrotasks

---

### 5. Big Tech Real-World Bug: Microtask Starvation

```javascript
// ❌ DANGEROUS: UI Freeze Trap
function infiniteMicrotask() {
    queueMicrotask(infiniteMicrotask); // Queue kabhi empty nahi hogi!
}
// Browser button click ya scroll render nahi kar payega kyunki Call Stack/Microtask hamesha busy rahega!
```

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **`setTimeout(fn, 0)` kya guaranteed 0ms me chalta hai?** -> Nahi! 0ms ka matlab hai "jaise hi timer expire ho, callback ko Task Queue me daalo". Run tabhi hoga jab Call Stack aur saare Microtasks khatam ho chuke honge.
2. **Microtask aur Macrotask me priority kiski hoti hai?** -> Microtasks ki hamesha absolute first priority hoti hai.
3. **`queueMicrotask()` kab use karte hain?** -> Jab hume kisi synchronous task ke turant baad par agle render frame se pehle clean asynchronous logic run karna ho.

---
**Next Topic:** 14. Promises Architecture: States, Chaining & Custom MyPromise Polyfill

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

1 Questions

Easy

1. Event Loop Output Predictor & Verifier

Predict the exact console output order of the following snippet mixing synchronous, microtask, and macrotask queues.

💡 View Pro Interview Hint

• Microtasks always run before macrotasks.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Event Loop Output Predictor & Verifier

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track