In JavaScript, closures are a powerful and often misunderstood concept. They play a crucial role in maintaining data privacy, enabling functional programming patterns, and facilitating the creation of robust and modular code. In this article, we'll explore closures in-depth through a practical example.

Introduction to Closures:

A closure is formed when a function retains access to its lexical scope even after the outer function has finished executing. This means that the inner function has access to variables and parameters of the outer function, even after the outer function has returned. Closures are a fundamental feature of JavaScript and are commonly used in various programming paradigms.

Regarding this definition, don't panic. I can simplify it:) 😀

Example: Exploring Closure with Lexical Scoping

Let's delve into a simple example to understand closures better:

function display() {
    let name = "Manikandan";

    function printName() {
        console.log(`Hi, This is ${name}.`)
    }

    return printName;
}

let res = display();  // [Function: printName]
res();  //  Hi, This is Manikandan.

Understanding the Example:

1. Function Declaration (display):

   • Inside the display function, a variable name is declared and assigned the value "Manikandan".
   • Another nested function printName is declared within display. This function accesses the variable name from its lexical scope.

2. Returning a Function:

   • The display function returns the printName function.

3. Function Execution:

   • display() is called and its result is stored in res.
   • res now holds a reference to the printName function.

4. Closure in Action:

   • When res() is invoked, it executes the printName function.
   • Despite display already finished executing, the printName function still retains access to the name variable due to closure.
   • Thus, it successfully logs Hi, This is Manikandan. to the console.

Explanation of Lexical Scoping:

• Lexical scoping means that a function's scope is determined by its surrounding lexical context at the time of its definition.
• In our example, printName is defined within the lexical scope of display. Therefore, it has access to the variables defined within display, including name.
• Even though display finishes executing before printName is called, printName maintains a reference to the name variable through closure, allowing it to access and use the variable's value.

Nested Function

Absolutely! In JavaScript, closures extend to nested functions as well, allowing them to access variables from their containing scopes even if those scopes have finished executing.

function display() {
    let name = "Manikandan";

    function printNaame() {
        let age = 25;

        function printAge() {
            console.log(`Hi this is ${name}, And My age is ${age}`)
        }

        return printAge;
    }

    return printNaame;
}

let res = display();  // [Function: printNaame]
let result = res();  // [Function: printAge]
result();

Conclusion:

Now Closure is,

Inner function/nested function, whether it returns or not, will always have access to the outer scope variable. This is the concept of closures.