Question

I’m trying to find out more about closures in Javascript and was going through this: https://developer.mozilla.org/en/JavaScript/Guide/Closures#Practical_closures

According to this article, by using such a function:

function makeSizer(size) {  
    return function() {  
        document.body.style.fontSize = size + 'px';  
    };  
}  

var size12 = makeSizer(12);  
var size14 = makeSizer(14);  
var size16 = makeSizer(16); 

We can then make use of such statements to increase/decrease the font-size of text on a page:

document.getElementById('size-12').onclick = size12;  
document.getElementById('size-14').onclick = size14; 
document.getElementById('size-16').onclick = size16;

While I understand the concept here – i.e. size12, size14 and size16 become closures that allow access to the internal function, I can’t help but feel that this is unnecessary. Isn’t it easier to just have:

function makeSizer(size) {  
    document.body.style.fontSize = size + 'px';  
}   

, and then invoke it with these?

document.getElementById('size-12').onclick = makeSizer(12);  
document.getElementById('size-14').onclick = makeSizer(14); 
document.getElementById('size-16').onclick = makeSizer(16);

Can anyone tell me if my thinking is right – or maybe I’m just a novice to Javascript and doesn’t understand the advantage to using closure in this scenario, in which case I’ll be most glad if you can explain the advantage of doing so.

Thanks in advance guys.

Answer 1

For the example you presented, of course closure is not necessary, but I guess it is just to make it simple to present the concept. There are cases though that closure is the best solution to use: think about how to implement a “private” attribute in javascript or when you need curryng to encapsulate arguments (ie, for a callback function).

I hope the following example helps:

var makeSequencer = function() {
    var _count = 0; // not accessible outside this function
    var sequencer = function () {
        return _count++;
    }
    return sequencer;
}

var fnext = makeSequencer();
var v0 = fnext();     // v0 = 0;
var v1 = fnext();     // v1 = 1;
var vz = fnext._count // vz = undefined