JavaScript Closures Explained Like You're Learning Them for the First Time

Have You Ever Wondered How This Works?

Imagine you have a function:

function createCounter() {
  let count = 0;

  return function () {
    count++;
    console.log(count);
  };
}

const counter = createCounter();

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

Output:

1
2
3

At first glance this looks strange.

The variable count belongs to createCounter().

Once createCounter() finishes executing, shouldn't count disappear?

Then why does JavaScript still remember it?

The answer is: Closures.

But before understanding closures, let's understand how variables normally behave.

---

How Variables Normally Work

Consider this function:

function greet() {
  let name = "Anshul";

  console.log(name);
}

greet();

Output:

Anshul

After the function finishes:

greet();

the variable:

name

is removed from memory because it is no longer needed.

Think of it like this:

Function starts
    ↓
Variable created
    ↓
Function ends
    ↓
Variable removed

This is normal JavaScript behavior.

---

Now Let's Break the Rules

Look at this code:

function outer() {
  let name = "Anshul";

  return function inner() {
    console.log(name);
  };
}

const sayHello = outer();

sayHello();

Output:

Anshul

Something interesting happened.

The function outer() finished executing.

Yet inner() can still access:

name

How?

---

What JavaScript Actually Does

When JavaScript creates inner(), it notices that the function uses a variable from its parent scope:

name

Instead of deleting that variable, JavaScript keeps it alive.

It creates a hidden connection between:

inner()
      +
remembered variables

This connection is called a Closure.

---

The Simplest Definition

A closure is:

A function that remembers variables from its outer scope even after the outer function has finished executing.

That's it.

No complicated terminology required.

---

Visualizing a Closure

Step 1:

const sayHello = outer();

Memory:

outer()

name = "Anshul"

Step 2:

return inner;

JavaScript stores:

inner()
   |
   └── remembers name = "Anshul"

Step 3:

sayHello();

Output:

Anshul

Even though outer() no longer exists.

---

Real-World Example #1: Counter

Let's build a counter.

function createCounter() {
  let count = 0;

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

const counter = createCounter();

console.log(counter());
console.log(counter());
console.log(counter());

Output:

1
2
3

Why?

Because the returned function remembers:

count

between executions.

Memory looks like:

counter()
      |
      └── count = 3

The value survives because of the closure.

---

Real-World Example #2: Private Variables

Suppose we're building a bank account.

We don't want anyone changing the balance directly.

Bad:

account.balance = 1000000;

Let's hide it.

function createAccount() {
  let balance = 1000;

  return {
    deposit(amount) {
      balance += amount;
    },

    getBalance() {
      return balance;
    }
  };
}

const account = createAccount();

account.deposit(500);

console.log(account.getBalance());

Output:

1500

Trying this:

console.log(account.balance);

Output:

undefined

The variable is protected inside the closure.

---

Real-World Example #3: Function Factory

Closures allow us to generate customized functions.

function multiplyBy(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));
console.log(triple(5));

Output:

10
15

Each function remembers its own value.

double()
   remembers multiplier = 2

triple()
   remembers multiplier = 3

---

Why Closures Are Important

Closures are used everywhere in JavaScript:

• Event handlers
• React Hooks
• Debouncing
• Throttling
• Authentication systems
• State management
• Timers
• Function factories

Even if you don't write closures intentionally, you're already using them.

---

Common Interview Question

What will this print?

function outer() {
  let x = 10;

  return function () {
    console.log(x);
  };
}

const fn = outer();

fn();

Answer:

10

Because the returned function remembers x.

---

Common Mistake

Consider:

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

Output:

4
4
4

Why?

Because all callbacks share the same variable.

Using let:

for (let i = 1; i <= 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

Output:

1
2
3

Each iteration gets its own closure.

---

Are Closures Bad for Memory?

Not at all.

But if a closure keeps referencing a huge object, JavaScript cannot remove that object from memory.

Example:

function createHandler() {
  const hugeData = new Array(1000000).fill("data");

  return function () {
    console.log(hugeData.length);
  };
}

Since the returned function uses hugeData, it stays in memory.

This can sometimes lead to memory issues if not handled carefully.

---

Final Thoughts

A closure is simply:

A function remembering variables from the place where it was created.

That's all.

Whenever a function accesses variables from an outer scope and keeps using them later, a closure is created.

Once you understand closures, concepts like:

• Debouncing
• Throttling
• React Hooks
• Memoization
• State Management

become much easier to understand.

The next time someone says "closure," think:

Function + Remembered Variables = Closure