Doubts About Use Of Practical Closure

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

Solution 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.

Solution 2:

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

Solution 3:

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

functionmakeSizer(size) {  
    returnfunctionresize() {  
        document.body.style.fontSize = size + 'px';  
    };  
}

and

functionresize(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.