Closures in JavaScript

Mahak Gupta
Nov 27, 2013
6.4k
0
0
Article

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