JavaScript Closures Explained Like You're Learning Them f...

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:

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:

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

推荐订阅源

DEV Community