Closures in JavaScript: Functions That Remember More Than They Should

There’s a moment in learning JavaScript where functions stop feeling like simple tools and start behaving like something more… alive.

You write a function, return another function from it, and somehow — even after the outer function is gone — the inner function still remembers things.

It feels a bit like magic.

But it’s not magic.

It’s closure.

The Strange Behavior That Starts It All

Consider this:

function outer() {
  let count = 0

  function inner() {
    count++
    console.log(count)
  }

  return inner
}

const fn = outer()
fn()
fn()

The surprising part isn’t the syntax.

It’s this question:

Why does inner still have access to count even after outer has finished executing?

If outer is gone, shouldn’t count be gone too?

But it isn’t.

And that’s where closures begin.

A Function Doesn’t Come Alone

When JavaScript creates a function, it doesn’t just store the function’s code.

It also stores the environment in which the function was created.

So when you return inner, you’re not just returning a function.

You’re returning:

function + its surrounding variables

That combination is what we call a closure.

It’s not a feature you explicitly use.

It’s something that naturally happens because of how JavaScript handles scope.

Remembering Without Being Told To

A closure allows a function to remember variables from its original scope — even when that scope is no longer active.

That means this:

function greet(name) {
  return function () {
    console.log("Hello " + name)
  }
}

const sayHi = greet("Rishi")
sayHi()

Even though greet has already finished, sayHi still knows "Rishi".

It’s carrying that value with it.

Not because you told it to, but because JavaScript preserved the environment.

Closures as Hidden State

This becomes much more interesting when you realize closures can hold state.

function createCounter() {
  let count = 0

  return {
    increment() {
      count++
    },
    get() {
      return count
    }
  }
}

Now:

const counter = createCounter()

counter.increment()
counter.increment()
counter.get() // 2

There is no global variable.

No class.

No external storage.

And yet, the value persists.

The count variable lives inside the closure, hidden from the outside world.

This is one of the simplest forms of encapsulation in JavaScript.

Each Closure Lives Its Own Life

Every time you call a function that creates a closure, you get a new, independent environment.

const a = createCounter()
const b = createCounter()

a.increment()
a.increment()

b.increment()

a.get() // 2
b.get() // 1

Even though both come from the same function, they do not share state.

Each closure has its own memory.

This is an important shift in thinking:

Closures are not shared containers.

They are individual environments tied to each function instance.

The Subtle Trap: Variables, Not Values

Closures don’t capture values.

They capture variables.

This distinction becomes important in loops:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100)
}

You might expect:

0
1
2

But you get:

3
3
3

Because all functions share the same i.

They don’t capture the value at each iteration.

They reference the same variable.

Changing var to let creates a new binding per iteration — and fixes the issue.

This is one of the most common closure-related bugs.

Closures Are Everywhere

Once you start noticing closures, you realize they’re not rare at all.

They appear in:

• event handlers
• callbacks
• timers
• factory functions
• even modern frameworks like Vue and React

Any time a function uses variables from its outer scope, a closure is involved.

It’s not something you opt into.

It’s something JavaScript does for you.

A Shift in Perspective

At first, functions feel like isolated blocks of logic.

You give them input, they give you output.

Closures break that model.

They show that functions are not just about behavior.

They are also about memory.

A function can carry context with it.

It can remember where it came from.

And it can use that memory later, even when everything else has moved on.

What Closures Really Are

It’s tempting to define closures as a technical rule about scope.

But a more useful way to think about them is this:

Closures are how JavaScript allows functions to retain access to their past.

Not in a historical sense, but in a structural one.

They preserve the environment in which they were created.

And that changes how you think about functions entirely.

They’re not just actions.

They’re actions with memory.