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

adammacias

Adam Macias

Posted on February 6, 2021

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

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.
Enter fullscreen mode Exit fullscreen mode

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."
Enter fullscreen mode Exit fullscreen mode

Código no Codepen


Refs:

💖 💪 🙅 🚩
adammacias
Adam Macias

Posted on February 6, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How Javascript works
javascript How Javascript works

November 28, 2024

What are Javascript Closures?
javascript What are Javascript Closures?

November 18, 2024

A Beginner's Guide to JavaScript Closures
javascript A Beginner's Guide to JavaScript Closures

November 5, 2024