D4mations.com

JavaScript closure example



Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2014/12/javascript-closure-example.html

In this video we will discuss a simple JavaScript closure example. Every time we click a button on a web page, we want to increment the click count by 1. There are several ways we can do this.

Using a global variable and incrementing it everytime we click the button : The problem with this approach is that, since clickCount is a global variable any script on the page can accidentally change the variable value.

[script type=”text/javascript”]
var clickCount = 0;
[/script]
[input type=”button” value=”Click Me” onclick=”alert(++clickCount);” /]

Using a local variable with in a function and incrementing it by calling the function : The problem with this approach is that, click count is not incremented beyond 1, no matter how many times you click the button.

[script type=”text/javascript”]
function incrementClickCount()
{
var clickCount = 0;
return ++clickCount;
}
[/script]
[input type=”button” value=”Click Me” onclick=”alert(incrementClickCount());” /]

Using a JavaScript closure : A closure is an inner function that has access to the outer function’s variables in addition to it’s own variables and global variables. In simple terms a closure is function inside a function. These functions, that is the inner and outer functions could be named functions or anonymous functions. In the example below we have an anonymous function inside another anonymous function. The variable incrementClickCount is assigned the return value of the self invoking anonymous function.

[script type=”text/javascript”]
var incrementClickCount = (function ()
{
var clickCount = 0;
return function ()
{
return ++clickCount;
}
})();
[/script]
[input type=”button” value=”Click Me” onclick=”alert(incrementClickCount);” /]

In the example above, in the alert function we are calling the variable incrementClickCount without parentheses. At this point, when you click the button, you get the inner anonymous function expression in the alert. The point I want to prove here is that, the outer self-invoking anonymous function run only once and sets clickCount variable to ZERO, and returns the inner function expression. Inner function has access to clickCount variable. Now every time we click the button, the inner function increments the clickCount variable. The important point to keep in mind is that no other script on the page has access to clickCount variable. The only way to change the clickCount variable is thru incrementClickCount function.

[script type=”text/javascript”]
var incrementClickCount = (function ()
{
var clickCount = 0;
return function ()
{
return ++clickCount;
}
})();
[/script]
[input type=”button” value=”Click Me” onclick=”alert(incrementClickCount());” /]

Original source

d4mer

, , , , , ,

34 responses to “JavaScript closure example”

  5. Excellent one. I love all your tutorials. if "Closures are nothing but FUNCTIONS WITH PRESERVED DATA" Do we need closures in typescript? we represent global variables as "this.globalVariable"

  15. Very good explanation that made me understand the concept. Thank you. Just want to make a point that example started showing that global variable is evil and to avoid that we are using closure, but in the end we created a global variable so the problem was still not solved. Again I understand the concept from your explanation but IMO this example is still not complete. Thanks again for such a nice explanation.

  16. @kudvenkat Great great explanation. Please do more videos about closures and Javascript in general.. Also if you have any recommendation for a web designer who's struggling to be front-end developer.. Please go a head and enlighten me

  17. "the outer self-invoking anonymous function run only once", why? This is because of "self-invoking", not "outer".  Try the following code, and see.var myfun = (function () {
        alert('aaaa');
    }  )();alert('bbb');
    myfun;

  22. Your javaScript tutorials are unarguably the best. In this video, you mentioned that the outer function is executed only once (thus clickCount is initialized only once), but you didn't explain WHY it is executed only once. Please could you elaborate? Thanks in advance:).

  23. i am not understanding why the outer function incrementClickCount() is only getting executed once. Why isn't it executed every time the button is clicked, re-initializing clickCount to zero? It's as if subsequent clicks of the button only execute the inner function, but I'm not sure why that would be the case. Does anyone have any insights to share?

  31. Thank you sir, You are the best teacher I have seen. I like how you explain these tutorials by giving practical examples.
    I enjoy watching your videos.
    Kudos to you sir.
    Have a happy new year 2015 🙂

  33. thanx sir ,but we need how to design responsive screen using jquery,till now java script  video is sufficent for us
    so please upload video using jquery and how design responsive good looking screen ..plz plz plz  we are eagerly waiting for your video ,check multiple times in a day belived me sir

Leave a Reply