JavaScript closure example

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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());" /]

[naveenkumarm.v]

One of the best explanation on closure.

[dzlee]

this man is the best teacher ever! closure is a hard concept to understand yet he explained it so clearly in less than 10 minutes!

[lakshaydulani]

the only practical example which actually taught me the funda

[sivakumartn]

Your way of explanation for JS closure is very nice. I was struggle with this topic but now i understand because of watching this video. Thank u...Keep it up...

[Knowideer]

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

[nishantnrg]

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

[sohammondal]

A very good practical explanation of closures.

[ssuryar]

Best and Simple explantion in 7 mins on closure.

[shahnawazatharkazmi]

happy new year to best trainner in  my life i have seen, plz sir keep  your work continue, best wishes for upcoming year +whole life

[Occelt]

I can even say that you're explaining better than some paid lessons ;)

[_taxman_]

You are an awesome teacher.  Thank you!

[carlingrant]

Great explanation! You cleared up every confusion I had about closure. Thank you very much!

[kartikajas]

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"

[sanketr]

Simply explain ...and stored in me for lifetime, thanks

[Chetan.Kothari]

Great Videos...Kindly introduce white background!!!

[sahithmylavarapu]

The explanation is so perfect.thank you .watch it .you will get it.
Thank you !

[vivek-patel]

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.

[thomasbutman]

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?

[maresolaris]

Thank you very much for this very clear explanation! It helped me (and my students) a lot!

[nikhilumraskar]

Hello Sir,
Big fan

Q1) Is increamentClickCount a singleton object here ?

Also the variable clickCount is now protected, and will not conflict with the variable having this name in global scope.
Q2) What if there is already a variable called increamentClickCount in global scope. How can both exist without conflicting