Web Programming TutorialsLearn Closures in JavaScript?

Learn Closures in JavaScript?

In our last JavaScript session we learnt to implement pop-up windows in JavaScript. Today we are going to look upon Closures in JavaScript. Closures in JavaScript are little difficult to understand. But when you get the point and practice it on then you found that there is nothing to worry about.

A function doesn’t have to return in order to be called a closure.

If you found the function keyword within another function, then the inner function has access to variables in the outer function this is called a closure.

Let me explain in the coding way!

A function in JavaScript is called a script within a script as it works like a script when it is called in the main script.

We can call a variable inside the function which is declared outside of the function as shown below.

<button type="button" onclick="get_count()">Click to update count</button>
<p id="new_val">0</p>
<script>
var value = 0;
function count() {
	return value += 1;
}
function get_count(){
document.getElementById("new_val").innerHTML = add();
}
</script>

In the above example I’ve created two functions and a variable before the first function who has the 0 value. First one is counting the clicks to the HTML button elements. Second one is just showing the result to the HTML div element which id is new val.

Problem:
But here we get a problem. We declared the value variable outside of the count function but we don’t need this variable outside. We need to use it inside, so why we don’t declare this value variable inside of the function?

But if we create a variable inside the function and call it inside, it’ll work just for the first time. When we click on the HTML button element, the count function will update the value but if we click second time it’ll do nothing. But actually it does. It updates the value again back to 0 instead of 2 and update the new updated 0 value to 1 again and do it again and again when you click second or third time.

Why:
When we declare the variable inside the count function, the problem begins. When a user clicks on the HTML button element, the count function runs. But because the value variable declared inside the count function so it gets back it main value and become 0 every time when user clicks and adds +1 to the 0 again and again! You need to check this coding part below.

<script>
function count() {
var value = 0;
	return value += 1;
}
function get_count(){
document.getElementById("demo").innerHTML = add();
}
</script>

Note:

If you create the value variable inside the count function with the var keyword, the value variable will become local variable and bounds just for the specified function. If we create it outside of the function, it’ll become Global and usable anywhere in the script. If you declare a variable without var keyword, it’ll become global however you create it inside the function.

Now comeback to the problem. We have to use an inner function to solve this problem. Means, a function within the count function which is shown below.

<script>
function count() {
    			var value = 0;
    			function inner_count() {
        				value += 1;
    			}
Inner_count();
return value; 
}
function get_count(){
document.getElementById("new_val").innerHTML = count();
}
</script>

But this script works only once and update the 0 to 1. Because again, we’re calling the count function and the value variable is inside the count function. Means we have to some more variations. Actually we need to add closure.

<script>
var count = (function () {
    		var value = 0;
    		inner_count function () {
return value += 1;
}
})();
function get_count(){
document.getElementById("new_val").innerHTML = count();
}
</script>

Now, here in the above script, we used self-invoking functions (you must know about these type of functions for working with closure). And instead of giving name to the count function we just declared a variable named count and assigned the whole function to that variable. Now the great thing is that. The Inner function can have access in the parent function and gets the value of value variable and updates it.

Thus we have completed this tutorial on JavaScript closures. Feel free to let us know your view in comment box below regarding this tutorial.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -