𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗘𝘅𝗽𝗹𝗶𝗰𝗮𝗱𝗼𝘀

Você usa closures todos os dias em JavaScript. Provavelmente você as utiliza em hooks do React, event listeners e callbacks do Node.js. Muitos desenvolvedores têm dificuldade com a teoria, mas o conceito é simples assim que você entende o padrão.

Para entender closures, você deve entender o escopo léxico.

Escopo léxico significa que uma função pode acessar variáveis de seu próprio escopo e de qualquer escopo externo onde ela foi definida. Isso depende de onde você escreve o código, não de onde você o chama.

Uma closure é uma função que se lembra de variáveis de seu escopo original, mesmo depois que esse escopo termina de ser executado.

Pense em uma função como se ela carregasse uma mochila. Quando a função é criada, ela coloca cada variável que precisa de seu ambiente dentro dessa mochila. A função leva essa mochila para todos os lugares onde vai.

Veja como as closures funcionam na prática:

  • Variáveis Privadas: Você pode esconder dados do mundo exterior. Em um exemplo de conta bancária, uma variável de saldo permanece privada. Você só pode alterá-la por meio de métodos específicos, como depósito ou saque. Isso evita o acesso direto a dados sensíveis.

  • Fábricas de Funções: Você pode criar funções que produzem outras funções. Uma fábrica de multiplicadores pode criar uma função de dobrar ou uma função de triplicar. Cada nova função mantém seu próprio multiplicador específico em sua mochila.

  • Event Listeners: Quando você anexa um evento de clique a um botão, o handler se lembra dos dados da função de configuração. Mesmo após a função de configuração terminar, o listener mantém esses dados.

  • React Hooks: Toda vez que você usa useState ou useEffect, você está usando closures. Um erro comum no React acontece quando uma closure captura um valor antigo do estado. Isso é chamado de stale closure.

Cuidado com o uso de memória. Como uma closure mantém uma referência ativa para as variáveis, o engine não pode limpá-las através do garbage collection enquanto a closure existir. Evite manter objetos massivos em uma closure se você não precisar deles por muito tempo.

Resumo:

  • O escopo léxico define o acesso.
  • As closures tornam esse acesso persistente.
  • Uma função carrega seu ambiente em uma mochila.
  • Use let em vez de var em loops para evitar bugs de escopo.

Fonte: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f