Closures
Published: 2022-04-08 07:30:47

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.