JavaScript Closure Explained

The closure in javascript is one of the essential concepts in javascript. Still, it is a confusing topic in javascript. Here we will be talking about javascript Closure. Let’s get started.

what is javascript closure JavaScript Closure Explained

Before you understand closure, you need to have knowledge about two concepts.

  • Nested Function
  • Returning a function

Nested Function

In a javascript program, we can write a function into another function. It means a nested function is a function that is completely defined within a parent function.

// Outer function 
function web (name){
   // inner function 
    function displayName(){
        console.log("this is" + "  " + name);
      }
displayName(); // calling inner funcion 
}
web("indgeek"); // output: this is indgeek. 

Here web() is the outer function and displayName() is the inner function. We defined the inner function inside the outer function and called the inner function inside the outer function. And at last, we called the outer function with argument.

Also Read: JavaScript Hoisting Explained

Returning a Function

In javascript, you can return a function within a function, this is called returning a function. For example


function web (name){
  
    function displayName(){
        console.log("this is" + "  " + name);
      }

displayName(); 
}
const webName = web("indgeek"); 

console.log(webName); // returning the function definition 

webName(); // calling the function 

Here the output will be:

// Output
function displayName(){
        console.log("this is" + "  " + name);
      }
this is indgeek

When we console log the webName it will print the whole function and then it will return the function.

Also Read: Introduction to JavaScript Promises

Javascript Closure

In Javascript, the inner function can always access the variable of its outer function, even after the outer function has returned. This is called javascript Closure.

Example 1:


function outerFunction(){

   let web = "indgeek"   // variable defined outside the innerFunction
  
    function innerFunction(){
      
        return "This is" + " " +web; // accessing the outerFunction's name variable
    }

return innerFunction; 
}
const innerFunc = outerFunction(); 

console.log(innerFunc);   // returning the function definition 

console.log(innerFunc ());   // return the value  
Output:
  function innerFunction(){
      
        return "This " + " " +web;    // accessing the outerFunction's name variable
    }
This is indgeek

Explanation:

  • In the first example when outerFunction is called, it returns the function definition of innerFunction.
  • Here innerFunc is a reference of the innerFunction(). So, when innerFunc() is called, it has the access to the variable of the outerFunction().
  • Therefore when we run console.log(innerFunc), it returns the function definition of innerFunction.
  • And when we run console.log(innerFunc()), it returns the value of innerFunction() because of the reference.

Example 2:

function Add(x){  // outerfunction 
    function Sum(y){ // innerfunction
        return x + y;
    }
    return Sum; // returning innerfunction
}

const sum1 = Add(3) // closures
const sum2 = Add(4) // closures

console.log(sum1)  // returns the add function defination 
console.log(sum1()) // NaN


console.log(sum1(10)) // 13
console.log(sum2(5)) // 9

Output:
[Function: Sum]
NaN
7
9

Explanation:

  • The Add() function contains a single argument x and returns the function definition of the Sum() function.
  • The Sum() function contains a single argument y returns x + y, as it can access the variable of the outer function.
  • Here both sum1 and sum2 are the closures.
  • The Add() function is called passing a parameter x.
  • When we called sum1() with no argument it returns noting because of y argument of the inner function. But when we called sum1(10) and sum2(5) it returns a value because the Sum() function has access to the passed x argument of the outer Add() function.

Sharing Is Caring:
Saheb Dhara

An aspiring Web Dev, Geeky tech hunter. Electronics and Communication engineer.

Leave a Comment