Good News Students! Become a Spellogram Contributor and Earn Money.Click Here To Know More!

Easy Trick to Understand Closures in Javascript

0 votes
2,618 views
asked May 2, 2015 by nanospeck (4,240 points)
reshown May 27, 2015 by nanospeck
Almost all explanations I've read about closures were too theoretical and difficult to understand. I wonder if there is an easier way to learn it.

How would you explain closures concept in javascript to a six year old?

1 Answer

0 votes
answered May 2, 2015 by nanospeck (4,240 points)
edited Apr 23 by nanospeck

I found an interesting answer in stackoverflow explaining closures with a story :

 

I'm a big fan of analogy and metaphor when explaining difficult concepts, so let me try my hand with a story.

Once upon a time:

There was a princess...

function princess() {

She lived in a wonderful world full of adventures. She met her Prince Charming, rode around her world on a unicorn, battled dragons, encountered talking animals, and many other fantastical things.

    var adventures = [];

    function princeCharming() { /* ... */ }

    var unicorn = { /* ... */ },
        dragons = [ /* ... */ ],
        squirrel = "Hello!";

But she would always have to return back to her dull world of chores and grown-ups.

    return {

And she would often tell them of her latest amazing adventure as a princess.

        story: function() {
            return adventures[adventures.length - 1];
        }
    };
}

But all they would see is a little girl...

var littleGirl = princess();

...telling stories about magic and fantasy.

littleGirl.story();

And even though the grown-ups knew of real princesses, they would never believe in the unicorns or dragons because they could never see them. The grown-ups said that they only existed inside the little girl's imagination.

But we know the real truth; that the little girl with the princess inside...

...is really a princess with a little girl inside.

Explanation 1:

Very creative, and this also highlights a topic that's not always mentioned: that closures can be used to keep private data private from outside code. In this case, the "adults" (any code outside the princess function) have no way to access the "unicorn" (data in the closure), even though it really does exist, and the little princess (function) has full access to it. So the lesson for the 6-year old is that a closure is like little "world" that you can go into from time-to-time, containing things that are not visible from "the outside". Well Done. 

Explanation 2:

I love this explanation, truly. For those who read it and don't follow, the analogy is this: the princess() function is a complex scope containing private data. Outside the function, the private data can't be seen or accessed. The princess keeps the unicorns, dragons, adventures etc. in her imagination (private data) and the grown-ups can't see them for themselves. BUT the princess's imagination is captured in the closure for the story() function, which is the only interface the littleGirl instance exposes into the world of magic.

Do you have Mnemonics?

Submit your Mnemonics to Win Cash Prizes!


*Deadline: 15th March 2017
...