How to explain JavaScript Closure to a 5 years old kid
Paper Coding
Posted on February 4, 2021
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
馃挅 馃挭 馃檯 馃毄
Paper Coding
Posted on February 4, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.