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.

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.