[Javascript] Closure concept everywhere

What’s a Closure?

A closure is a function defined inside another function (called parent function) and has access to the variable which is declared and defined in parent function scope.

A JavaScript Closure is when an inner function has access to members of the outer function (lexical scope) even when executing outside the scope of the outer function.

Therefore, we cannot afford to talk about closure while leaving out functions and scope.

— Digital Ocean

The key of Closure are Scopes

The closure has access to variable in three scopes:

• Variable declared in his own scope
• Variable declared in parent function scope
• Variable declared in global namespace

var globalVar = "abc";

// Parent self invoking function
(function outerFunction(outerArg) {
  // begin of scope outerFunction
  // Variable declared in outerFunction function scope
  var outerFuncVar = "x";
  // Closure self-invoking function
  (function innerFunction(innerArg) {
    // begin of scope innerFunction
    // variable declared in innerFunction function scope
    var innerFuncVar = "y";
    console.log(
      "outerArg = " +
        outerArg +
        "\n" +
        "outerFuncVar = " +
        outerFuncVar +
        "\n" +
        "innerArg = " +
        innerArg +
        "\n" +
        "innerFuncVar = " +
        innerFuncVar +
        "\n" +
        "globalVar = " +
        globalVar
    );
    // end of scope innerFunction
  })(5); // Pass 5 as parameter
  // end of scope outerFunction
})(7); // Pass 7 as parameter

innerFunction is closure which is defined inside outerFunction and has access to all variable which is declared and defined in outerFunction scope. In addition to this function defined inside function as closure has access to variable which is declared in global namespace.

Output of above code would be:

outerArg = 7
outerFuncVar = x
innerArg = 5
innerFuncVar = y
globalVar = abc

So, Why would you use one?

We can find many profits that a Closure can give, but all of them are included in 2 reasons:

• Data privacy / emulating private methods with closures. Commonly used in the module pattern.
• Partial applications or currying.

How to create a Closure?

In JavaScript, if you declare a function within another function, then the local variables can remain accessible after returning from the function you called.

Example: We create a function makeAdder with method add is returned:

function makeAdder(x) {
  // parameter `x` is an inner variable

  // inner function `add()` uses `x`, so
  // it has a "closure" over `x`
  function add(y) {
    return y + x;
  }

  return add;
}

Reference to inner add function returned is able to remember what x value was passed to makeAdder function call.

var plusOne = makeAdder(1); // x is 1, plusOne has a reference to add(y)
var plusTen = makeAdder(10); // x is 10

plusOne(3); // 1 (x) + 3 (y) = 4
plusTen(13); // 10 (x) + 13 (y) = 23

The following adder are explained.

Conclusion

So, I think we can understand what is a Closure. Next time, we will find the Closure concept in some popular components or libraries that we are using every day. See ya!