Coder Legion - Recent posts tagged closures

Demystifying Closures: JavaScript's Built-In Memory Backpacker

Wed, 09 Sep 2026 08:23:04 +0000

Have you ever wondered how software remembers your preferences even after a process seems to have finished? In the world of programming, this magic is often performed by a core concept known as a closure.

What is a Closure?

A closure is a fundamental programming feature where an inner function retains access to the variables of its outer function, even after that outer function has finished executing. It acts as a persistent link between a function and the environment in which it was born. This prevents the outer variables from being cleared out of your computer's active memory.

The Backpack Analogy

To understand how this works, imagine you are planning a long hike. Before you walk out the front door of your house (which represents the outer function), you pack a few essential items into your backpack (representing the variables)—a water bottle, a compass, and some trail mix.

Once you step outside, the door locks behind you. The house is closed, and you can no longer go back inside. However, as you walk down the trail (representing the inner function), you still have complete access to the water bottle, compass, and trail mix. You do not need to reopen the house to use them because they are sealed in your backpack.

In this analogy, the backpack is the closure. It is a portable envelope of data that the hiker (the inner function) carries along, regardless of where they travel or how much time has passed since they left home.

Why Closures Matter in Daily Software Engineering

For software engineers, closures are not just an academic curiosity; they are a vital tool used daily to write safe, maintainable code.

One of the biggest challenges in building large applications is avoiding "global namespace pollution." If every piece of data in an application is accessible to every function, it is highly likely that one function will accidentally overwrite data being used by another. This leads to unpredictable bugs.

Engineers use closures to create private variables. By nesting a function inside another, we can shield variables from the outside world. This is called encapsulation. It allows developers to build robust tools and software libraries where internal settings are protected from being modified by external scripts.

Seeing Closures in Action

Let's look at a simple JavaScript example that demonstrates how a closure keeps a variable alive:

function createCounter() {
  // This variable is protected inside the outer function
  let count = 0;

  // This inner function is returned, creating a closure
  return function() {
    count += 1;
    return count;
  };
}

// myCounter now holds the inner function
const myCounter = createCounter();

console.log(myCounter()); // Output: 1
console.log(myCounter()); // Output: 2

In this example, when we run createCounter(), it sets count to 0 and returns the inner function. Once it returns, the createCounter function has finished executing. Normally, its internal variables would be deleted from memory. However, because the inner function still references count, JavaScript creates a closure. Every time we call myCounter(), it still has access to that private count variable, updating it seamlessly.

The Takeaway

Closures are not a complex design pattern you need to manually install; they are a natural, built-in feature of how modern programming languages manage memory. By understanding that functions carry their original environment with them, you can write cleaner, self-contained code that keeps your data secure.

Resources

GitHub Repository: react-hook-lab
react-hook-lab: npm package
Connect with me on LinkedIn: Saurav Pandey

Originally published on my blog. You can read the alternative breakdown here.

Understanding Stateful Functions Through JavaScript Closures

Tue, 13 Jan 2026 00:27:33 +0000

Closure In JavaScript is a function that retains access to variables from its outer scope, even after the outer function has finished executing.

This definition may seem complicated at the first, but don’t worry in this article— we will Learn how JavaScript closures transform functions from stateless to stateful, with practical examples and the mental model that makes everything click.

in this article we will cover:

Why We Need Closures
What is Lexical Scope
[Understanding Closures and Lexical Scope] (#understanding-of-closures-and-lexical-scope)
Working with Closure
Use Cases for Closures
Final Remarks

Why We need closures

Closures are very important to know for you to be able to use today's modern frameworks like React, Redux library.

In this guide we will go through the inner workings of closures and also provide you with use-cases and application of closures in React framework and in real world example using closures.

Advantages of closures includes:

Helps keep the function pure without mutating the external of it.
Helps make variable private the scope they are declare in.

What is Lexical scope:

Lexical Scope by definition

Lexical scope in JavaScript are rules that determines how and where the variable can be accessed in your program.

Lexical Scope under the hood

lexical scope under the hood is an object in JavaScript’s scope either in a function or any JavaScript scope you may think of

that object which we call Lexical scope keeps track of:

the variable in that scope.
the value of this of that scope.
the pointer that points to the outer lexical scope if there any if there is no other scope above that the point is null

so, when we have a function that looks like this

let x = 10

function test(){
let y = 4
}

This function lexical scope would look like this:

as we demonstrated in this diagram each scope has its own lexical scope which points to the outer lexical scope above it.

when in the test() you try to access the variable x JavaScript will look for it in the lexical scope of test() if it is not there, it will then look in its outer lexical scope pointer which is the global one and if we have x there we will then access to x and use it inside our function of test()

What happens when we don’t have it, we will continue go up the tree and until we hit the lexical scope that’s points to null and that’s when you get the error saying: Uncaught ReferenceError: x is not defined

function test(){
let y = 4
return x
}

console.log(test()) //Uncaught ReferenceError: x is not defined

Understanding Closures and Lexical scope:

To understand closures, we first need to understand how the normal function works under the hood. this will helps knowing what options with closure that are limited when using usual function.

A normal function when its execution finishes there is a memory management mechanism in JavaScript that is known as garbage collection .

Garbage collection: is a mechanism for JavaScript to clean up the allocated memory for non-primitive data types when they are no longer in use, again if you don’t know how functions and non-primitive data types how are stored in memory, I have an article which talks about it which you can find here.

garbage collection removes the allocated memory when the function is no longer in use makes the functions after execution reset all its variables and values declared with in its block scope of a function or the passed argument to the function.

function test(){
let y = 4
return y+= 1
}

console.log(test()) // 5
console.log(test()) // 5
console.log(test()) // 5
console.log(test()) // 5

No matter how long we call the function the result will always be the same unless we have variable y in global scope

let y = 4;

function test(){
return y+= 1
}

console.log(test()) // 5
console.log(test()) // 6
console.log(test()) // 7
console.log(test()) // 8

What happens here is the garbage collection will clear out any allocated space that is no longer has reference with global object in case of browser the global object is the window object, When the function finished executing it cuts reference and ties to the window object which then makes it eligible for garbage collected and wipe out all of its declared variable and passed argument if there are any.

But when we have declared a variable in a global scope, the declared variable connection with the window object will stay forever until you remove the variable from the global scope, which is why the variable is updated to a new value every time we call the function, because the variable state is updating.

To give you a better mental model shift around these concepts you should think of them like:

stateless function: a function that has no access to variable(s) outside of its scope the function variables are stateless
stateful function: the function with access variable(s) from outside of its scope they have state which can be tracked and updated over time which makes them persists data and update as we go.

Working with closure:

You know how the whole life cycle of execution of functions and a knowledge of how lexical scope works.

I want you to take a look at this snippet:

function counter(){
let n = 0
return function(){
return n += 1
}
}

this is the most common example you will see online of working with closures, and yeah this is how we create a closure we return a function and wrap it inside another function so when we call the outer function in our case counter it will return another function which will look like this [Function (anonymous)] .

because as we have seen in the example above the counter returns a function, now the returned function has reference to its outer scope variable n thus making connection with its lexical scope, since we have the connection with variable outside of the scope of the inner function it will persist the state of data.

remember the stateful mental model it states that “the function with access to variable(s) from outside of its scope they have state which can be tracked and updated over time which makes them persists data and update as we go.”**

It means that since we have the reference to the variable n garbage collection will not remove variable n from the memory because there is some function that is referencing it,

The outer function will be removed but n will stay because of the connection it has with the inner function and that’s why mostly you will hear people define closure as “a function that retains its lexical scope even after its outer function has finished executing”

now because of closures we’ve made variable n from stateless to state preservation and now we can use the function to increment numbers we want, and here is how we execute the closure function

const count = counter() // assing the return function to a new variable
// use that variable to get the counts from the inner function
console.log(count()) //1
console.log(count()) //2
console.log(count()) //3

Tricky Question

Try and figure out what is a closure from the below 2 snippets

function outer(){
let p = 0;
return function(){
return p += 1
}
}
const results = outer()
console.log(results()) // 1
console.log(results()) // 2
console.log(results()) // 3

function outer(){
return function(){
    let p = 0;
return p += 1
}
}
const results = outer()
console.log(results()) // 1
console.log(results()) // 1
console.log(results()) // 1

Well option A is the real answer because it has reference to its outer scope while B is returning another function true,

but we are declaring variable within that function which means the moment the function finishes executing garbage collection will wipe out everything from function B

remember the stateless mental model: it states that “a function that has no access to variable(s) outside of its scope the function variables are stateless”

Use Cases for Closures

Let’s try to explore one practical use cases for closures that feels more real and makes sense to understand closure.

Example for use Case:

suppose we are creating a function that lists the names of members of our app and the country they are representing; with the stateless way we can create our function like this:

function introduceYou(name, country){
return `Hi I am ${name} and I am representing ${country}`
}

console.log(introduceYou('Jabo', 'Rwanda') // Hi I am Jabo and I am respresenting Rwanda
console.log(introduceYou('Arnold', 'Rwanda') // Hi I am Arnold and I am respresenting Rwanda 
console.log(introduceYou('Landry', 'Rwanda') // Hi I am Landry and I am respresenting Rwanda 
console.log(introduceYou('John', 'Rwanda') // Hi I am John and I am respresenting Rwanda 
console.log(introduceYou('Abdul', 'UAE') // Hi I am Abdul and I am respresenting UAE 
console.log(introduceYou('Jane', 'USA') // Hi I am Jane and I am respresenting USA 
console.log(introduceYou('Doe', 'USA') // Hi I am Doe and I am respresenting USA

Problems in Changing the existing structure

This approach works, but here’s a catch, you came up with the idea like you know what let instead use the city names instead of country names to change this would look very tedious say you have a thousand representing Rwanda, and millions representing USA.

Solution for the change

it would be hard to change all of those places and to be honest it is time consuming, but there is a solution , you can use closure to reference the thing that is common to the data we trying to capture in our case country some users may have the same country or many of them so we will make that a default reference that will stay in memory for as long as we wish to and this will make it easier changing it to something new like city

closure solution implementation

function introduceYou(locaction){
return function user(name){
return `Hi I am ${name} and I am representing ${location}`
}
}

//now we create a function that will handle people from different region

let rwandaUsers = introduceYou("Rwanda")
let americanUsers = IntroduceYou("USA")
let uaeUsers = IntroduceYou("UAE")

//and now we create a function for users based on the variable country we created

console.log(rwandaUsers("Jabo")) // Hi I am Jabo and I am respresenting Rwanda
console.log(rwandaUsers("Arnold")) // Hi I am Arnold and I am respresenting Rwanda
console.log(americanUsers("Jane")) // Hi I am Jane and I am respresenting USA
console.log(uaeUsers("Abdul")) // Hi I am Abdul and I am respresenting UAE

now if you want to change to their city all we need to be go where we’ve declared a certain user of a certain country and change the passed argument to be the city instead of country

example (let’s change rwandaUsers to use the city Kigali instead)

 rwandaUsers = introduceYou("Kigali")

console.log(rwandaUsers("Jabo")) // Hi I am Jabo and I am respresenting Kigali
console.log(rwandaUsers("Arnold")) // Hi I am Arnold and I am respresenting Kigali

Final Remarks

When I was preparing this article, I found that React states are built using closures which links back to that mental model shift for stateless and stateful function I shared with you, those mental model helped me realize why React state are called state and how they are able to persist data throughout component life cycle.

I hope this article gave you both understanding and confidence with closures. If you found it valuable, please share it with someone who's struggling with this concept—it might be the explanation that finally makes it click for them.