JavaScript Closures Explained to Kids

Written by papercoding22 | Published 2021/02/17
Tech Story Tags: reactjs | nodejs | react-native | javascript | coding | programming | software-development | learning-to-code

TLDR 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. 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.via the TL;DR App

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

Written by papercoding22 | I am Front-end developer
Published by HackerNoon on 2021/02/17