JavaScript Closure and Uses of Closure
What is JavaScript Closure?
In simple words Closure means- to bind local variables in a function.
A Closure is a logical statement or function that can have free variables composite with an enthronement that binds those variables. A Closure is an unique type of object that bind two things: a function and any local variables that were in scope at the duration when the closure was created.
The simple definition of a Closure-
A Closure is a set of functions which is easily called outside of its parent function, so that it easily execute in any other function.
Example
function getBrowserName() {
var browserName = "Opera"; // browserName is a local variable created by getBrowserName
function displayBrowserName() { // displayBrowserName() is the inner function, a closure
alert (browserName); // displayBrowserName() uses variable declared in the parent function
}
displayBrowserName();
}
getBrowserName();
Description of Above Example -
=> getBrowserName() form a local variable name and then create a function called displayBrowserName().
=> displayBrowserName() is an inner function which is call in the getBrowserName() function and is only available within the body of that function.
=> displayBrowserName() doesn't have its own local variables, but it have access to the variables of outer functions, so it can use parent function declared variables.
Basic Elements for Closure
The 2 elements which make closure pattern more effective. These are:
1. The Function Branches element:
=> This element include 1 or more local variables which are mention by a local inner function
=> This element only focus the activity of returning functions not the results of the function.
2. The Calling Function Element:
=> This element focus on the called branch with its result and save the result to a Variable.
Example for Elements :
function showNameFunction() {
var getName = "David";
// showNameData() is the inner function, a closure
return function showNameData() {
return getName
}
}
var diaplayNameValue = function() {
var getName = showNameFunction();
alert( "Hello " + showNameData() + "!" );
return showNameData
}();
//holds the showNameData() function
alert (diaplayNameValue);
//call it again later...
setTimeout( 'alert( "Your name is " + diaplayNameValue() )', 10 );
In the above example, the showNameFunction() creates a closure that cover both the showNameData() function and the David string that is local to the outer function's scope.
When the code is performed, the result will be an alert box that show a text Hello David!.
After that a second alert box display a 'diaplayNameValue' variable and hold the showNameData() function, excluding the variable name.
In last, the another alert box will appeare with a setTimeout() function and assure the name is still in memory after a long call of the showNameFunction().
0 Comment(s)