Closures Explained With One Real Example

If you’ve spent any time learning JavaScript, you’ve probably heard the word closure. It sounds complicated, but closures are actually something JavaScript uses all the time behind the scenes — and you’ve already benefited from them without realizing it.

In simple terms, a closure happens when a function remembers the variables from the place where it was created, even after that outer function has finished running.

That might sound abstract, so let’s walk through a real example you might actually use in a project.

A Real Example: Creating a Counter

Imagine you want to create a counter. Each time a user clicks a button, the number should increase — but you don’t want that number to be accessible or editable from anywhere else in your code.

Closures make this possible.

function createCounter() {
  let count = 0;

  function increment() {
    count = count + 1;
    console.log(count);
  }

  return increment;
}

const counter = createCounter();

counter();
counter();
counter();

When createCounter() runs, it creates a variable called count.
Then it returns the increment() function.

Here’s the magic part.

Even after createCounter() finishes running, the increment() function still remembers the count variable. That “memory” is the closure.

Why Doesn’t `count` Disappear?

Normally, when a function finishes executing, all the variables inside it disappear. But in this case JavaScript sees that another function is still using count.

So instead of deleting it, JavaScript keeps it alive in memory.

Every time counter() runs, it increases the same count value.

Nobody else in the program can touch that count. It’s completely private, and closures are what make that possible.

Where You See Closures in Real Life

Closures show up almost everywhere in modern JavaScript:

✔ Event listeners
✔ React hooks
✔ Async functions
✔ Module patterns
✔ Private variables

Any time you see a function inside another function, there’s a good chance a closure is happening in the background.

The One-Sentence Definition

If you remember nothing else, remember this:

A closure is when a function remembers variables from its surrounding scope, even after that outer function has finished running.

Once you start noticing closures in real code, you’ll realize they are one of the most powerful features in JavaScript — and surprisingly simple once they “click.”

Happy coding 🙂

Closures Explained With One Real Example