Closures In JavaScript
This article explains how to use closures in JavaScript. Basically a closure is a local variable that will be executed after the specific function has returned. A Clouse provides us a free environment that the outer function can easily access inner functions and inner variables without any scope restrictions. So we will first explain the types of scope.
Local Scope
In Local Scope, we can't access a variable defined in a function. In other words, if we assign a variable then that is defined and accessible for a certain part of the code as in the following.
Example
<html>
<head>
<script
language="javascript"
type="text/javascript">
function Local() {
var s = "my name is
Mahak";
alert(s);
}
alert(s);
//Throws an error
</script>
</head>
<body
onload="Local()">
</body>
</html>In this example, we define a variable s and it can be accessible in the function Local(). So if we can use it outside the function then it returns an error or it is not accessible.
Note: We can call the Local Variable as a Global Variable , when we declare it without var keyword. The Local Variable is treated like a Global Variable when we call the specific function at least one time as in the following.
Example
<html>
<head>
<script type="text/javascript"
language="JavaScript">
function scope() {
var lv1 = 'My First
Local Variable';
lv2 =
'My Second Local Variable';
//delared without var keyword
document.writeln('Local
Variables:<br /><br />');
document.writeln(lv1 + '<br />');
document.writeln(lv2 + '<br />' +
'<br />');
}
scope();
alert(lv2);
</script>
</head>
<body
onload="scope()">
</body>
</html>
The output will be:
![JavaScript]()
Global Scope
Global means we can use a variable or a function anywhere without any restrictions. We can also declare it without a var keyword.
Example
<html>
<head>
<script type="text/javascript"
language="JavaScript">
var gv1 = 'My First
Global Variable';
gv2 =
'My Second Global Variable';
//delared without var keyword
function scope() {
var lv1 = 'My First
Local Variable';
lv2 =
'My Second Local Variable';
//delared without var keyword
document.writeln('Global
Variables:<br /><br />');
document.writeln(gv1 + '<br />');
document.writeln(gv2 + '<br />' +
'<br />');
document.writeln('Local
Variables:<br /><br />');
document.writeln(lv1 + '<br />');
document.writeln(lv2 + '<br />' +
'<br />');
}
</script>
</head>
<body
onload="scope()">
</body>
</html>
The output will be:
![Output-JavaScript]()
Closures
A closure is a local variable that will be executed after the specific function has returned. A Closure provides us a free environment for the outer function to easily access inner functions and inner variables without any scope restrictions.
Example
<html>
<head>
<script type="text/javascript"
language="JavaScript">
function ExClosure(a, ref1) {
var v1 = a;
var ref = ref1;
return function
(v2) {
v1 += v2;
alert("Add:"
+ v1)
alert("Reference
Value:" + ref.cv);
}
}
myclosure =
ExClosure(10, { cv: 'My First Closure' });
myclosure(5);
</script>
</head>
<body
onload="ExClosure(b,ref)">
</body>
</html>
In this example, when the ExClosure function is called, it returns a function. The function remembers the value of a (10) in the form of v1, it means the myclosure will add 10 together with 5 and return 15 as an alert, and the next alert returns the Reference value (Reference Value: My First Closure).
The output will be:
![Output1-JavaScript]()
![Output2-JavaScript]()
If we use:
Myclosure1=ExClosure(10,{cv:'My Second Closure'});
Myclosure1(20);
Output
![Output3-JavaScript]()
![Output4-JavaScript]()