Closures and Scope

Closures are the heart and soul of JavaScript.

They power:

• Private variables
• Function factories
• Event handlers
• State management
• React hooks
• Asynchronous behavior
• Memoization
• Module patterns
• Currying
• Encapsulation
• Secure data control

Every professional JavaScript developer — especially those working in React, Node.js, or complex web apps — uses closures every single day, often without noticing.

By the end of this lesson, closures will feel completely natural.

Before closures make sense, you MUST understand scope.

Scope = where variables can be accessed.

JavaScript uses Lexical Scope, meaning:

📌 Variables are resolved based on WHERE the code was written, not where it is executed.

const message = "Global";

function show() {
    console.log(message);
}

function test() {
    var x = 10;
}
console.log(x); // Error!

if (true) {
    let a = 5;
}
console.log(a); // Error!

function outer() {
    const name = "Boopie";
    
    function inner() {
        console.log(name);
    }
    
    return inner;
}

outer()();  // "Boopie"

A closure is:

A function that "remembers" variables from its outer scope — even after the outer function has returned.

This is the single most important concept in JavaScript.

The Classic Example:

function outer() {
    const secret = "I know you, Boopie";

    return function inner() {
        console.log(secret);
    };
}

const fn = outer();
fn(); // still prints the secret!

Even though outer() has finished executing, the inner function keeps access to:

• variables
• constants
• parameters
• inner scopes

Closures keep data alive.

JavaScript has no private keyword (until ES2020 classes). Before that, closures were the ONLY way to hide data.

Example: Private Counter

function createCounter() {
    let count = 0; // private

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

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.value();     // 2

You CANNOT do:

console.log(counter.count); // undefined

This is true encapsulation — impossible with global variables.

Closures let you preload data into functions.

Make a Function That Remembers a Number (Multiplier):

function makeMultiplier(factor) {
    return function (number) {
        return number * factor;
    };
}

const double = makeMultiplier(2);
const triple = makeMultiplier(3);

double(10); // 20  
triple(10); // 30

This technique powers:

• dynamic validators
• React hook generators
• custom loggers
• configuration wrappers
• dependency injection

Event handlers, timeouts, and interactive websites heavily rely on closures.

Example:

function setupButton(name) {
    const btn = document.getElementById(name);
    
    btn.addEventListener("click", () => {
        console.log(`${name} clicked`);
    });
}

Even after setupButton finishes, the inner arrow function still knows:

• name
• surrounding variables
• the DOM element

That's why closures are essential for UI programming.

Closures keep variables alive during async operations.

Example:

function fetchUser(id) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`Fetched user ${id}`);
        }, 500);
    });
}

function loadUser(id) {
    const prefix = "Result:";

    fetchUser(id).then(result => {
        console.log(prefix, result);
    });
}

loadUser(10);

Even though loadUser has returned long before the API finishes, the .then() callback remembers prefix.

This is EXACTLY how:

• fetch()
• timers
• async/await
• React state
• Node.js callbacks

all retain access to old variables.

Memoization = caching results so future calls are instant.

Closures make memoization easy.

function memoize(fn) {
    const cache = {};

    return function (...args) {
        const key = JSON.stringify(args);
        
        if (cache[key]) {
            console.log("(cached)");
            return cache[key];
        }

        const result = fn(...args);
        cache[key] = result;
        return result;
    };
}

const fastSquare = memoize(n => n * n);

fastSquare(10); // 100
fastSquare(10); // (cached) 100