Javascript closures and how they can improve performance

When Netscape launched JavaScript, none knew its potential immediately. It was just one of the language that is most prominently hated for some reason.But there is nothing that could be done about that. First impressions last, see?

Here is one of the most basic Javascript constructs that most of the web developers tend to miss. This practice is one of the most incredible tool to improve on loading times of your web pages by cutting down memory leaks by almost nothing.

This divine construct is called the JavaScript “Closures”

You might sometimes wonder why Javascript messed up one of the most important foundation any language would be built, reusability.
Well, it is quite difficult to reuse code when you cannot use Global Variables and when there is a real problem of the global variable to clash against one another when you are pullinmg code form different libraries.
Example:

var arr = ["mon", "tue", "wed", "thurs", "fri" ];
var day = function(daynum){
 return arr[daynum];
}
day(0);

This above way is a good way to reuse array “arr” as many times as you want in an efficient way. But the inherent problem with JS is that, if there is another variable at the global level with the same name “arr”, your code gets bombed.
When the code gets dynamic, you cannot rely on global variables anymore.

You might arugue that you could go with local function variables. like follows:

var day = function(daynum){
 var arr = ["mon", "tue", "wed", "thurs", "fri" ];
 return arr[daynum];
}
day(0);

Yes this is good as long as the number of times the function is called is low, or the data structure that you use is small. you you cannot control them, can you?
This approach initialises “var arr” for every call, adding up to the wretched load times we were talking about when we started off.

Well, now comes the real beauty that JS provides. Closures.

Let us first begin with nested functions to understand closures.

Consider this:

var day = function(daynum){
 var arr = ["mon", "tue", "wed", "thurs", "fri" ];
 var resolveDay = function(){ return arr[daynum]};
 var dayName = resolveDay();
 return dayName;
}
day(1);
day(2);
day(3);

The output for the above will be tue wed thurs in case you are wondering. What we are doing here is have another function call internally do the stuff we need and return the value. This has not solved our problem yet. We need to figure out a way to initialise arr only once. To our help, we have the great JS closures that help us write the code in a way that it acts like JAVA’s very own private variables. And so it is.


var day = (function (){
 var arr = ["mon", "tue", "wed", "thurs", "fri" ];
 return function(daynum) { return arr[daynum]};
})();
day(1);

What we essentially did here is, assigned variable day with a self invoking function. This runs only once and assigns day with the function expression. (Because of its return expression). This inturn makes var day a function. Now the magic here is that it can access the variable arr as though it is in its parent scope. Why? They act like nested functions.
This makes variable to be declared only once, initialised only once but accessible always when you call “day” ever again.

Guess what that can be used for ?
Constructor patterns and singleton patterns modularity. Just the below code.
des

It is an excerpt from this great video The Great Video

Do have a look at it.

Happy scripting!

Advertisements