Today, we gonna learn about the one of the most interesting part of javascript, that is closure. In this post, I will show you what is the purpose of closure as well as how to use them. Be ready?
Before wee start diving in closure, we need to know how the variable is defined in javascript first
Global variables & local variables
In javascript, global variables are variables which can be accessed by other functions. Those functions can read, modify that variable.
Example of global variable
var counter = 0;
function count() {
counter++;
return counter;
}
console.log(count()); //1
console.log(count()); //2
console.log(count()); //3
In the above example, since the count function still be able to read and modify counter even counteris defined outside the count function. For that reason, we call counteris the a variable. And this is an interesting feature of javascript, help us to access whatever we want.
But global variable causes the problem. The more freedom we have, the more chaos we got. countfunction needs to access counter the keep the increment. but what happens if we change counter without invoking count function:
var counter = 0;
function count() {
counter++;
return counter;
}
console.log(count()); //1
var counter = 10;
console.log(count()); //11 -- Wrong
console.log(count()); //12 -- Wrong
So now we know the global variable is devil, we need to avoid using it as much as possible. One solution for this is instead of defined counteras a global variable, we will define it as a local variable which only accessible via countfunction. Something like this:
function count() {
var counter=0;
counter++;
return counter;
}
console.log(count()); //1
console.log(typeof counter);//Undefined
console.log(count()); //1 -- Wrong
console.log(count()); //1 -- Wrong
With this way, counteris defined inside countmethod, so it’s can’t modify by outside. In line 7, we’re trying to access countervariable but no success because counteris local variable and it can be accessible only via countfunction. But we still got the problem that counteris reset to 0 every time countfunction is invoked and how can we share the value foe counteracross multiple invocations. How can we solve these problems? This time we can gain the benefit from closure.
What is closure
In some words, closureis a kind of child function is nested in parent function, that parent function holds a variable which accessible by child function but can’t be accessed outside. The special point here is parent function is self-invoke function and it returns its child function. Something like this
Example of closure:
var count=(function(){
var counter=0;
return function(){
counter++;
return counter;
}
})();
console.log(count()); //1
var counter = 10;
console.log(count()); //2 -- Still correct
console.log(count()); //3 -- Still correct
The idea behind closureis nested function, child function can access the variable which is defined in the parent function. Parent function is self-invoke function and it returns child function immediately. But the point is after parent function return child function, the child function still is able to access parent function even parent function is terminated. And this is the heart of closure.
With closure, we give a javascript function ability to define a private variable, which is kept inside the function and can’t be accessible by outside.
Finally words
Hope that with this post, you gain more knowledge about closure as well as how the variable is defined in javascript. With this knowledge, you have an easy way to “convert” a global variable to a local variable.