Como funcionam as Closures em JavaScript?

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.

Saiba mais:

Saiba a diferença entre declarar uma matriz com “array()” e “[]” em JavaScript

e-Book gratuito: Decodificando o Desenvolvedor WEB. Baixe já o seu!

Deixe seu comentário! Nos conte se você já conhecia os Closures na plataforma Javascript ou se caso tenha ficado alguma dúvida!