I like to cuddle with my closures… don’t judge me

So I just read the MDN article about Javascript closures and it was almost good. Normally, I like MDN articles as they tend to provide accurate information according to ECMAScript specs (not like W3Schools — for the love of God, Google… stop indexing that site!).

The MDN article starts with an explanation of lexical scoping which is super helpful and is fundamentally what closures are all about. That’s the tiny little baby kitten. It’s cute, it makes sense, it might not be ideal, but it is harmless when you understand it!

Then MDN decides to show an example of what a kitten closure looks like in the wild, which is also pretty helpful… and it’s still just a tiny little baby kitten — except now it is lying down in a big green field instead of on your pillow.

Then the article completely derails and springs a full-grown, king-of-the-jungle, lion on you! The practical example they give is really strange… they use Javascript to modify text size on a website! WTF is that?!?! Why would anyone do that? How is that practical?

So what is a closure?

Basically, a closure is the fact that a function is aware of variables defined outside of itself. Yep, that’s it. The kitten is aware that there is a litter box in the basement that he can use should he so desire. The litter box doesn’t have to live inside the kitten; it is simply available for the kitten to use or ignore.

Alright, alright… a quick example.

1
2
3
4
5
6
7
8
9
'use strict';

var litterbox = 'go poop!';

var kitten = function(){
    alert(litterbox);
}

kitten(); //alerts "go poop!"

<sarcasm>
OMG, that is such a difficult concept! OMG, JS is so terrible because of scoping issues and loose typing (loose typing will be discussed at a later date)!
</sarcasm>

You’ll hear those types of comments a lot from non-JS developers with backgrounds in Java, C#, Visual Basic and other such terrible, enterprisey languages. It is BS. Javascript just operates under a different paradigm. You just need to understand the basic concepts and everything is not only fine, everything is good. Javascript is awesome.

So just as an example, if you wanted or needed to prevent the litterbox variable and kitten function from leaking into other scopes as seen above, you could simply wrap all that in an IIFE (Immediately Invoked Function Expression) — pronounced “iffy” — and all is well.

1
2
3
4
5
6
7
8
9
10
(function(){
    'use strict';

    var litterbox = 'go poop!';

    var kitten = function(){
        alert(litterbox);
    }

})();

So now if you tried to access litterbox or kitten() from outside that IFFE, you will get undefined or undefined is not a function or some kind of error type thing.

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(){
    'use strict';

    var litterbox = 'go poop!';

    var kitten = function(){
        alert(litterbox);
    }

})();

alert(litterbox);   // litterbox is not defined
alert(kitten());    // kitten is not defined

Conlusion

Once you understand the basic concept of lexical scoping, by all means continue reading that MDN article because closures can have some confusing consequences in more complicated scenarios. But I would challenge you to keep your code as simple as possible (but not simpler) to accomplish your task. The fact that the practical examples in the MDN article are so far-fetched, proves that the use-case for complex closures is vague and probably unjustified in most cases. In my 15+ years of Javascript development, there has never been a time when I have said “man, what would I have done without a closure!”, so…

Keep your closures cute and cuddly like a tiny little baby kitten! :)

~ Peace!