Variables, let, const & Block Scope

1. Simple Definition

Variable memory ke andar ek labeled storage dabba hota hai jisme hum koi value (data) temporarily store karke rakhte hain taaki baad me use ya modify kar sakein. Modern JavaScript (ES6+) me variables declare karne ke liye const (constant/fixed) aur let (reassignable) use hota hai. Puraane var ko legacy bugs ki wajah se ab use nahi kiya jata.

2. Real-Life Analogy

3. Why Do We Need It?

Bina variables ke program user ka name, cart ka total price, ya login status yaad hi nahi rakh payega. Variables dynamic state ka foundation hain.

4. Syntax & Comparison

// 1. const: Re-assignment strictly NOT allowed
const appName = "WebDev Hinglish";
// appName = "New Name"; // ❌ TypeError: Assignment to constant variable.

// 2. let: Value can be updated
let userScore = 0;
userScore = userScore + 10; // ✅ Allowed!

// 3. var: The Legacy Culprit (Never use in new code!)
var legacyBug = "Avoid me!";

5. Basic Example (Scope Demonstration)

// Global Scope
const globalUser = "Rahul";

if (true) {
  // Block Scope (Curly brackets { ... } ke andar)
  let secretCode = 1234;
  const insideBlock = "Main sirf is block me zinda hoon!";
  console.log(globalUser); // ✅ Rahul
  console.log(secretCode); // ✅ 1234
}

// console.log(secretCode); 
// ❌ ReferenceError: secretCode is not defined (Block scope protected!)

6. Output / Expected Result

7. Code Explanation

• const: Default choice hona chahiye. Isse accidental bugs nahi aate.
• let: Sirf tab use karein jab variable ki value future me re-assign karni ho (jaise loops ka let i = 0 ya counters).
• Block Scope: let aur const kisi bhi { ... } block (if, for, while) ke bahar leak nahi hote.
• Hoisting & TDZ: let aur const hoist hote hain lekin unhe initialization se pehle access karne par Temporal Dead Zone (TDZ) ki wajah se ReferenceError milta hai (jo ki acchi baat hai!).

8. Real-World Example: Shopping Cart Total

const TAX_RATE = 0.18; // 18% GST (Never changes -> const)
let cartTotal = 999;   // Can change when items are added -> let

cartTotal = cartTotal + 499; // Adding another t-shirt
const finalAmount = cartTotal + (cartTotal * TAX_RATE);
console.log("Total Payable:", finalAmount);

9. Common Mistakes

10. Best Practices

• Golden Rule: Hamesha pehle const likhein. Jab actually reassign karne ki zarurat pade, tabhi use let banayein.
• Variables ke descriptive camelCase names rakhein (jaise userEmailAddress, isLoading).

11. Try It Yourself

Playground me const birthYear = 2004; banayein aur usme birthYear = 2005; reassign karke error observe karein.

12. Challenge

Ek age-checker block banayein jisme const userAge = 19; ho aur if block ke andar let isEligible = true; define ho.

13. Interview Questions

14. Quick Revision

• Default: const.
• When changing: let.
• Never: var.
• Block Scope = Safe Scope.

15. FAQ

Variables, let, const & Block Scope

1. Simple Definition

In JavaScript, a Variable is a labeled storage container in memory used to hold data values. Modern JavaScript (ES6+) provides three variable declarations: const (for values that must not be reassigned), let (for mutable values whose values change over time), and the legacy keyword var (which is avoided in modern software due to scope hoisting flaws).

2. Real-Life Analogy

3. Comparison: var vs let vs const

4. Syntax & Basic Usage

// 1. const: Default choice for constants
const API_URL = "https://api.example.com/users";
const taxRate = 0.18;

// 2. let: Used when values mutate (counters, toggles)
let score = 0;
score = score + 10; // Perfectly valid

// 3. Block Scope demonstration
if (true) {
  let blockVariable = "Only accessible inside these braces!";
  const secretKey = 999;
}
// console.log(blockVariable); // ReferenceError: blockVariable is not defined

5. Common Mistakes

6. Best Practices

• Rule of Thumb: Always default to const. Only switch to let when you know a variable must be reassigned (e.g. loops or accumulators).
• Never use var in modern codebases.
• Use descriptive camelCase for variable names (e.g. userCartTotal).

7. Practice Exercise

8. Interview Questions

9. Summary / Cheat Card

• const by default; let when reassigning. Never var.
• let and const respect block scope {}.
• TDZ prevents reading variables prior to their declaration.

10. FAQ