No universo do JavaScript, o conceito de "closure" (fechamento) é fundamental para entender como o escopo e o acesso a variáveis funcionam. Uma closure é, essencialmente, uma função que "lembra" o ambiente léxico (o escopo onde foi definida) no qual foi criada, mesmo quando essa função é executada fora de seu escopo original. Isso significa que uma closure pode acessar e manipular variáveis da sua função pai mesmo depois que a função pai já terminou sua execução.

A linguagem JavaScript não possui escopo de bloco para variáveis declaradas com var (apenas escopo de função), mas as closures permitem que as funções internas mantenham uma referência a variáveis do escopo de sua função externa, proporcionando mecanismos poderosos para encapsulamento e manutenção de estado.

Um dos usos mais proeminentes das closures é a capacidade de preservar o estado de variáveis locais e de permitir o acesso a elas de forma controlada, mesmo após a conclusão da execução da função que as criou.

Exemplo Prático de Persistência de Escopo

Considere o seguinte exemplo:

function criadorDeContador() {
 let numeroInicial = 999;

 // Define uma função acessível globalmente para modificar 'numeroInicial'.
 // Nota: 'incrementadorExterno' é adicionado ao objeto global (e.g., 'window' no navegador)
 // se 'var', 'let' ou 'const' não for usado.
 incrementadorExterno = function() {
   numeroInicial++;
 };

 function exibirNumero() {
   alert(numeroInicial);
 }

 return exibirNumero;
}

const minhaFuncaoExibicao = criadorDeContador();
minhaFuncaoExibicao(); // Saída: 999

incrementadorExterno();
minhaFuncaoExibicao(); // Saída: 1000

Neste trecho, minhaFuncaoExibicao é o closure exibirNumero. Ele é invocado duas vezes. A primeira exibe 999. Após a chamada de incrementadorExterno(), que modifica numeroInicial, a segunda invocação de minhaFuncaoExibicao() exibe 1000. Isso demonstra que a variável local numeroInicial, da função criadorDeContador, permanece na memória e acessível mesmo depois que criadorDeContador já completou sua execução e retornou.

A persistência ocorre porque exibirNumero mantém uma referência ao escopo de criadorDeContador. Além disso, a função incrementadorExterno, definida sem um modificador de declaração (var, let, const), torna-se global e também mantém acesso e capacidade de alterar numeroInicial, agindo como um "setter" externo para uma variável interna.

Simulando Variáveis Privadas com Closures

Closures são frequentemente utilizadas para emular variáveis privadas e métodos públicos em JavaScript, um conceito comum em linguagens orientadas a objetos.

function GerenciadorDeEstado(pontoInicial) {
 let estadoInterno = pontoInicial; // Esta é a variável "privada"

 return {
   avancarEstado: function() {
     estadoInterno++;
   },
   obterEstadoAtual: function() {
     return estadoInterno;
   }
 };
}

const meuObjetoDeEstado = GerenciadorDeEstado(4);
meuObjetoDeEstado.avancarEstado();
console.log(meuObjetoDeEstado.obterEstadoAtual()); // Saída: 5

Aqui, GerenciadorDeEstado retorna um objeto que contém dois closures: avancarEstado e obterEstadoAtual. Ambas as funções mantêm acesso ao escopo de GerenciadorDeEstado e, consequentemente, à variável estadoInterno. Não há uma maneira direta de acessar ou modificar estadoInterno de fora do objeto retornado, exceto através dos métodos públicos fornecidos.

Mecanismo de Proteção das Variáveis Internas

É impossível acessar diretamente as variáveis "privadas" de uma closure de fora do escopo definido. Tentativas de "hackear" podem resultar em comportamento inesperado.

const outroObjetoDeEstado = GerenciadorDeEstado(10);
outroObjetoDeEstado.tentarModificar = function() {
 // Isso cria ou sobrescreve uma variável GLOBAL chamada 'estadoInterno',
 // mas não afeta a 'estadoInterno' interna da closure.
 estadoInterno = 500;
};
outroObjetoDeEstado.tentarModificar();
console.log(outroObjetoDeEstado.obterEstadoAtual()); // Saída: 10 (permanece inalterado)

O código acima não altera o valor de estadoInterno dentro do escopo de GerenciadorDeEstado porque tentarModificar não foi definida dentro desse escopo. Portanto, estadoInterno = 500 cria ou referencia uma variável global, não a variável interna protegida pela closure.

Closurse em Laços de Repetição: Uma Armadilha Comum

Um erro frequente ao usar closures ocorre dentro de laços de repetição, especialmente com funções assíncronas como setTimeout.

for (var i = 0; i < 5; i++) {
 setTimeout(function() {
   console.log("Valor final de i:", i);
 }, 100 * i);
}
// Saída esperada:
// Cinco vezes "Valor final de i: 5"

Este código não exibirá 0, 1, 2, 3, 4. Em vez disso, ele exibirá "Valor final de i: 5" cinco vezes. A razão é que as funções anônimas (closures) passadas para setTimeout referenciam a *mesma* variável i. Quando os callbacks são finalmente executados (após o loop ter terminado), a variável i já atingiu seu valor final, que é 5.

Estratégias para Evitar Erros de Referência em Loops

Para capturar o valor correto de uma variável em cada iteração de um loop, é necessário criar um novo escopo para cada callback.

1. Usando IIFE (Immediately Invoked Function Expression)

Uma IIFE cria um novo escopo para cada iteração, garantindo que o valor da variável seja copiado e preservado.

for (var indice = 0; indice < 5; indice++) {
 (function(valorCapturado) { // IIFE cria um novo escopo
   setTimeout(function() {
     console.log("Valor capturado (IIFE):", valorCapturado);
   }, 100 * valorCapturado);
 })(indice); // Passa 'indice' como argumento para o novo escopo
}
// Saída:
// Valor capturado (IIFE): 0
// Valor capturado (IIFE): 1
// Valor capturado (IIFE): 2
// Valor capturado (IIFE): 3
// Valor capturado (IIFE): 4

O argumento valorCapturado da IIFE recebe uma cópia do indice daquela iteração, garantindo que cada closure de setTimeout tenha acesso ao valor correto.

2. Usando a palavra-chave let (Escopo de Bloco)

Com ES6, a palavra-chave let simplifica significativamente a resolução desse problema, pois ela declara variáveis com escopo de bloco. Em cada iteração de um loop for, uma nova variável let é criada.

for (let j = 0; j < 5; j++) { // 'let' cria um novo 'j' para cada iteração
 setTimeout(function() {
   console.log("Valor com let:", j);
 }, 100 * j);
}
// Saída:
// Valor com let: 0
// Valor com let: 1
// Valor com let: 2
// Valor com let: 3
// Valor com let: 4

Esta é a solução recomendada na maioria dos cenários modernos de JavaScript.

3. Usando Function.prototype.bind

O método bind pode ser usado para pré-definir argumentos para uma função, incluindo o contexto this.

for (var k = 0; k < 5; k++) {
 setTimeout(console.log.bind(console, "Valor com bind:", k), 100 * k);
}
// Saída:
// Valor com bind: 0
// Valor com bind: 1
// Valor com bind: 2
// Valor com bind: 3
// Valor com bind: 4

console.log.bind(console, "Valor com bind:", k) cria uma nova função onde this é fixado em console e "Valor com bind:" e k são passados como os primeiros argumentos da função.

Considerações sobre o Uso de Closures

• Gerenciamento de Memória: Closures mantêm referências ao escopo pai, o que pode levar a um maior consumo de memória. O uso excessivo ou descuidado de closures, especialmente em aplicações de longa duração ou em browsers mais antigos (como o IE), pode, em teoria, causar vazamentos de memória. No entanto, engines JavaScript modernas são bastante otimizadas para lidar com isso. Em cenários complexos, assegurar que referências desnecessárias sejam liberadas (por exemplo, atribuindo null a variáveis não mais usadas) pode ser uma boa prática.
• Efeitos Colaterais: Ao usar closures para simular variáveis privadas, tenha cautela com a modificação inadvertida de variáveis internas. As closures podem alterar o estado do ambiente em que foram criadas, o que pode levar a efeitos colaterais inesperados se não forem gerenciadas corretamente.

Desafio de Entendimento: Contexto this e Closures

Para solidificar a compreensão sobre closures e o comportamento do this em JavaScript, analise os resultados dos seguintes fragmentos de código:

Fragmento de Código Um

var nome = "O Objeto Global (Window)";
var objetoExemplo = {
 nome: "O Meu Objeto",
 getCapturadorNome: function() {
   return function() {
     return this.nome;
   };
 }
};
console.log(objetoExemplo.getCapturadorNome()());

Resultado Esperado: "O Objeto Global (Window)"

Explicação: No primeiro exemplo, a função interna retornada por getCapturadorNome é invocada sem um contexto explícito (ou seja, não há um objeto antes do ponto na chamada ()()). Consequentemente, o valor de this dentro dessa função interna é o objeto global (usualmente window no navegador ou undefined no modo estrito). Como há uma variável global nome definida como "O Objeto Global (Window)", this.nome resolve para esse valor.

Fragmento de Código Dois

var nome = "O Objeto Global (Window)";
var outroObjetoExemplo = {
 nome: "Outro Meu Objeto",
 getCapturadorNome: function() {
   var contextoCapturado = this; // 'this' aqui refere-se a 'outroObjetoExemplo'
   return function() {
     return contextoCapturado.nome;
   };
 }
};
console.log(outroObjetoExemplo.getCapturadorNome()());

Resultado Esperado: "Outro Meu Objeto"

Explicação: No segundo exemplo, a variável contextoCapturado é introduzida. Dentro da função getCapturadorNome, this refere-se ao objeto outroObjetoExemplo (porque getCapturadorNome é chamado como um método de outroObjetoExemplo). Esse valor de this é capturado em contextoCapturado. A função interna então acessa contextoCapturado.nome, que mantém a referência correta ao nome de outroObjetoExemplo, demonstrando como closures podem preservar o contexto.