Closures: cos'è e perché è fondamentale in JavaScript

Ecco la definizione ufficiale, in una frase: una closure è una funzione racchiusa insieme (enclosed) alle variabili del suo ambiente circostante: il suo lexical environment. In pratica: una funzione "si ricorda" delle variabili che esistevano quando è stata creata, anche molto tempo dopo che quella funzione esterna ha già finito di eseguire.

1. Lexical scoping: la visibilità decisa da dove scrivi il codice

MDN è preciso su questo punto: in JavaScript, la visibilità (scope) di una variabile è definita dalla sua posizione nel codice sorgente, si vede "lessicalmente", leggendo il testo e le funzioni annidate hanno accesso alle variabili dichiarate nel loro scope esterno.

function init() { 
     var name = "Mozilla"; // variabile locale creata da init function 
     
      displayName() { 
         console.log(name); // usa la variabile del genitore 
      } 
      
      displayName(); 
} 

init(); // stampa "Mozilla"

Quando displayName cerca name, JavaScript risale la scope chain: prima guarda nello scope locale, poi in quello della funzione che la contiene, poi ancora più fuori, fino allo scope globale, finché non trova la variabile o esaurisce i livelli.

Fonte: MDN Web Docs: «Closures»: la visibilità di una variabile è definita dalla sua posizione nel codice sorgente; le funzioni annidate hanno accesso alle variabili dichiarate nel loro scope esterno (lexical scoping).

2. La closure in azione: la funzione che «ricorda»

La parte sorprendente arriva quando la funzione interna viene restituita dalla funzione esterna, prima di essere eseguita. A prima vista sembra impossibile che funzioni ancora, la funzione esterna è già terminata! Ma il lexical environment resta agganciato alla funzione restituita.

function creaContatore() {
  let contatore = 0; // "chiusa dentro" (enclosed) dalla funzione interna
  return function () {
    contatore++;
    return contatore;
  };
}
const conta = creaContatore();
console.log(conta());
// 1 console.log(conta());
// // 2 -- se lo ricorda!
const contaDiNuovo = creaContatore(); // un NUOVO ambiente, indipendente
console.log(contaDiNuovo()); // 1 -- non condivide nulla con "conta"

Ogni chiamata a creaContatore(), crea un nuovo lexical environment, indipendente dagli altri: conta e contaDiNuovo hanno ciascuno il proprio contatore, e modificarne uno non tocca l'altro.

3. Il pattern modulo: closures per nascondere dati

MDN segnala esplicitamente un vantaggio delle closures che di norma associamo alla programmazione orientata agli oggetti: data hiding ed encapsulation. Puoi restituire più funzioni pubbliche che condividono lo stesso ambiente privato, invisibile dall'esterno.

function creaContoBancario(saldoIniziale) {
    let saldo = saldoIniziale; // Privato: irraggiungibile dall'esterno

    return {
        deposita(importo) {
            saldo += importo;
            return saldo;
        },

        preleva(importo) {
            if (importo > saldo) {
                throw new Error("Fondi insufficienti");
            }

            saldo -= importo;
            return saldo;
        },

        leggiSaldo() {
            return saldo;
        },
    };
}

const conto = creaContoBancario(100);

conto.deposita(50); // 150
conto.saldo; // undefined: non esiste una via diretta

Nessuno può leggere o modificare saldo direttamente: l'unico modo per interagirci è attraverso le funzioni pubbliche che tu hai deciso di esporre. Questo si chiama pattern modulo: incapsulare uno stato privato dietro un'interfaccia pubblica controllata.

In sintesi

Le closures sono il meccanismo che rende possibili contatori indipendenti, dati privati, e gran parte dei pattern che userai ogni giorno scrivendo JavaScript, anche quando non ci pensi.