Como ensinar Closures em JavaScript para uma criança de 5 anos de idade. 👶💻
Adam Macias
Posted on February 6, 2021
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:
💖 💪 🙅 🚩
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.