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
counter
is defined outside the
count
function. For that reason, we call
counter
is 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.
count
function 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
counter
as a global variable, we will define it as a local variable which only accessible via
count
function. 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,
counter
is defined inside
count
method, so it’s can’t modify by outside. In line 7, we’re trying to access
counter
variable but no success because
counter
is local variable and it can be accessible only via
count
function. But we still got the problem that
counter
is reset to 0 every time
count
function is invoked and how can we share the value foe
counter
across multiple invocations. How can we solve these problems? This time we can gain the benefit from closure.
What is closure
In some words,
closure
is 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
closure
is 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.