JavaScript Scope & The Scope Chain

1. What is Scope?

Scope simply answers one question: "Where in my code can I actually use this variable?"

function login() {
    const token = "SECRET_123";
}
// console.log(token); 
// ❌ Error: token is trapped inside login()

if (true) {
    let role = "Admin";
}
// console.log(role);
// ❌ Error: role is trapped inside {}

2. Why `var` is Dangerous (It Ignores Curly Braces)

In old JavaScript, var did not care about if blocks or for loops. It would sneak out and pollute the rest of your code:

// ❌ Old var leaks out of {} blocks:
if (true) {
    var leaked = "I escaped!";
}
console.log(leaked); // "I escaped!" (Pollutes outer code!)

// ✅ Modern let stays safely trapped:
if (true) {
    let safe = "I am locked in!";
}
// console.log(safe); // ❌ Error: safe is not defined

I escaped!

3. The Scope Chain (How JavaScript Finds Variables)

When JavaScript needs to read a variable, it looks inside your code like someone searching for their keys:

1. Step 1: It checks the current room (local scope). If found, it uses it!
2. Step 2: If not found, it steps outside into the parent room (enclosing function).
3. Step 3: If still not found, it checks the whole house (global scope).
4. Step 4: If it still can't find it anywhere, it stops and gives you a ReferenceError!

const globalName = "Earth";

function country() {
    const countryName = "India";

    function city() {
        const cityName = "Mumbai";
        // The inner function can see everything outside it:
        console.log(`${cityName} is in ${countryName}, on planet ${globalName}`);
    }

    city();
}

country();

Mumbai is in India, on planet Earth

4. Variable Shadowing (Hiding an Outer Variable)

If an inner block creates a variable with the exact same name as an outer variable, the inner variable temporarily hides (shadows) the outer one inside that block:

const theme = "dark"; // Outer global theme

function setCustomTheme() {
    const theme = "light"; // Shadows the outer "dark" theme inside this function!
    console.log("Inside function theme is:", theme); // "light"
}

setCustomTheme();
console.log("Outside in global theme is:", theme);    // "dark" (Untouched!)

Inside function theme is: light
Outside in global theme is: dark

5. Strict Mode: Preventing Accidental Global Variables

If you mistype a variable name without let or const (like myScore = 100), old JavaScript would accidentally create a global variable! Writing "use strict" at the top prevents this by throwing an immediate error:

function testSafety() {
    "use strict";
    try {
        // Mistyped without let or const
        score = 99; 
    } catch (err) {
        console.log("Strict mode caught the typo:", err.message);
    }
}

testSafety();

Strict mode caught the typo: score is not defined

6. Quick Scope Summary

7. Scope Interview Deck

Test your knowledge on block scope traps, lexical scope lookup, shadowing, TDZ in functions, and strict mode:

if (true) {
    var a = 10;
    let b = 20;
}

console.log(a);
console.log(b);

let count = 0;

function outer() {
    let count = 10;
    function inner() {
        console.log(count);
    }
    inner();
}

outer();

let x = "global";

function test() {
    let x = "local";
    if (true) {
        let x = "block";
    }
    console.log(x);
}

test();

let val = 50;

function compute() {
    console.log(val);
    let val = 100;
}

compute();

function leak() {
    "use strict";
    hidden = 42;
}

leak();

8. Practice Challenge