By: Ella Maria
The above problem is solved by closures as follows,
In this case, add() is defined inside numbers() and has access to all variables. The output will be : The result is 7.
There are 4 points with respect to closure,
- Closures have access to outer function variables even after the outer function returns.
- Closures actually stores the reference of outer function variables and not the actual value.
- Closures i.e inner function cannot be called in global scope because according to lexical scope it is only accessible within outer function.
- One can bring closures to global scope by returning function definition of closures from outer function.
By : Nomika Romina
In most programming languages, when a function is called, its execution context(that is the environment containing all the variables used by that function) is stacked on top of the context of the function that calls it. Something like this:
Any local variables you declare within any of the contexts above, is isolated from all other contexts. Only a global variable is accessible within all contexts.
Sorry, for the totally unrelated graphic ;), but I hope you get the idea. Each box represents a context. The largest box represents the Global context. The smaller box represents the context of a function called from within the Global context. The smallest box represents the context of a function called from within the context of the smaller box.
Now imagine these boxes being fully closed. You see that the smaller boxes have access to the contexts within which they were called from(larger boxes). But the calling functions(larger boxes) don’t have access to the contexts of the functions(smaller boxes) they call. This behaviour is called closure.
This is the reason the behaviour is called ‘Closure.’. The calling contexts (larger boxes)close over the called contexts (smaller boxes).
Now lets see an example:
var e = 5; // Global Variable due to Global Execution Context (Closure)
var a = 1; //Local Variable
b = 3; // Global Variable by definition
c = 2; // Global Variable by definition
var d = 4; // Local Variable
console.log(a); //Outputs Local Variable ‘a’ due to Closure – ‘1’
console.log(b); // Outputs Global Variable ‘b’ – ‘3’
console.log(c); // Outputs Global Variable ‘c’ – ‘2’
console.log(d); // Outputs Local Variable ‘d’ due to Closure – ‘4’
console.log(e); // Outputs Global Variable ‘e’ – ‘5’ (Closure)
Now answer the following question:
Which of the above variables are local variables ?
If you included the variable ‘e’ in your answer, you’re wrong. It is a global variable.
‘e’ is not a global variable by definition. It is a global variable by Execution Context. Its execution context is the Window object, which closes over the execution contexts of any function called from within it. Hence it is accessible to any function called from within the Window object. This is an example of Closure.
Similarly the variables a and d while being local variables are also accessible within the function printInner. This is also due to Closure.
Reason for this Peculiar Behaviour?
The reason for this difference in behaviour of the JS execution context, could be that it was primarily designed for DOM manipulation. A DOM has a tree – like structure with nodes as its branches.
Any change in the state of a node might affect the change in the state of its parents. Perhaps the designers of JS wanted to capture this behaviour in the language and that is why they made child objects(remember functions are first-class objects in JS) have access to the state(execution context) of its parent objects.