Einfach ausgedrückt sind Closures Funktionen, die in Funktionen enthalten sind. Die innere Funktion (Closure) ist dann nur innerhalb der Haupt-Funktion (bzw. umgebenden Funktion) verfügbar. Jedoch kann die innere Funktion auf alle Variablen der Haupt-Funktion zugreifen (dies wird dann auch als “lexical Scoping” genannt).

Closures anhand eines Beispiels erklärt

Gehen wir vom folgenden Code aus:

function outer () {
    let count = 0;
    count++;
    console.log(count);
};

Diese Funktion initialisiert eine Variable “count” mit 0 und zählt dann einmal hoch. Anschließend wird das Ergebnis geloggt. Wenn wir nun die Funktion mehrfach ausführen:

outer();
outer();
outer();

Was ist das Ergebnis? Wir bekommen jedes Mal eine 1. Grund ist, dass bei jeder Neuausführung der Funktion immer das Selbe durchlaufen wird: Variable “count” wird mit 0 initialisiert, wird einmal hochgezählt, wird geloggt.

Die Frage ist nun, ob es einen Weg gibt zu verhindern, dass die Variable immer mit 0 beginnt, stattdessen aber beim Aufruf immer weiter um 1 hochzählt? Hier kommen Closures ins Spiel. Wie beschrieben sind Closures Funktionen, die in Funktionen enthalten sind. Sehen wir uns folgendes Beispiel an:

function outer() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    }
};

const countUp = outer();

Wenn wir die Funktion dreimal aufrufen, bekommen wir folgendes Ergebnis:

countUp(); // Gibt 1 zurück
countUp(); // Gibt 2 zurück
countUp(); // Gibt 3 zurück

Was passiert hier? Innerhalb unserer Funktion “outer” haben wir eine Closure-Funktion, die sich den Wert von “count” von vorherigen Aufrufen merkt. Das Ganze lässt sich nun auch weiterentwickeln, indem wir mehrere Funktionen mit verschiedenen Aufgaben als Closure definieren und aufrufen können. Sehen wir uns dabei folgenden Code an:

function outer() {
    let count = 0;
    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        }
    }
};

const calculator = outer();

Auf die Closures können wir dann wie folgt zugreifen:

calculator.increment(); // Gibt 1 zurück
calculator.increment(); // Gibt 2 zurück
calculator.decrement(); // Gibt 1 zurück
calculator.increment(); // Gibt 2 zurück
calculator.increment(); // Gibt 3 zurück
calculator.decrement(); // Gibt 2 zurück