Closures: a variável que se recusa a morrer

Closure é um recurso do JavaScript que permite que uma função continue acessando variáveis do lugar onde ela foi criada, mesmo depois que esse código já terminou de ser executado.

Pode parecer complicado à primeira vista, mas com um exemplo fica bem mais fácil de entender.

Um exemplo

Imagine um sistema de CRM onde cada vendedor possui seu próprio contador de clientes atendidos.

Podemos criar uma função responsável por gerar esse contador.

tsx

function criarContador() {
  let clientes = 0;

  return function () {
    clientes++;
    return clientes;
  };
}

Agora criamos um contador para um vendedor.

tsx

const contadorJoao = criarContador();

Sempre que João atender um novo cliente:

tsx

console.log(contadorJoao()); // 1 console.log(contadorJoao()); // 2 console.log(contadorJoao()); // 3

Mesmo após a função criarContador() já ter terminado sua execução, a variável clientes continua existindo.

Isso é uma Closure.

Mas por que isso acontece?

Quando a função interna utiliza uma variável da função externa, o JavaScript mantém essa variável na memória enquanto ela ainda for necessária.

Ou seja, a função "lembra" do ambiente onde foi criada.

Outro exemplo

Podemos criar um contador para outro vendedor.

tsx

const contadorMaria = criarContador();

console.log(contadorMaria()); // 1 console.log(contadorMaria()); // 2

Perceba que Maria possui seu próprio contador.

Isso acontece porque cada chamada da função cria uma nova Closure, independente das demais.

Onde isso é usado?

Closures aparecem em diversas situações do dia a dia, como:

Contadores.
Sistemas de autenticação.
Eventos de clique.
Callbacks.
React Hooks.
Encapsulamento de dados.

Mesmo sem perceber, quem desenvolve aplicações React utiliza closures constantemente.

Enfim

Closure é o mecanismo que permite que uma função continue acessando variáveis do escopo onde foi criada, mesmo após esse escopo ter sido finalizado.

Embora o conceito pareça abstrato no início, ele é um dos pilares do JavaScript e está presente em diversas funcionalidades utilizadas no desenvolvimento moderno. Entender closures ajuda a escrever um código mais organizado e também facilita o aprendizado de conceitos mais avançados da linguagem.