Understanding JavaScript Closures and Nested Functions Step by Step | Why Closures Matter

 

What is a Closure in JavaScript?

A closure happens when an inner function uses variables from its outer function. Even after the outer function finishes, the inner function keeps a reference to those variables. This is why the name “closure” makes sense – the inner function closes over the environment where it was born.

In order to understand better Closure and High order function (HOD), you must try to understand below points first:

Functions
1) stored in variables, 
2) passed as arguments, 
3) returned from other functions.
4) function references
5) function execution

Higher-order functions = take/return functions.

Nested functions = help with closures and scope

function outer() {
  let message = "Hello Closure!";

  function inner() {
    console.log(message); // inner remembers 'message'
  }

  return inner;
}

const fn = outer();
fn(); // "Hello Closure!"

Backpack Analogy for Beginners

Think about a student leaving a library. Normally when the library closes, you lose access to its books. But if you carry a backpack of books, you can still read them at home. Same with closure: a function carries a backpack of variables, so it still has access even when the parent function is done.

JavaScript Counter Without Closure

You can create a counter program without closure using global variables, objects, or classes. But in each case, the counter variable can be modified from outside, which reduces privacy.

Global Variable Example

let count = 0;

function increment() {
  count++;
  return count;
}

console.log(increment()); // 1
console.log(increment()); // 2

Class Example

class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
    return this.count;
  }
}

const counter = new Counter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

These methods work, but anyone can change counter.count = 999 directly, which breaks the logic.

Counter Program With Closure

Now let’s see how closure makes counter more secure. Instead of exposing the variable, we keep it private inside a closure.

function createCounter() {
  let count = 0; // private

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Here the variable count is stored inside the closure “backpack”. It is not accessible directly from outside, but the returned function can still update and return it. This is a perfect example of closure in action.

Comparison: Closure vs Global vs Class

Approach	Works?	Privacy	Can Outside Change?
Global Variable	Yes	No	Yes (any script can update)
Class	Yes	Partial	Yes (public property)
Closure	Yes	Strong	No (variable is hidden)

Why Closures are Useful

• Data privacy: make variables hidden and safe.
• Maintain state between function calls.
• Useful in callbacks and async code.
• Function factories: you can generate custom functions on the fly.

Conclusion

Closures in JavaScript are not magic, but they are like carrying a backpack of variables with your function. You can create counters without closure using globals or classes, but in my experience closures are the best when you want data privacy. Next time you see a function inside another function, remember: that is closure in action.