JavaScript Closures: The “Backpack” Analogy 🎒

A closure is a function that remembers the variables from its outer scope even after that outer function has finished running. Closures allow you to lock in configuration data now, so you can execute the function later.

The Big Secret: Functions Have Memory

In JavaScript, functions are like short-term memory cards. They wake up when you call them, do some work, forget everything they just did, and disappear.

Look at this normal function:

function greet() {
    let message = "Hello!";
    console.log(message);
}
greet(); // Prints: "Hello!"
// The 'message' variable is now dead and gone.

Once greet() finishes running, the computer completely wipes the message variable from its memory to save space.

But what happens if we put a function inside another function? This is where the magic happens.

Enter The Backpack Analogy 🎒

When you nest an inner function inside an outer function, that inner function gets a special superpower. It gets a backpack.

Inside that backpack, the inner function packs up all the variables from the outer function that it might need later. It carries this backpack with it everywhere it goes, even after the outer function has finished running and closed down.

Get IamNoOne’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let’s look at a classic counter example to see this in action:

function createCounter() {
    let count = 0; // The outer variable
    return function() { 
        count++; // The inner function modifies the outer variable
        console.log(count);
    };
}
// 'counter' now holds the inner function returned by createCounter
const counter = createCounter(); 
counter(); // Prints: 1
counter(); // Prints: 2
counter(); // Prints: 3

Wait, What Just Happened? 🤯

1. We ran createCounter(). It created a variable called count = 0.
2. Instead of returning a number, it returned the entire inner function and assigned it to our new variable, counter.
3. The createCounter() function is now officially finished executing. Normally, count should be deleted.
4. But when we call counter(), it still magically remembers and updates count!

Why? Because count was packed away safely inside the inner function’s backpack (technically called its lexical environment).

Why Do We Care? (The Practical Use)

Closures are not just a party trick; they are used every day for Data Privacy.

Imagine you are building a game. You don’t want sneaky players to open the browser console and manually change their score to 99999. Closures allow you to lock variables inside a function so the outside world cannot touch them.

function gameCharacter(name) {
    let health = 100; // Secret variable! Nobody can touch this directly.
    return {
        takeDamage: function() {
            health -= 10;
            console.log(`${name} has ${health} health left.`);
        }
    };
}
const hero = gameCharacter("Spider-Man");
hero.takeDamage(); // "Spider-Man has 90 health left."
// There is absolutely no way to type `hero.health = 500` from the outside!

Summary for Your Next Interview

If anyone ever asks you what a closure is, just remember: A closure is a function that remembers its outer variables, even after the outer function has closed. It is a function with a backpack.