04. Variables, Scope & The Temporal Dead Zone (var vs let vs const) • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

Variables data ko store karne ke boxes hain. JavaScript me variables declare karne ke 3 keywords hain:
*   `var` (Purana zamana - 1995 se)
*   `let` (Modern ES6 - 2015 me aaya)
*   `const` (Modern ES6 - Constants ke liye)

---

### 2. Scope Kya Hota Hai? (Boundary of Access)

Scope decide karta hai ki ek variable kahan tak access kiya ja sakta hai. JS me 3 tarah ke scope hote hain:

```
[ Global Scope ] - Pura program dekh sakta hai
   └── [ Function Scope ] - Sirf us function ke andar
          └── [ Block Scope { } ] - Sirf us { if / for / block } ke andar
```

1.  **Global Scope:** Jo variable kisi function ya block ke bahar ho. Pura code use access kar sakta hai.
2.  **Function Scope (`var`):** Variable sirf us function ke andar zinda rehta hai. Function se bahar nahi ja sakta.
3.  **Block Scope (`let` / `const`):** Curly braces `{ ... }` ke andar jo declare hua, wo unhi braces ke andar khatam ho jata hai (`if`, `for`, `while`).

---

### 3. Hoisting & The Temporal Dead Zone (TDZ)

#### Hoisting Kya Hai?
JavaScript code execute karne se pehle **Memory Allocation (Creation Phase)** karti hai. Isme saare variable aur function declarations ko scope ke top par le jaya jata hai.

*   `var` hoist hoke **`undefined`** se initialize ho jata hai.
*   `let` aur `const` bhi hoist hote hain, par initialize **NAHI** hote. Wo ek aisi state me baithe rehte hain jise **TDZ** kehte hain.

#### Temporal Dead Zone (TDZ) Kya Hai?
Block shuru hone se lekar jab tak `let`/`const` wali line physically execute na ho jaye, us time duration ko **TDZ** kehte hain.

Agar TDZ ke dauran variable ko read/write karne ki koshish karoge:
👉 `ReferenceError: Cannot access 'x' before initialization` mil jayega!

```javascript
{
    // === TDZ Starts for 'age' ===
    // console.log(age); // ❌ ReferenceError!
    let age = 25;       // === TDZ Ends ===
    console.log(age);   // ✅ 25
}
```

---

### 4. Master Comparison Matrix

| Feature | `var` | `let` | `const` |
| :--- | :--- | :--- | :--- |
| **Scope** | Function Scope | Block Scope `{ }` | Block Scope `{ }` |
| **Hoisting** | Hoisted with `undefined` | Hoisted in TDZ | Hoisted in TDZ |
| **Re-declaration** | ✅ Allowed (`var a=1; var a=2;`) | ❌ SyntaxError | ❌ SyntaxError |
| **Re-assignment** | ✅ Allowed (`a = 10;`) | ✅ Allowed (`a = 10;`) | ❌ TypeError (`const pi = 3.14`) |
| **Initialization** | Optional (`var a;`) | Optional (`let a;`) | 🔴 Mandatory (`const a = 10;`) |
| **Window Object** | `window.a` me attach hota hai | Attach nahi hota | Attach nahi hota |

---

### 5. Famous Asynchronous Loop Trap (Interview Gold)

```javascript
// TRAP CODE:
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 (Kyunki var function scoped hai, ek hi 'i' share hua!)

// FIX WITH LET:
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2 (Kyunki let block scoped hai, har loop me naya 'i' banta hai!)
```

---

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

1.  **`var`, `let`, `const` me main difference kya hai?** -> `var` function-scoped hai aur undefined se hoist hota hai. `let`/`const` block-scoped hain aur TDZ me rehte hain. `const` re-assign nahi ho sakta.
2.  **Kyun bolte hain ki `let` hoist hota hai agar ReferenceError aata hai?** -> Agar hoist nahi hota toh bahar ka global variable use kar leta, lekin ReferenceError deta hai jisse prove hota hai ki variable scope me register ho chuka hai par TDZ me hai.
3.  **`const` object ki property change ho sakti hai?** -> Haan! `const user = { age: 20 }; user.age = 21;` bilkul valid hai kyunki memory address same hai, sirf heap data change hua hai.
4.  **Modern JavaScript me kya rule follow karein?** -> By default `const` use karo. Agar value re-assign karni ho toh `let` use karo. `var` ko kabhi use mat karo.

---
**Next Topic:** 05. Type Coercion, Equality Quirks (== vs ===, NaN & Object.is)

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track