Entendendo o Escopo em JavaScript

JavaScript tem vários tipos de escopo que determinam onde as variáveis podem ser acessadas em seu código. Entender o escopo é crucial para escrever um JavaScript limpo e de fácil manutenção.

Tipos de Escopo

1. Escopo Global

Variáveis declaradas fora de qualquer função ou bloco têm escopo global:

var globalVar = "Sou global";
let globalLet = "Também sou global";
const globalConst = 'Eu também!';

function algumaFuncao() {
  console.log(globalVar); // Acessível aqui
}

2. Escopo de Função

Variáveis declaradas dentro de uma função são acessíveis apenas dentro dessa função:

function minhaFuncao() {
  var comEscopoDeFuncao = 'Acessível apenas dentro desta função';

  function funcaoInterna() {
    console.log(comEscopoDeFuncao); // Acessível aqui
  }
}

// console.log(comEscopoDeFuncao); // Erro! Não acessível aqui

3. Escopo de Bloco

Variáveis declaradas com let e const dentro de um bloco são acessíveis apenas dentro desse bloco:

if (true) {
  let comEscopoDeBloco = 'Acessível apenas neste bloco';
  const tambemComEscopoDeBloco = 'Eu também!';
  var semEscopoDeBloco = "Tenho escopo de função";
}

// console.log(comEscopoDeBloco); // Erro!
// console.log(tambemComEscopoDeBloco); // Erro!
console.log(semEscopoDeBloco); // Funciona! (mas não é recomendado)

Escopo Léxico

JavaScript usa escopo léxico, o que significa que as funções internas têm acesso às variáveis de seu escopo externo:

function funcaoExterna(x) {
  function funcaoInterna(y) {
    console.log(x + y); // x é acessível aqui
  }
  return funcaoInterna;
}

const minhaFuncao = funcaoExterna(10);
minhaFuncao(5); // Saída: 15

Esta é a base das closures, que exploraremos no próximo item de conteúdo.

Exemplos e Casos de Uso de Closures

Closures são uma das características mais poderosas do JavaScript. Uma closure lhe dá acesso ao escopo de uma função externa a partir de uma função interna.

O que é uma Closure?

Uma closure é criada quando uma função é definida dentro de outra função, e a função interna referencia variáveis da função externa:

function criarContador() {
  let contador = 0;

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

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

Casos de Uso Comuns

1. Privacidade de Dados

Closures podem criar variáveis privadas:

function criarContaBancaria(saldoInicial) {
  let saldo = saldoInicial;

  return {
    depositar: function (quantia) {
      saldo += quantia;
      return saldo;
    },
    sacar: function (quantia) {
      if (quantia <= saldo) {
        saldo -= quantia;
        return saldo;
      }
      return 'Fundos insuficientes';
    },
    obterSaldo: function () {
      return saldo;
    },
  };
}

const conta = criarContaBancaria(100);
console.log(conta.depositar(50)); // 150
console.log(conta.sacar(30)); // 120
// saldo não é diretamente acessível

2. Fábricas de Funções

Crie funções especializadas:

function criarMultiplicador(multiplicador) {
  return function (x) {
    return x * multiplicador;
  };
}

const dobrar = criarMultiplicador(2);
const triplicar = criarMultiplicador(3);

console.log(dobrar(5)); // 10
console.log(triplicar(5)); // 15

3. Manipuladores de Eventos com Estado

Mantenha o estado em manipuladores de eventos:

function anexarListeners() {
  let contadorDeCliques = 0;

  document.getElementById('button').addEventListener('click', function () {
    contadorDeCliques++;
    console.log(`Botão clicado ${contadorDeCliques} vezes`);
  });
}

Boas Práticas

1. Use closures quando precisar de variáveis privadas
2. Esteja atento ao uso de memória - closures podem impedir a coleta de lixo
3. Considere usar módulos ou classes para gerenciamento de estado complexo
4. Use arrow functions para uma sintaxe mais curta quando apropriado