Closures gehören zu den mächtigsten – und anfangs verwirrendsten – Konzepten in JavaScript. Wir bauen damit einen "privaten" Kontostand für unser Haushaltsbuch, auf den nur über kontrollierte Funktionen zugegriffen werden kann.

Was ist ein Closure?

Ein Closure entsteht, wenn eine Funktion Zugriff auf Variablen aus ihrem UMGEBENDEN Scope behält – auch NACHDEM die äußere Funktion bereits beendet wurde. Die innere Funktion "schließt" die Variablen quasi in sich ein:

function erstelleZaehler() {
  let anzahl = 0; // 'anzahl' lebt im Scope von erstelleZaehler

  return function () {
    anzahl++; // greift auf 'anzahl' aus dem UMGEBENDEN Scope zu
    return anzahl;
  };
}

const zaehler = erstelleZaehler(); // erstelleZaehler() ist bereits FERTIG gelaufen

console.log(zaehler()); // 1
console.log(zaehler()); // 2 - 'anzahl' hat 'überlebt', obwohl erstelleZaehler() längst zurückgekehrt ist!
console.log(zaehler()); // 3

Das ist der Kern eines Closures: Die zurückgegebene innere Funktion behält eine LEBENDE Referenz auf anzahl, nicht nur eine Kopie des Werts zum Zeitpunkt der Rückgabe.

Praxisbeispiel: ein privater Kontostand

Damit bauen wir jetzt eine "Kontostand-Fabrik" für unser Haushaltsbuch – der Kontostand selbst ist von AUSSEN nicht direkt erreichbar, nur über die zurückgegebenen Funktionen veränderbar:

function erstelleKonto(startguthaben) {
  let kontostand = startguthaben; // 'privat' - von außen nicht direkt zugreifbar

  return {
    einzahlen(betrag) {
      kontostand += betrag;
      return kontostand;
    },
    abheben(betrag) {
      if (betrag > kontostand) {
        throw new Error('Nicht genügend Guthaben');
      }
      kontostand -= betrag;
      return kontostand;
    },
    getKontostand() {
      return kontostand;
    },
  };
}

const konto = erstelleKonto(1500);
console.log(konto.getKontostand()); // 1500

konto.einzahlen(300);
konto.abheben(850);
console.log(konto.getKontostand()); // 950

console.log(konto.kontostand); // undefined - kein direkter Zugriff möglich!

Closures in Schleifen: Wiederholung der let-Falle

Die var-Schleifenfalle aus Kapitel 15 ist tatsächlich EIN Closure-Phänomen: Alle mit var erzeugten Callback-Funktionen teilen sich denselben Closure über dieselbe, einzige i-Variable. Mit let erhält jede Iteration eine FRISCHE Bindung – und damit einen eigenen Closure.

Eine kurze Warnung: Closures und Speicher