Closures em JavaScript

Os closures em JavaScript são um dos conceitos mais poderosos e, ao mesmo tempo, mais complexos em JavaScript. Eles permitem que uma função acesse variáveis do seu escopo externo mesmo após esse escopo ter sido executado. Neste post, vamos explorar o que são closures, como funcionam e como você pode usá-las em suas aplicações.

1. O que são closures?

Um closure é uma função que “lembra” o ambiente em que foi criada, mesmo depois de ter sido executada. Isso significa que a função tem acesso a variáveis de seu escopo lexical, mesmo quando é chamada fora desse escopo.

2. Como os closures funcionam

Para entender os closures, é importante conhecer o conceito de escopo em JavaScript. Quando você define uma função dentro de outra função, a função interna tem acesso às variáveis da função externa. Quando a função externa é executada e retorna, a função interna ainda pode acessar essas variáveis.

Exemplo básico de closure

function criarContador() {
  let contagem = 0; // variável privada

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

const contador = criarContador();
console.log(contador()); // 1
console.log(contador()); // 2
console.log(contador()); // 3

Neste exemplo, a função interna (o retorno de criarContador) é um closure que mantém acesso à variável contagem, mesmo após a execução da função externa.

3. Usos comuns de Closures

Os closures são frequentemente usados em várias situações, incluindo:

• Encapsulamento de dados: Para criar variáveis privadas.
  
  
• Funções de retorno: Como em fábricas de funções.
  
  
• Manipulação de eventos: Para manter o contexto de uma variável em manipuladores de eventos.

Exemplo de encapsulamento

function criarConta(saldoInicial) {
  let saldo = saldoInicial;

  return {
    depositar: function(valor) {
      saldo += valor;
      console.log(`Depositado: R$${valor}. Saldo atual: R$${saldo}`);
    },
    sacar: function(valor) {
      if (valor > saldo) {
        console.log("Saldo insuficiente!");
      } else {
        saldo -= valor;
        console.log(`Sacado: R$${valor}. Saldo atual: R$${saldo}`);
      }
    },
  };
}

const conta1 = criarConta(1000);
conta1.depositar(500); // "Depositado: R$500. Saldo atual: R$1500"
conta1.sacar(200); // "Sacado: R$200. Saldo atual: R$1300"

4. Closures e performance

Os closures podem ter um impacto na performance se forem utilizados em excesso, especialmente se você estiver criando muitos closures em loops. Isso porque as variáveis de escopo externo não são coletadas pelo garbage collector até que todos os closures que as referenciam sejam coletados.

5. Erros comuns com Closures

Um erro comum ao usar closures é não entender como o JavaScript trata o this. O valor de this pode mudar dependendo de como a função é chamada, levando a comportamentos inesperados.

Exemplo de problema com this

function CriarContador() {
  this.contagem = 0;

  setInterval(function() {
    this.contagem++; // `this` não se refere ao objeto
    console.log(this.contagem);
  }, 1000);
}

const contador = new CriarContador();

Neste caso, o this dentro do setInterval não se refere ao objeto CriarContador. Para resolver isso, você pode usar uma função arrow, que não cria um novo contexto de this.

function CriarContador() {
  this.contagem = 0;

  setInterval(() => {
    this.contagem++; // `this` refere-se ao objeto correto
    console.log(this.contagem);
  }, 1000);
}

const contador = new CriarContador();

Os closures são uma ferramenta poderosa em JavaScript, permitindo que você encapsule variáveis e mantenha estados internos em suas funções.

Compreender como funcionam os closures é fundamental para escrever código JavaScript mais modular e eficiente. Ao experimentar com closures em seus projetos, você poderá explorar novas maneiras de gerenciar estados e comportamentos em suas aplicações!

Dúvidas ou sugestões sobre Closures em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: closures javascript