Como ensinar Closures em JavaScript para uma criança de 5 anos de idade. 👶‍💻

Adam Macias — Sat, 06 Feb 2021 03:15:15 +0000

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

// 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

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.

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

Refs:

DEV Community: Adam Macias

Como ensinar Closures em JavaScript para uma criança de 5 anos de idade. 👶‍💻