Closures in JavaScript

So in this post I will try to explain javascript closures.
I will try to explain the concept of closures in a very practical oriented way.
so simply put javascript closures allow you to define some kind of privacy, sort of like private fields in java, c++ etc.
So anyway we know that javascript has no direct notion of private variables. so variables are either public scope or local.
More specifially , what I mean is that there is no simple way to do the following in javascript

//a java example
class Counter
{
private int counter=0;
public int add(){
counter++;
return counter;
}
}
//okay so in java we could use this class as
public class myclass
{
public static void main(string args[])
{
Counter ct=new Counter();
ct.add();
ct.add();
int res=ct.add();
system.out.println(res); //so result is 3
ct.counter=23423; //wrong . you cannot access a private variable directly
}
}

so if we were to do this example in javascript we could do this as (using the google chrome console)

var counter=0;
function add(){
counter++;
return counter;
}
//so we use as
add();
add();
var res=add();
alert(res);
counter=45235; //THIS IS ALLOWED

you see the problem?. we can have access directly to the counter variable in javascript whereas in java we cannot
so how do we make the counter variable private .
okay so we will use concept of local scope in javascript.
what I mean is

function Counter()
{
var counter=0;
}

so now we cannot do this

counter++; //WRONG. counter is not defined in global scope

oh cool. But but how do you access the counter variable at all ?
remeber we still need to increment the counter variable from outside.
okay for that we will create a function inside the function Counter

function Counter()
{
counter=0;
function add()
{
counter++;
return counter;
}
}

yes this is allowed in javascript, in case you were wondering
oh good. so we have a private variable, a function to modify that.
so now can we do this?

add();

No we can’t , as add() is local to the Counter() function.
so what we do is , we need a reference to the add function. Then we can call it
What I mean by the above line was this

function message()
{
alert("hello world");
}
var a=message; //get a reference or pointer to the above function, whatever you like to call it
a(); //so alert is displayed

Again in case you were wondering, yes this is possible in javascript. functions are treated as normal variables.
so in the example of Counter() function , we need to get out a reference to the add funcion to the outside world.
so we have, finally

function Counter()
{
var counter=0;
function add()
{
counter++;
return counter;
}
var a = add; // get a reference to the function add
return a; //and send it to the outside world, by way of specifying it as the return value
}

So in the above function, we are returning a reference to the function
That is function Counter() does not return a string, number etc. It returns another function.
Or more precisely, a reference to the another function
so now we can use this as

var a=Counter(); // Counter() executes and returns a reference to the add function inside it
a(); //so the variable a points to function add() defined inside the function counter
a();
var res=a();
alert(res): //so displayes 3

Advertisements

2 thoughts on “Closures in JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s