JavaScript Closures

What is the closure?

What do you think when you hear the word Closure. Closure means the end or the closing down of something.

Like closing down the restaurant, or ending the relationship with your friend. or saying Goodbye to your loved ones. (close means to shut. Ex:- Close the door.)

Closures are functions that are nested in other functions.

The closure is the JavaScript feature in which the inner function has access to the outer function variable.

Closure helps in binding a function to its outer boundary and is created automatically whenever a function is created.

Before you learn about closures, you need to understand two concepts:

• Nested Function

• Returning a function

Javascript Nested Function

A nested function is a function that is completely contained within a parent function.

            -----------Nested Function Example--------------
// this is the outer function
function car(name){ 
  // inner function
    function brand(){ 
        console.log('How much the ' + name + ' cost?')
    }
    //calling innerfunction
    brand();
}
//calling outer function
car('lambo') // How much the lambo cost?

In the nested function example the car() is the Outer function and the brand() is the inner function that is nested inside the function car().

Nested functions are one of the most commonly used, and JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function.

Returning a function

Here, returning the function the Parent function returns the nested function/child function , we can return the function within the another function.

            -----------Returning Function Example--------------
function car(name) {
    function brand() {
        console.log('This is a' + ' ' + name);
    }
    // returning a function
    return brand;
}
const nameofcar = car('Lambo');
// calling the function
nameofcar(); // This is a Lambo

Here the car() function is returing brand() function. And then return function is stored/assigned to the variable cosnt that is nameofcar and to call that assigned function.

To call the function which is stored in const variable calling it using nameofcar() parentheses.

JavaScript Closures

Best thing about closures is that, In JavaScript, closure provides access to the outer scope of a function from inside the inner function, even after the outer function has closed.

We used the variable let name = 'lambo'; outside of inner function

Let's understand with an Example.

            -----------JS CLOSURE Example--------------
// outer function
function car() {
    // variable defined outside of  the inner function, not the {} in inner function.
    let name = 'Lambo';
// inner function
    function brand() {
// accessing name variable
     return 'This is a' + ' ' + name;
     }
    return brand;
}

const nameofcar = car();
// returns the value
console.log(nameofcar()); // This is a Lambo

When the car() function is called it return's the brand() function value.

The nameofcar variable stores the value of the car() function and return it using the function call nameofcar() parentheses.

Let's see another example to understand better.

function outer() {
let b = 1;
    function inner() {
        return b;
    }
    return inner;
  }
let innerfunction = outer();  
console.log(innerfunction()); // 1

In the above example when we call the outer() function calls it's returns the what is inside the outer(). the function inner() is callled and it's value is b. which is assinged using the variable (let b = 1;)

The (return inner;) is now called by the outer() function and that outer function is stored by the variable let innerfunction = outer();

And console by calling the function innerfunction() with () parentheses.

Done ✔️. I hope this article about Javascript closures is clear and undestood, and Let me know in comments if you have any douts.Thankyou🌼🌷.