closures in JavaScript
I never really understood closures in JavaScript — but today is the day.
My first attempt to understand something in JavaScript is usually to look at the documentation. The official definition of a closure is:
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives a function access to its outer scope. In JavaScript, closures are created every time a function is created, at function creation time.
I thought about this definition a lot, so I’ll try to break it down into smaller pieces.
What is the lexical environment?
The lexical environment is the internal system JavaScript uses to manage scope. It stores variables and keeps references to outer scopes, so JavaScript knows where to look up identifiers.
What is scope?
Scope is a rule system in JavaScript. It determines where a variable, function, or identifier can be accessed in the code.
Maybe it is important to say that not all scope systems work the same way. But this is how JavaScript works.
One of the most fundamental principles in JavaScript: Everything from a parent is accessible to the child, but nothing from the child can be accessed by the parent. A child function can access its parents variables, but a parent cannot access the child.
So back to closures:
What does closure itself mean? The word literally means “bond”. It’s like storing a variable inside a box, or keeping it safe while locking it away. A closure is a function defined inside of another function, the inner function has access to the variables and scope of the outer function.
So, I understand Closures in JavaScrupt like this:
A function that remembers and can access variables from the scope where it was created, even after that scope has finished executing.
Example:
What’s happening:
inner is created inside outer
outer finishes running
Normally, its variables should disappear
But inner still needs count
JavaScript keeps that scope alive
That preserved scope + function = closure
A closure is a function bundled with its surrounding lexical scope.
And for what do we need it?
We use closures whenever we need a function to remember data from earlier or keep state without exposing it globally.
Maybe another note on this example is, why do we create a const named counter, and call counter(); and not outer(); … i was confused by this when I started JavaScript.
Lets get through it step by step:
outer does not increment anything
outer creates count
outer creates inner
outer returns inner
So outer()’s job is to create and hand you a function, not to do the counting itself.
What happens when we create the const named counter:
const counter = outer();Calls outer()
Creates a new count = 0
Returns inner
Stores inner in counter
When we call outer() inner gets never called. It just creates inner and throws it away
Mh, doesn’t make sense you think? Because we said that counter is outer()?
counter is NOT the same as outer. and here is why:
They are related, but they are not the same function.
outer is:
A function
When called, it creates count
When called, it creates and returns another function (inner)
outer !== inner
But when we create a const, outer() has already finished, count exists inside outers scope and the return value is the function inner.
result === inner // true (the returned one)
result === outer // false ❌
And this:
const counter = outer();means
“Call outer, take what it returns, and store it in counter.”
And what does outer return?
inner
counter is just a new name for the returned inner function.
And count still exists because inner uses count and JavaScript sees that count is still needed. So it does not destroy outers scope. And that preserved scope is the closure.
Closures are not something you manually create — they are a natural result of functions and lexical scope in JavaScript. Closures work because JavaScript uses lexical scope and preserves scopes that are still needed.