Mastering JavaScript

Chapter 2
Were you expecting something shiny? No, this is really the most ordinary case of a
closure. We are declaring a variable in the global scope and declaring a function in
the global scope. In the function, we are able to access the variable declared in the
global scope—outer. So essentially, the outer scope for the outerFn() function is a
closure and always available to outerFn(). This is a good start but perhaps then you
are not sure why this is such a great thing.
Let's make things a bit more complex:
var outer = 'Outer'; //Variable declared in global scope
var copy;
function outerFn(){ //Function declared in global scope
var inner = 'Inner'; //Variable has function scope only, can not be
//accessed from outside
function innerFn(){ //Inner function within Outer function,
//both global context and outer
//context are available hence can access
//'outer' and 'inner'
console.log(outer);
console.log(inner);
}
copy=innerFn;
//Store reference to inner function,
//because 'copy' itself is declared
//in global context, it will be available
//outside also
}
outerFn();
copy(); //Cant invoke innerFn() directly but can invoke via a
//variable declared in global scope
Let's analyze the preceding example. In innerFn(), the outer variable is available
as it's part of the global context. We're executing the inner function after the outer
function has been executed via copying a reference to the function to a global
reference variable, copy. When innerFn() executes, the scope in outerFn() is gone
and not visible at the point at which we're invoking the function through the copy
variable. So shouldn't the following line fail?
console.log(inner);
[ 67 ]
www.it-ebooks.info