Doubts About Use of Practical Closure

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 - ie 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

No, you can't do that.

It's as if you had written:

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

The function gets immediately invoked , the style will be applied straight away, and no .onclick handler gets registered because the return value of the function is undefined .

The real point of the example is to show that you can return a function from another function, and that you can then assign that result to an event handler.

---

If you had left makeSizer() unmodified then you could assign the handlers as proposed without intermediate variables, ie:

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

but that won't work if you change makeSizer() the way you described.

It is also less efficient than storing the "sizer" in a variable if you use the same sizer more than once.

Answer 2

Yes, those variables ( sizeN ) are unnecessary. You can directly assign the result of makeSizer() as handlers, which looks far better.

But, the use of these variables is not the concept of closures. The closure in this example is the function makeSizer , which returns a function (even without arguments), which still has access to the size variable.

Though, you need to see the difference between

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

and

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

Executing makeSizer(5) does not do anything, it returns a function that sets the size to the pre-defined size when invoked. Instead executing resize(5) does set the size directly. You can't use the result of the latter function as an event handler.

Answer 3

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