Usage of JavaScript Closures

Question

After reading about closures in JavaScript, I am still unable to understand where are they used? If there were no closures then how would the things be done alternately (if possible) and what does the use of closures simplify. If someone can explain this with some code examples in JavaScript it would be helpful. Any links to articles explaining this are also welcome. I have read this article mentioned in a similar question. It explains with code like this

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

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

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

But why would I do like this when instead I can easily create a function like this

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

    document.getElementById('size-12').onclick = function(){sizer(12)};
    document.getElementById('size-14').onclick = function(){sizer(14)};
    document.getElementById('size-16').onclick = function(){sizer(16)};

They are used all over the place. It's just how the language works. There are no specific use cases. — katspaugh, Oct 25 '12 at 13:58
@Neerav: Never mind that all those onclicks are technically closures too. :) Truth is, JS almost wouldn't be worth using if functions couldn't be whipped up and passed around at will. We'd be back in the bad old days of passing a string of JS code to parse and run, or something like that. — cHao, Oct 25 '12 at 14:03
That is not a good example of where closures are needed. [They're useful for creating new variable scope](http://jsfiddle.net/NszSw/). — zzzzBov, Oct 25 '12 at 14:09

score 0 · Answer 1 · answered Oct 25 '12 at 13:56

In your example, making makeSizer() return a function would mean less code.

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);

vs.

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

document.getElementById('size-12').onclick = function(){sizer(12)};
document.getElementById('size-14').onclick = function(){sizer(14)};
document.getElementById('size-16').onclick = function(){sizer(16)};

score 0 · Answer 2 · answered Oct 25 '12 at 13:57

You can do multiple things with closures. Regarding to your question: The closure is used to set a up a partial function. This technique is used in functional programming when currying comes into the scene. Currying means that a function is invoked after each parameter passing and returning the result of it. Mostly a partial function, but when all params are passed it will return the final value. That very technique you just pretended to do by explicitely returning a new function.

Why is it useful? Well, its a functional programming technique, one you can compare with partial classes in object oriënted programming.

There are situations when this concept is useful. Read my blog on software-innovators.nl for an in-dept example.

Remember, this is one of more examples where closures are needed.

score 0 · Accepted Answer · edited May 23 '17 at 11:48

I think this SO answer pretty much explain the concept in detail. After reading this my understanding is that closures are there to make functions as first class objects. Functions as first class objects are really helpful as they can be passed like arguments and make certain things quite easy.

Also one more benefit of using closures is probably they can be used to make members private in JavaScript as explained in this post.

Usage of JavaScript Closures

3 Answers3