Javascript closures: uma explicação simplificada

Aprenda o que são as closures em Javascript e como você pode utilizá-las para deixar o seu código mais modular, organizado e limpo.

O que são Javascript closures?

function myFunction() {
const text = "Hello from myFunction";
console.log(text);
}
myFunction(); // Linha 6
function myFunction() {
let text = "Hello from myFunction";

function changeText(newText) {
text = newText;
}
return changeText;
}
const setText = myFunction(); // Linha 11setText("Hello again!"); // Linha 13

Por que utilizar closures?

As closures são muito úteis porque podemos associar dados a funções que utilizam esses dados. Esse comportamento é mais ou menos o que você obtém quando utiliza objetos com métodos e propriedades.

class Painter {
constructor(color) {
this.color = color;
}
tint(element) {
element.style.color = this.color;
}
}
const red = new Painter("red");red.tint(document.querySelector("#myElement"));
function Painter(color) {
return function tint(element) {
element.style.color = color;
}
}
const red = Painter("red");red(document.querySelector("#myElement"));

Um sistema básico de templates utilizando closures

Vamos ver mais um exemplo prático de closures para fixar a sua importância na reutilização de código, modularização e encapsulamento.

function template(myTemplate) {
return function(str) {
return myTemplate.replace(/:name/g, str);
};
}
const hello = template("Hello, my name is :name");// Utilizando a função 'hello' para construir textos:const txt1 = hello("Bruno"); // Hello, my name is Bruno
const txt2 = hello("Karine"); // Hello, my name is Karine

Conclusão

As closures são, sem dúvida, uma das características mais interessantes da linguagem Javascript, e devem ser sempre consideradas uma opção quando formos desenvolver um sistema onde o encapsulamento de dados, modularização e clareza de código forem requisitos.

Referências

Obrigado

Muito obrigado por ler este texto até o final.

Software engineer.