JavaScript Says: Closures Well Explained

Closures are an important concept in JavaScript you should understand it well if you want to be professional in JavaScript. First you should make sure you understand Functions and Scopes.


What are Closures?

A closure is the combination of a function and the environment (the set of available variables) in which it was defined. [The Art & Science Of JavaScript]


Understanding Closures

function getDate(){
var date = new Date();
function displayDate(){
alert(date);
}
return displayDate();
}

In the previous simple example, we have function getDate which contains variable date and inner function displayDate. As we see, the inner function displayDate can access the variable date which isn’t in its scope but it is in its closure (function scope + function context).

I hope closures are clear now for you if they aren’t the next section will take care of any misunderstandings.


Closures in a real world

Sure you want to know why and when do we need to use closure? so I will list the two common cases of using closures.

1- Make your function variables private (OOP Simulation):

function counter() {
var _number = 0;
return {
getNumber: function() { return _number; },
setNumber: function(number) { _number = number; },
increase: function() { ++_number; },
decrease: function() { --_number; }
}
}

In the previous example we try to implement one of OOP concepts by making the variable number private and is not accessible from the outside world and anyone wants to deal with it, he/she should use the getter to get its value and setter to change its value like this:

var counterObj = new counter();
console.log(counterObj.getNumber()); // 0
counterObj.setNumber(10);
console.log(counterObj.getNumber()); // 10
counterObj.increase();
console.log(counterObj.getNumber()); // 11

This is like we do in other programming languages which support OOP and this gives you an option to prevent others from setting or getting any variables you want.

2- Function Factory:

The following example from MDN which shows how closures can be used as function factory (live code on jsfiddle).

function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

Here we have three buttons each one changes the font size of the page body. So we define a function which takes the value of font size as a parameter and returns another function which is responsible to change the font size of page body. Thanks to closures which enable the inner function to access the outer function’s parameters and use this inner function as a return to the outer function and now easily we can assign this function to onclick of each button.


Conclusion

Closures is accessing the outer function variables and parameters ( the parent scope) even after the outer function is called. Closures make it possible for a function to have private variables and make a function factory.