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

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, i.e.:

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.