Closure in JavaScript

Introduction

Closure is an important concept in JavaScript. It happens when a function remembers and can access variables from the scope where it was created, even after the outer function has finished executing.

In simple words, a closure allows an inner function to remember and access variables from its outer scope.

What is Closure?

Consider this example:

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

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

  return inner;
}

const result = outer();

result();

The output is:

Abishek

Here, inner() is created inside outer(). The inner() function uses the name variable, which belongs to the outer() function.

When outer() is called, it returns the inner function.

const result = outer();

Now result contains the inner function.

We can call it using:

result();

Even though outer() has already finished executing, inner() can still access the name variable.

This happens because inner() retains access to the lexical environment where it was created. This combination of the function and its retained access to the surrounding variables is called a closure.

How Closure Works

A closure is formed when a function retains access to variables from its outer lexical scope, even when that function is used outside the original scope.

For example:

function outer() {
  let count = 0;

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

  return inner;
}

const counter = outer();

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

The output is:

1
2
3

Here, count starts with 0.

When counter() is called for the first time, count becomes 1.

When it is called again, count becomes 2.

The third call changes it to 3.

The value is not reset to 0 because the inner() function retains access to the same count variable through its closure.

Why is Closure Useful?

Closures are useful when we want to keep some data private and allow specific functions to access that data.

For example:

function createAccount() {
  let balance = 0;

  function deposit(amount) {
    balance = balance + amount;
  }

  function getBalance() {
    console.log(balance);
  }

  return {
    deposit,
    getBalance
  };
}

const account = createAccount();

account.deposit(100);
account.deposit(50);

account.getBalance();

Output:

150

Here, balance is inside createAccount(). It cannot be directly accessed from outside.

console.log(account.balance);

This gives:

undefined

But the deposit() and getBalance() functions can access balance because they retain access to the scope where balance was created.

This makes closures useful for creating private variables and maintaining state.

Simple Way to Remember Closure

Closure can be remembered with this simple idea:

Inner Function
      ↓
Retains Access To
      ↓
Outer Scope Variables

Even after the outer function finishes, the inner function can still access those variables.

Conclusion

Closure is a feature in JavaScript where a function retains access to the variables from the scope in which it was created. It allows an inner function to access variables from its outer scope even after the outer function has finished executing.

Closures are commonly used for maintaining state, creating private variables, and writing functions that remember previous values.

In simple words:

A closure is a function that remembers and can access variables from its outer scope.