Omni-Closures
In his book Secrets of the JavaScript Ninja, John Resig gave an informal description of closure as "A closure is a way to access and manipulate external variables from within a function."
Here is a rudimentary manifestation of closure that echoes the above description:
var y = 6; // y is a global variable
function getSum(x){
var z = 0; // z is a local variable of
return x + y + z; // getSum, whereas y is
} // an external variable to getSum
getSum(4); //returns 10
The variable y is not a local variable of getSum and yet it's been operated on within getSum. Closures are at work even for the most trivial code we'd write and take granted for.
A more explicit show of closure is when the local variables of an outer function remains to be referenced by the inner function even after the outer function's execution is complete:
function setOperators(y){ // outer function
var z = 5;
function getSum(x){ //inner function
return x + y + z;
}
return getSum;
}
var getSumRef = setOperators(4);//outer function's execution is complete and returns the function getSum
//
getSumRef(1); //returns 10
Function Scope?
Simply put, the scope for an entity Z refers to what other entities Z has access to. In JavaScript, a variable is said to have function scope. Instead of a rigorous but lengthy definition for it, let's consider this structure instead:
var i = 1;
function x(a){
var j = 1;
function y(){
var k = 1;
}
}
In the perspective of function x, var j and function y are accessible because they are declared within x, that is, they are local to x. Function x cannot access var k since k is within function y, hence local to y, but not to x. So far, functions x and y's behaviour adheres to that determined by their respective scopes.
However, by the merits of closure, functions can access variables outside of its local scope. Specifically, function y can access var j, and function x can access var i.
A closure is formed for function y which preserves the environment which y was created in, allowing y continue to have access to that environment. The variable j and argument a (argument for function x) are two of the constituents in this environment.
A Naive Visualization of Scope and Environment
Albeit neglecting some important details, sometimes a casual visualization can provide a mental picture that would eventually lead to a fuller understanding. So here is the attempt:
For function x:
- local scope is the yellow area
- environment is the blue area
- x can access variables in yellow(local) and blue(environment), but not in green
For function y:
- local scope is the green area
- environment is the yellow area, plus the blue area
- y can access variables in green(local), yellow(environment), and blue(environment)
Now we're better equipped to appreciate Wikipedia's definition of closure:
"A closure is a function together with a referencing environment for the non-local variables of that function."
Inner Workings of Closure
For ECMAScript, the proper name for this referencing environment 'e' is called an Activation Object when e is the local scope of a function, and a Global Object when e is the global scope. The activation object keeps local variables, named arguments, the arguments collection and this as key-value pairs.
Every time a function is being executed, an internal object called Execution Context is created for that specific execution. Execution context keeps a list of all activation objects and global object for the respective function being executed.
For instance, for our previous sample snippet:
function setOperators(y){
var z = 5;
function getSum(x){
return x + y + z;
}
return getSum;
}
var getSumRef = setOperators(4);
getSumRef(1); //returns 10
The corresponding execution context would be:
When a closure is not needed for a function to reference its non-local variables, the function's execution context is discarded along with its activation objects. However, since the inner function getSum references non-local variable z, and argument y, a closure is created.
The closure makes a reference to the activation object for the "var getSumRef = setOperators(4)" execution context. Hence, even when setOperators' execution is completed, getSumRef remains to have access to the variables and the function getSum for evaluating the addition for us.
Digging Deeper(and Broader) for the Whole Picture
Here we've really only seen an expansion on the term "environment" in the context of a typical closure definition. To get a complete view of how scopes are managed and what function execution entails, refer to the following excellent resources:
High Performance JavaScript
http://jibbering.com/faq/notes/closures/
http://perfectionkills.com/understanding-delete/
