DEV Community

Rakshambika
Rakshambika

Posted on

Closure in JS

What is a Closure?

  • A closure is created when an inner function remembers and can access variables from its outer function even after the outer function has finished executing.

Example:

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

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

    return inner;
}

const myFunction = outer();

myFunction();
Enter fullscreen mode Exit fullscreen mode

Output:

Raksha
Enter fullscreen mode Exit fullscreen mode

Here,

  1. outer() is called.
  2. name is created inside outer().
  3. inner() is created and uses name.
  4. outer() finishes execution.
  5. Normally, you might think name is gone.
  6. But inner() remembers name.
  7. When we call myFunction(), it can still access "Raksha".

That is a closure.


Why do we use closures?

Closures are useful for:

  • Data privacy
  • Counters
  • Callbacks
  • Event handlers
  • Maintaining state
  • Function factories
  • Async JavaScript
  • Real-life example

Think of a bank account:

function bankAccount() {
    let balance = 1000;

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

        getBalance: function() {
            return balance;
        }
    };
}

const account = bankAccount();

account.deposit(500);

console.log(account.getBalance());
Enter fullscreen mode Exit fullscreen mode

Output:

1500
Enter fullscreen mode Exit fullscreen mode

The balance variable cannot be directly accessed from outside:

console.log(account.balance);
Enter fullscreen mode Exit fullscreen mode

It gives:

undefined
Enter fullscreen mode Exit fullscreen mode

But the inner functions can access it because they close over balance.


Top comments (0)