Closures y Scope

Un closure ocurre cuando una función "recuerda" las variables de su scope exterior, incluso después de que esa función exterior haya terminado de ejecutarse. Es como si la función llevara consigo una mochila con las variables que necesita, independientemente de dónde se ejecute después.

Los closures son fundamentales en JavaScript y aparecen constantemente sin que lo notes. Cada vez que usas useEffect en React, cada callback en un addEventListener, cada función dentro de otra función, estás usando closures. Son el mecanismo detrás del estado privado en módulos y de los hooks de React.

El caso clásico de closure es un contador o generador: una función exterior crea una variable, la función interior la modifica, y esa variable persiste entre llamadas porque el closure la "capturó". Esto simula variables privadas en JavaScript sin necesidad de clases.

// Closure básico
function crearContador() {
  let contador = 0; // Variable privada
  
  return {
    incrementar() { contador++; },
    decrementar() { contador--; },
    obtener() { return contador; }
  };
}

const contador1 = crearContador();
const contador2 = crearContador();

contador1.incrementar();
contador1.incrementar();
console.log(contador1.obtener()); // 2
console.log(contador2.obtener()); // 0 (independiente)

// Closure para datos privados (patrón módulo)
const BancoCuenta = (saldoInicial) => {
  let saldo = saldoInicial; // Privado!
  
  return {
    depositar: (monto) => { saldo += monto; },
    retirar: (monto) => {
      if (monto > saldo) throw new Error("Saldo insuficiente");
      saldo -= monto;
    },
    consultar: () => saldo
  };
};

const cuenta = BancoCuenta(1000);
cuenta.depositar(500);
console.log(cuenta.consultar()); // 1500
// saldo es inaccesible directamente: cuenta.saldo === undefined