Closures

shoaib zaki — Fri, 08 Apr 2022 07:30:47 +0000

A closure is a function that is bundled together with its lexical environment. in other words we can say that it is a function that has excess to its outer scope

Let us see a simple example to clear about lexical scoping first

function outer(){
var a='success'   local scope variable of the outer()
  function inner(){
   closure     alert(a)   it show the alert page with       
  success word which is from the outer variable    
}
inner()
}

outer()

Here outer() function creates the inner() function.Inner() has access to the outer scope variable. You can see from the above example inner() function has not their local variable but when the outer() function is invoked then the alert statement inside the
inner function has a variable destination this is called the lexical scoping.In lexical scoping inner function has the access to the outer function that we have seen now.

Now we see another example

function newFunc() {
  var name = 'success';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myfunc = newFunc();
myfunc();

This has the same output as the previous one. The difference is that

displayName() is returned by the new Func() before execution .This quite looks unintuitive because in most languages local variable is excess to its local scope but the local variable of the newFun() has excessed by the display name() the reason is that function in the javascript forms the closures as said earlier closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.In the case above myfunc is a reference to the instance of displayName() that is created when the new Func() is run.And displayName() is a reference to the instance of its lexical environment that's why when the new new Func() is invoked we have an alert with name success in our output

Now we are going to see the new interesting example

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(6);
var add10 = makeAdder(7);

console.log(add5(2));  // 8
console.log(add10(10)); // 17

makeAdder() is a function with parameter x which is returned function with parameter y and this will return the sum of both parameters x & y.The makeAdder() is function factory which creates the functions which have values for the parameter x,y.The function factory has two functions one adds 6 to its parameter and one is adding the 7 to its parameter. add5 and add10 both are closures with the same functional body with different lexical environments add5's lexical environment x is 5 and the add10's lexical environments x is 10 due to different values of x's they have the different lexical environments.When the makeAdder(6) is invoked add5 is referenced to the instance function(y) which will be run after the execution of the makeAdder(6).The makeAdder(6) has a thing in mind that it will return a function(y) and stores the value of x in its memory that's why value of x is used by the function(y) instead of context execution of makeAdder().And we have both values of x and y in our output

In short, closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

DEV Community: shoaib zaki

Closures