Closures are one of the most fundamental and frequently asked about concepts in JavaScript interviews. They allow inner functions to access variables from their outer scope even after the outer function has finished executing. In this article, we’ll explore what closures are, how they work, and why they’re so powerful.

What is a Closure in JavaScript?

A closure is created when a function is defined inside another function, and the inner function retains access to the outer function’s scope chain even after the outer function has completed execution.

In simple terms: Closures allow functions to “remember” the environment in which they were created, including variables from outer scopes.

Basic Closure Example

Let’s start with a simple example to understand the concept:

function outer() {
    function inner() {
        console.log("Inner function called!");
    }
    inner();
}

outer();
// Output: Inner function called!

In this example, inner() is defined inside outer() and has access to its scope. However, if we try to call inner() directly outside of outer(), it would throw an error since it’s not in the global scope.

Returning a Function (Closure in Action)

Closures become truly powerful when we return the inner function, allowing it to be called outside of its original context:

function outer() {
    function inner() {
        console.log("Inner function executed!");
    }
    return inner;
}

const cl = outer();
cl();
// Output: Inner function executed!

Here, inner is private to outer, but we can still access it using the closure cl. The function “remembers” its original environment.

Closures with Anonymous Functions

We can write the same example more concisely using anonymous functions or arrow functions:

const outer = () => {
    return () => console.log("Closure with arrow function!");
};

const cl = outer();
cl();
// Output: Closure with arrow function!

Closures Remember Outer Variables

One of the most powerful aspects of closures is their ability to remember and persist variables from their outer scope:

function addCounter() {
    let counter = 0;
    counter++;
    return counter;
}

console.log(addCounter()); // 1
console.log(addCounter()); // 1 (resets every time ❌)

function addCounter() {
    let counter = 0;
    return () => {
        counter++;
        return counter;
    };
}

const cl = addCounter();
console.log(cl()); // 1
console.log(cl()); // 2
console.log(cl()); // 3