closures in java script: A clear understand
Tags: webdev, javascript, beginners, programming
Published: 2024-03-21 06:54:22

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:

```javascript
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.