🔍 Lesson 8: Scope & Hoisting

Introduction

Scope answers one simple question: "Can I use this variable here?" Every variable in JavaScript lives in a specific scope, and that scope determines which parts of your code can read or modify it.

Understanding scope is what separates beginners from developers who can confidently debug tricky bugs. Most "why is this undefined?" mysteries come down to scope.

Global Scope

Variables declared outside of any function or block are in the global scope. They're accessible from anywhere in your code.

// Global scope
const appName = "My Cool App";
let userCount = 0;

function showApp() {
    // ✅ Can access global variables inside functions
    console.log(appName);  // "My Cool App"
    userCount++;
}

showApp();
console.log(userCount);  // 1 — global was modified
                

// ❌ Too many globals — anyone can break these
let score = 0;
let lives = 3;
let level = 1;
let playerName = "Hero";

// ✅ Better — encapsulate in a function or object
function createGameState() {
    return {
        score: 0,
        lives: 3,
        level: 1,
        playerName: "Hero"
    };
}

const game = createGameState();
                

Function Scope

Variables declared inside a function are only accessible within that function. This applies to var, let, and const.

function calculateTotal() {
    const taxRate = 0.08;    // Only exists inside this function
    let subtotal = 50;
    let total = subtotal + (subtotal * taxRate);
    console.log(total);      // 54
}

calculateTotal();
// console.log(taxRate);  // ❌ ReferenceError: taxRate is not defined
// console.log(subtotal); // ❌ ReferenceError: subtotal is not defined
                

This is a feature, not a limitation. Function scope keeps variables private — they can't accidentally interfere with other parts of your code.

// Each function has its own scope
function greetEnglish() {
    const greeting = "Hello";   // Only in greetEnglish
    console.log(greeting);
}

function greetSpanish() {
    const greeting = "Hola";    // Different variable, different scope
    console.log(greeting);
}

greetEnglish();  // "Hello"
greetSpanish();  // "Hola"
// No conflict — each 'greeting' is independent
                

Parameters Are Function-Scoped Too

function double(number) {
    return number * 2;
}

double(5);  // 10
// console.log(number);  // ❌ ReferenceError — 'number' only exists inside double()
                

Block Scope

A block is any code between curly braces { } — if/else blocks, loops, or even standalone braces. Variables declared with let and const are block-scoped.

if (true) {
    let blockVar = "I'm inside the block";
    const alsoBlock = "Me too";
    console.log(blockVar);   // ✅ "I'm inside the block"
}

// console.log(blockVar);   // ❌ ReferenceError
// console.log(alsoBlock);  // ❌ ReferenceError
                

var Is NOT Block-Scoped

This is one of the most important differences between var and let/const. The var keyword ignores block boundaries — it's only scoped to functions.

if (true) {
    var leaked = "I escaped the block!";
    let contained = "I stayed inside.";
}

console.log(leaked);      // ✅ "I escaped the block!" — var leaks out!
// console.log(contained); // ❌ ReferenceError — let stays in the block
                

Loops and Block Scope

// let creates a new binding for each iteration
for (let i = 0; i < 3; i++) {
    // Each iteration has its own 'i'
}
// console.log(i);  // ❌ ReferenceError — i doesn't exist here

// var leaks the loop variable
for (var j = 0; j < 3; j++) {
    // All iterations share the same 'j'
}
console.log(j);  // 3 — var leaked out of the loop!
                

// ❌ Bug with var
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Prints: 3, 3, 3  (not 0, 1, 2!)
// All callbacks see the SAME 'i', which is 3 after the loop

// ✅ Fixed with let
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Prints: 0, 1, 2  (each callback has its own 'i')
                    

The Scope Chain

When JavaScript encounters a variable, it looks for it in the current scope first. If it doesn't find it, it looks in the outer scope, then the next outer scope, all the way up to the global scope. This is the scope chain.

const globalVar = "I'm global";

function outer() {
    const outerVar = "I'm in outer";

    function inner() {
        const innerVar = "I'm in inner";

        // inner can see everything above it
        console.log(innerVar);   // ✅ "I'm in inner"
        console.log(outerVar);   // ✅ "I'm in outer"
        console.log(globalVar);  // ✅ "I'm global"
    }

    inner();

    // outer can see its own scope and global, but NOT inner
    console.log(outerVar);   // ✅ "I'm in outer"
    console.log(globalVar);  // ✅ "I'm global"
    // console.log(innerVar); // ❌ ReferenceError
}

outer();
                

Variable Shadowing

When an inner scope declares a variable with the same name as an outer scope variable, the inner one shadows (hides) the outer one within that scope.

const color = "blue";  // Global

function paint() {
    const color = "red";  // Shadows the global 'color'
    console.log(color);   // "red" — uses the local one
}

paint();
console.log(color);  // "blue" — global is unchanged
                

Hoisting in Detail

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before code execution. But different declarations are hoisted differently.

var Hoisting

var declarations are hoisted and initialized to undefined. This means you can reference a var before its declaration — you'll get undefined instead of an error.

console.log(name);  // undefined (not an error!)
var name = "Ray";
console.log(name);  // "Ray"

// JavaScript sees it as:
// var name;           // Declaration hoisted, initialized to undefined
// console.log(name);  // undefined
// name = "Ray";       // Assignment stays in place
// console.log(name);  // "Ray"
                

let and const Hoisting (Temporal Dead Zone)

let and const are hoisted too, but they're not initialized. Accessing them before their declaration causes a ReferenceError. The zone between the start of the scope and the declaration is called the Temporal Dead Zone (TDZ).

// console.log(age);  // ❌ ReferenceError: Cannot access 'age' before initialization
let age = 25;
console.log(age);     // 25

// The TDZ exists from scope start to declaration
{
    // --- TDZ for 'myVar' starts here ---
    // console.log(myVar);  // ❌ ReferenceError (TDZ!)
    // --- TDZ for 'myVar' ends here ---
    let myVar = "safe";
    console.log(myVar);     // ✅ "safe"
}
                

Function Hoisting

// Function DECLARATIONS are fully hoisted (name + body)
sayHello();  // ✅ "Hello!" — works before definition

function sayHello() {
    console.log("Hello!");
}

// Function EXPRESSIONS are NOT fully hoisted
// greet();  // ❌ TypeError: greet is not a function

const greet = function() {
    console.log("Hi!");
};

greet();  // ✅ "Hi!" — works after definition
                

Introduction to Closures

A closure is when a function "remembers" the variables from its outer scope, even after the outer function has finished executing. This is one of JavaScript's most powerful features.

function createGreeter(greeting) {
    // The inner function "closes over" the greeting variable
    return function(name) {
        console.log(`${greeting}, ${name}!`);
    };
}

const sayHello = createGreeter("Hello");
const sayHola = createGreeter("Hola");

sayHello("Ray");    // "Hello, Ray!"
sayHola("María");   // "Hola, María!"

// createGreeter has finished running, but the returned
// functions still remember their 'greeting' values!
                

Practical Example: Counter

function createCounter() {
    let count = 0;  // Private variable — only the returned functions can access it

    return {
        increment() { count++; },
        decrement() { count--; },
        getCount() { return count; }
    };
}

const counter = createCounter();
counter.increment();
counter.increment();
counter.increment();
counter.decrement();
console.log(counter.getCount());  // 2

// count is truly private — no one can access it directly
// console.log(counter.count);  // undefined — not a property
// console.log(count);          // ❌ ReferenceError
                

Hands-on Exercise

// What does each console.log output? Predict first!

let a = "global a";
var b = "global b";

function test() {
    let a = "function a";
    var c = "function c";

    if (true) {
        let a = "block a";
        var d = "function d";  // var is function-scoped!
        console.log("1:", a);  // ???
        console.log("2:", b);  // ???
    }

    console.log("3:", a);  // ???
    console.log("4:", c);  // ???
    console.log("5:", d);  // ???
}

test();
console.log("6:", a);  // ???
console.log("7:", b);  // ???
// console.log("8:", c);  // What happens here?
                    

// TODO: Create a closure-based score tracker
// It should return an object with these methods:
//   addPoints(points)  — adds points to the score
//   penalty(points)    — subtracts points (min score is 0)
//   getScore()         — returns the current score
//   reset()            — resets the score to 0

// Usage:
// const tracker = createScoreTracker();
// tracker.addPoints(10);
// tracker.addPoints(25);
// tracker.penalty(5);
// console.log(tracker.getScore());  // 30
// tracker.reset();
// console.log(tracker.getScore());  // 0
                    

// Part 1 Answers:
// 1: "block a"     (let a shadows function a inside the block)
// 2: "global b"    (b found via scope chain in global)
// 3: "function a"  (block scope ended — back to function a)
// 4: "function c"  (var c in function scope — accessible)
// 5: "function d"  (var d is function-scoped, not block-scoped!)
// 6: "global a"    (global a was never modified)
// 7: "global b"    (global b accessible)
// 8: ReferenceError (c is function-scoped — not accessible globally)


// Part 2: Score Tracker
function createScoreTracker() {
    let score = 0;

    return {
        addPoints(points) {
            score += points;
        },
        penalty(points) {
            score = Math.max(0, score - points);
        },
        getScore() {
            return score;
        },
        reset() {
            score = 0;
        }
    };
}

const tracker = createScoreTracker();
tracker.addPoints(10);
tracker.addPoints(25);
tracker.penalty(5);
console.log(tracker.getScore());  // 30

tracker.penalty(100);
console.log(tracker.getScore());  // 0 (can't go below zero)

tracker.addPoints(50);
tracker.reset();
console.log(tracker.getScore());  // 0

// Score is truly private
// console.log(tracker.score);  // undefined
                        

console.log(x);
var x = 10;

Summary

📚 Additional Resources

• MDN — Scope
• MDN — Hoisting
• javascript.info — Closures
• MDN — Closures

🚀 What's Next?

You've completed Module 2! You now understand control flow, functions, and scope. In Module 3, you'll start working with data — beginning with arrays, the most important data structure in everyday JavaScript.