Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Introduction to JavaScript Closure and Elements for Closure Pattern

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 123
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: