Como ensinar Closures em JavaScript para uma criança de 5 anos de idade. 👶‍💻
Tags: closure, javascript
Published: 2021-02-06 03:15:15

---
title: Como ensinar Closures em JavaScript para uma criança de 5 anos de idade. 👶‍💻
published: true
description: 
tags: closure, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/o3g12vbi9s97svx48pv3.jpg
---

Sem enrolação, vamos ao código.

```js
// Exemplo Closures em JavaScript 👶‍💻

/**
 * Closure são parecidos com fábricas de doces.
 * Você realiza um pedido para a fábrica fazer os doces de acordo
 * com seu sabor favorito, e a fábrica escolherá um especialista ideal 
 * baseado no sabor. Com isso você só precisará solicitar a
 * quantidade desejada.
 * O especialista vai cuidar de todo o resto para você.
 */
const fabricaDeDoces = (sabor) => {
  const especialistas = {
    Chocolate: {
      nome: "Aylla",
      receitaSecreta: "🍫",
    },
    Morango: {
      nome: "Marina",
      receitaSecreta: "🍓",
    },
  };

  const especialistaPorSabor = especialistas[sabor];

  return (quantidade) => {
    return `${quantidade} doces de ${sabor} feito por ${especialistaPorSabor.nome}.`;
  };
};

// Neste cenário, a fábrica não quer enviar seus especialistas,
// Pois eles podem vazar as receitas ultrassecretas.
// Em vez disso, eles enviam apenas  uma maneira de chamar 
// o especialista (como uma função) que estará a disposição para
// receber o pedido com a quantidade a qualquer hora.
// Agora a fábrica dispôs especialista de forma anônima.
// 
// Conclusão:
// Apenas a função interna pode acessar o escopo da função externa.
// Somente a fábrica pode dizer diretamente ao especialista o que fazer.
const especialistaChocolate = fabricaDeDoces("Chocolate");
const especialistaMorango = fabricaDeDoces("Morango");

console.log(especialistaChocolate(1000));
// 1000 doces de Chocolate feito por Aylla.

console.log(especialistaMorango(500));
// 500 doces de Morango feito por Marina.
```

> Código no [Codepen](https://codepen.io/adammacias/pen/ExNKxOR
)

Essa é uma maneira simples de entender o conceito de Closures (do inglês, fechamento), que nada mais são do que funções que referenciam variáveis independentes (livres) definidas fora do seu escopo. Resumindo, uma a função definida na Closure lembra-se do ambiente no qual ele foi criado.

**Dica adicional** 

Ainda podemos melhorar nosso exemplo utilizando `new Map()`, evitando que retorne `undefined` caso seja passado um tipo de especialista que não existe.

```js
const fabricaDeDoces = (sabor) => {
   let especialistas = new Map();

   especialistas.set("Chocolate", {
      nome: "Aylla",
      receitaSecreta: "🍫"
   });

   especialistas.set("Morango", {
      nome: "Marina",
      receitaSecreta: "🍓"
   });

   const especialistaPorSabor = especialistas.get(sabor);

   if (!especialistaPorSabor) {
      return () => `Nenhum especialista ${sabor} encontrado.`;
   }

   return (quantidade) => {
      return `${quantidade} doces de ${sabor} feito por ${especialistaPorSabor.nome}.`;
   };
};

const especialistaBanana = fabricaDeDoces("Banana");

console.log(especialistaBanana(500));
// "Nenhum especialista Banana encontrado."
```

> Código no [Codepen](https://codepen.io/adammacias/pen/abBpZEv
)

***

Refs: 
- [Closures Developer.mozilla](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Closures)
- [papercoding22](https://dev.to/papercoding22/how-to-explain-javascript-closure-to-a-5-years-old-kid-4d6n)