Wednesday, November 27, 2013

Closures in JavaScript


In this Article, we will discuss that how we can use the Closures in JavaScript. Basically a closure is a local variable that will be execute after the particular function has returned. A Closure provides us a free environment the outer function can easily access inner functions and inner variables without any scope restrictions. So first we will be discussing the types of Scope:

Local Scope: In the Local Scope, we can’t access the variable, which can be defined in a function. Means that we assign a variable, which is defined and accessible for a certain part of the code. Like this:


Ex :

<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 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 treats like a Global variable when we call the particular function at least on time like this:

Ex:

<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:



Global Scope: Global means we can use a variable or a function anywhere without any Restrictions. We can also declare it without var keyword.
Ex:

<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:



Closures: A closure is a local variable that will be execute after the particular function has returned. A Clouse provides us a free environment the outer function can easily access inner functions and inner variables without any scope restrictions.
Ex:
<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 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:


 If we use :

Myclosure1=ExClosure(10,{cv:'My Second Closure'});
Myclosure1(20);

Output:




Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)