Blog

Closures in JavaScript

Closures mean the inner function has access to the variable of the outer function such that in its Lexical Scope. Closures are one of the important features of JavaScript.
We can create a function inside a function in JavaScript. This is also known as the Nested function.

Nested function Example:

//Function inside function

//Outer function
function myFunction() {
     //inner function
    function innerFunction(){
        console.log("Function inside function");
    }
    console.log("Outside Function");
    //Calling of inner function
    innerFunction();
 
}
//Calling of Outer function
myFunction();

You must know the Scope of Variables in JavaScript. Whenever the function is created, automatically Closures are also created.

Scope of Closures

• It can access its own variable.
• It can access the variables of the outer function.
• it can access the global variables.

Example of Closures

Lexical Scope

function outer() {
  var name = 'JAVASCRIPT'; // name is a local variable created by outer() function
  function inner() {
    // inner() is the inner function or a closure
    console.log(name); // use variable declared in the outer function
  }
  inner();
}
outer();

Here, In the above example, the concept of the Nested function is used. The variable name is defined in the outer function. The inner function is using this variable name. This Concept is known as Lexical Scope/Environment. When the function tries to use a variable that is not defined inside it. Then the function search for the variable inside its Lexical Scope.

Closures Example

function makeData() {
  const data = 'CodeShruta';// data is a local variable created by makeData() function
  function showData() {
    // showData() is the inner function or a closure
    console.log(data);// use variable declared in the outer function
  }
  return showData;//return the inner function
}

const fun = makeData();
fun();
//OUTPUT
//CodeShruta

Inner function is returned from the outer function before its execution.

fun is a reference to the instance of showData that is created when outer function makeData runs. When showData is called it searches for the variable in its lexical scope. When fun is invoked, the variable data remains available for use and that’s why it gets printed.

In the below example, we have defined a function Add(a), that takes a single argument a, and returns a function. The new function returns a single argument b, and returns the addition of a and b.

function Add(a) {
  return function (b) {
    return a + b;
  };
}

const fun = Add(10);
console.log(fun(2)); // 12

In the below example, we have defined a function Sub(a), that takes a single argument a, and returns a function. The new function returns a single argument b, and returns the Subtraction of a and b.

function Sub(a) {
  return function (b) {
    return a - b;
  };
}

const fun = Sub(10);
console.log(fun(2)); // 8

In the below example, we have defined a function Mul(a), that takes a single argument a, and returns a function. The new function returns a single argument b, and returns the multiplication of a and b.

function Mul(a) {
  return function (b) {
    return a * b;
  };
}

const fun = Mul(5);
console.log(fun(12)); // 60

In the below example, we have defined a function Div(a), that takes a single argument a, and returns a function. The new function returns a single argument b, and returns the Division of a and b.

function Div(a) {
  return function (b) {
    return a / b;
  };
}

const fun = Div(10);
console.log(fun(2)); // 5

Conclusion

Closures in JavaScript are a combination of function and lexical scope in which it is defined. Closures in itself is a confusing topic. But it is most important to know the working of closures. This concept is only available in JavaScript.

Article written By: : Ankita Kataria.

Check OOPS in JavaScript.

Thank you !!