As closures em JavaScript permitem que programadores escrevam melhor, de modo mais conciso e expressivo. Mas você sabe o que, de fato, elas são? Ter um conhecimento sobre closures e como utiliza-las é um passo importante para compreender mais ainda a linguagem de programação JavaScript.

Uma closure é uma função interna que possui acesso a (referência) variáveis independentes da função externa. Em outras palavras, a função definida na closure se lembra do ambiente na qual foi criada.

Após ler a definição acima pode ter parecido um pouco complicado o que, de fato, elas são. Mas a partir de agora vamos apresentar alguns exemplos que vão deixar mais claro o seu funcionamento.

Escopo Léxico

Antes de exemplificar o funcionamento das closures em JavaScript, é preciso entender que o código escrito na linguagem segue um padrão léxico (isso mesmo, uma estrutura linguística). O escopo léxico de uma função é definido como sua posição física na estrutura do código fonte. Veja o exemplo abaixo:

var x = “global”
function iniciar() {
var nome = “Impacta”; // nome da variável criada dentro da função iniciar
function mostraNome() { // mostraNome() é uma função interna.
alert(nome); // utiliza-se aqui a variável criada na função parente.
}
mostraNome();
}
iniciar();

No exemplo acima, a função mostraNome() é uma função interna que está está fisicamente englobada pela função iniciar(), logo, somente pode ser acessada no corpo desta. mostraNome() também não possui variáveis próprias, mas consegue acessar a variável nome já definida em sua função pai. Já a função iniciar(), por sua vez, está envolvida pelo contexto global.

Nesse sentido, o escopo léxico de qualquer função é definido pela estrutura léxico-hierarquica de seus ancestrais. No exemplo acima, o escopo léxico da função mostraNome() é composto pela função iniciar() e o objeto global (variável x).

Closures

Agora que ficou claro o que é o escopo léxico, vamos ao seguinte exemplo:
function foo(x) {
var tmp = 3;
function bar(y) {
alert(x + y + (++tmp));
} bar(10);
}
foo(2);

Ao executar a função acima o resultado será um alerta com o número 16, pois a função bar() pode acessar a variável x que foi definida como um argumento da função foo.

E isto é uma closure! O simples fato de que uma função pode acessar variáveis que se encontram fora do escopo léxico imediato cria uma closure.

O próximo exemplo vai deixar ainda mais claro a utilidade das closures.

function adiciona(x) {
return function(y) {
return x + y;
};
}
var add5 = adiciona(5);
var add10 = adiciona(10);
console.log(add5(5)); // O resultado será 10
console.log(add10(5)); // O resultado será 15

Nós criamos a função adiciona(x), que aceita um argumento “x” e retorna uma nova função. A função retornada aceita um argumento “y” e retorna a soma de “x” + “y”. Ou seja, a função adiciona(x) é uma “máquina de funções”. Ao referenciá-la em variáveis que definem a variável “x”, uma nova função é criada.

No exemplo acima nós criamos duas novas funções, add5() e add10(), a primeira adicionando 5 como o argumento “x” e a segunda adicionando 10. Estas duas funções são closures, pois compartilham o mesmo corpo da função adiciona(), mas guardam argumentos diferentes.

Em termos de programação, closures representam grande sofisticação. Tornam os códigos mais compactos e fáceis de ler, além de reaproveitáveis. Saber como utilizá-las elimina muito tempo e retrabalho. Esperamos que este artigo tenha deixado claro como elas funcionam e seja o começo para o entendimento deste artifício genial. Se você ainda tiver dúvidas, favor deixar uma mensagem em nossos comentários.

Seja um especialista em Javascript aprendendo no melhor centro de ensino tecnológico

No curso de JavaScript da Impacta você aprende os conceitos e técnicas básicas de utilização do JavaScript para o desenvolvimento de sites mais atrativos e efetivos. Vendo na prática, você conhece os principais recursos da linguagem e como sua integração com HTML oferece melhores opções de arquitetura de informação e, consequentemente, um resultado melhor junto ao usuário.