How to explain JavaScript Closure to a 5 years old kid

Lazy to read. Show me the code.

// 👶 How to explain closure to a 5 years old kid

/** 
* Closure is like a candy factory
* You send the factory an order to make candies for you with your favorite flavor.
* The factory will pick the right expert for you,
* And it send back to you an expert's contact.
* Now whenever you need, you just call and submit the quantity.
* That expert will take care all the rest for you.
*/
const candyFactory = (flavor) => {
  const experts = {
    Chocolate: {
        name: 'Tim',
        secretRecipe: '🍫',
    },
    Strawberry: {
        name: 'Alex',
        secretRecipe: '🍓',       
    }
  }
  const expertByFlavor = experts[flavor];
  return (quantity) => {
    return `${quantity} ${flavor} candies are made 
                by ${expertByFlavor.name}.`; 
  }
}

// The factory doesn't want to send you their experts,
// Because it may leak their top secret recipe. 
// Instead, they just send you a way to call the expert (as a function) 
// and waiting for your calling to order anytime.
// Now the factory keeps your flavor and your expert.
// In conclusion:
// Only the inner function can access outer function'scope.
// Only the factory can directly tell the expert what to do.
const chocolateExpert = candyFactory('Chocolate');
const stawberryExpert = candyFactory('Strawberry');

console.log(chocolateExpert(1000)); 
// 1000 Chocolate candies are made by Tim.
console.log(stawberryExpert(500));
// 500 Strawberry candies are made by Alex.

Try it at JSFiddle

Comments

[𒎏Wii 🏳️‍⚧️]

Not that it matters for the purpose of the article, but I do have to nitpick a bit 😝

Why are you creating a new experts object with every call of the candyFactory function? That seems like unnecessary work for the garbage-collector.

Another minor issue is more easily explained with a simple snippet of code:

console.log(candyFactory('__proto__')(20))
// 20 __proto__ candies are made 
//                  by undefined.

So yea, use new Map() isntead 😉

[Ranieri Althoff]

I don't think 5 year-olds are really into __proto__ candies

[Paper Coding]

Yeah we can move the experts out of the function, because it is a constant, and we should validate the input, but it is just a small example, so I took it easy. Thank for your suggestion.

[lionel-rowe]

It may be a little confusing to beginners if the only example given is one where there's no advantage to using a closure (the information-hiding aspect would be better served with a module). Maybe you could expand the article or write a sequel, with a second example that shows off the power and usefulness of closures as a feature.

[Paper Coding]

I am writing the next one, it will be more detailed and it will go with practical examples in real life project and open source. Thank for your suggestion

[Corentin Girard]

What would your solution for the __proto__ injection be? I didn't understand what you meant about new Map().

[𒎏Wii 🏳️‍⚧️]

using a Map object instead of a plain JS object avoids the __proto__ problem

[abasyt]

Just ran into this today...

I just met you,
And this is crazy,
but here's my number (delegate)
So if something happens (event)
Call me maybe (callback)

Courtesy LightStriker and kindall on SO

[Log Boy]

It's neat, thank you for sharing !

[Pawan Pawar]

thanks for sharing !

[Elliot Wong]

Nice one Trung. More and more kids are learning how to code, this can come in handy whenever we meet one!

[Paper Coding]

Yeah, it also a way to help us to understand something deeper. Because “If you can't explain it simply, you don't understand it well enough.”
Albert Einstein

[Beck Lin]

Thanks for this amazing example !
I also have another question which might be off the topic here.
Under what circumstances will we leak the info in the closure ? I mean, if we don't use closure, which means we expose experts in the code, *how could this be unsafe or dangerous *? << I kept thinking about it for a long time

[spartan1cs]

very neat
Thanks!!

[Neth Insta]

thank for sharing

[Chapman]

Sit back and watch the five-year-olds complain about the candy. 😂