JavaScript Variablen-Scope

Scope ist der Teil eines Programms, in dem eine Variable sichtbar ist und verwendet werden kann. Den Scope zu verstehen ermöglicht es dir vorherzusagen, auf welchen Wert ein Name verweist, unbeabsichtigte Konflikte zwischen Variablen zu vermeiden und nachzuvollziehen, warum eine Variable an einer bestimmten Stelle verfügbar ist oder nicht. Dieser Leitfaden erklärt die verschiedenen Scope-Arten in JavaScript, wie verschachtelte Funktionen auf die sie umgebenden Scopes zugreifen, wie sich var von let/const unterscheidet und wie all dies natürlich zu Closures führt.

Die drei Arten von Scope

JavaScript bestimmt die Sichtbarkeit von Variablen danach, wo die Variable im Quellcode deklariert wurde — dies nennt man lexikalischen (oder statischen) Scope. Es gibt drei Ebenen:

• Globaler Scope — außerhalb jeder Funktion oder eines Blocks deklariert. Überall sichtbar.
• Funktions-Scope — innerhalb einer Funktion deklariert. Nur innerhalb dieser Funktion sichtbar (so funktioniert var).
• Block-Scope — mit let oder const innerhalb eines Blocks { ... } deklariert (einem if, einem for oder auch einem leeren {}). Nur innerhalb dieses Blocks sichtbar.

Globaler Scope

Eine Variable, die auf oberster Ebene eines Skripts deklariert wird, ist global: Jede Funktion und jeder Block kann sie lesen und schreiben.

Globale Variablen sind praktisch, aber riskant: Jeder Teil des Programms kann sie verändern, und zwei unabhängige Codeabschnitte können denselben Namen verwenden und sich gegenseitig überschreiben. Halte den globalen Namespace klein.

Funktions-Scope

Eine Variable, die innerhalb einer Funktion deklariert wird, existiert nur, solange diese Funktion ausgeführt wird, und ist von außen nicht sichtbar.

Das try...catch lässt das Beispiel weiterlaufen, damit du die Fehlermeldung sehen kannst, anstatt dass das Skript einfach abbricht.

Block-Scope

let und const sind auf den nächstgelegenen umschließenden Block begrenzt, nicht auf die gesamte Funktion. Eine Variable, die innerhalb eines if- oder for-Blocks deklariert wird, verschwindet, sobald der Block endet.

Wie verschachtelte Funktionen auf äußere Variablen zugreifen

Wenn du Funktionen verschachtelst, kann die innere Funktion Variablen aus jedem Scope lesen, der sie umgibt — ihrem eigenen, dem der umschließenden Funktion und dem globalen Scope. Diese Kette zugänglicher Scopes wird als lexikalische Umgebung (oder Scope-Kette) bezeichnet.

Wenn JavaScript einen Namen nachschlägt, beginnt es im aktuellen Scope und geht nach außen, bis es die Variable findet. Wenn es den globalen Scope erreicht, ohne sie zu finden, erhält man einen ReferenceError.

Die Suche geht nur nach außen, niemals nach innen — outer() kann innerVar nicht sehen. Dies ist genau der Mechanismus, der Closures möglich macht: Eine innere Funktion behält Zugriff auf ihre äußeren Variablen, auch nachdem die äußere Funktion zurückgekehrt ist.

var vs. let und const

Die Scoping-Regeln unterscheiden sich je nachdem, wie du eine Variable deklarierst. var ist funktionsbezogen und ignoriert Blöcke, während let und const block-bezogen sind. Dies ist eine der häufigsten Fehlerquellen in älterem Code.

Die klassische Falle ist eine Schleife, die Callbacks erstellt. Mit var gibt es eine einzige gemeinsame Variable; mit let erhält jede Iteration ihre eigene Bindung:

Für einen tieferen Einblick in die Besonderheiten von var — einschließlich Hoisting und dem fehlenden Block-Scope — siehe das alte "var".

Hoisting und die Temporal Dead Zone

Deklarationen werden verarbeitet, bevor der Code ausgeführt wird. Eine var-Deklaration wird gehoisted und mit undefined initialisiert, sodass das Lesen vor der Zuweisung undefined statt einem Fehler liefert. let und const werden ebenfalls gehoisted, befinden sich aber in einer Temporal Dead Zone (TDZ) — sie sind nicht verwendbar, bis die Zeile ausgeführt wird, die sie deklariert.

Best Practices

• Bevorzuge const, dann let, vermeide var. Block-Scope ist besser vorhersehbar und verhindert unbeabsichtigte Lecks und die oben gezeigte Schleife-Callback-Falle.
• Halte Variablen im engstmöglichen Scope. Deklariere sie innerhalb des Blocks oder der Funktion, die sie benötigt, anstatt auf oberster Ebene.
• Minimiere globale Variablen. Weniger globale Variablen bedeuten weniger Namenskonflikte und weniger Werte, die irgendein Code still verändern kann.
• Deklariere vor der Verwendung. Auch wenn Hoisting existiert, macht es den Code schwerer lesbar, wenn man sich darauf verlässt.

Fazit

Scope kontrolliert, wo jede Variable sichtbar ist: global, im Funktions-Scope oder im Block-Scope. Verschachtelte Funktionen bilden eine lexikalische Umgebung, die es innerem Code ermöglicht, durch die Scope-Kette nach außen zu greifen — die Grundlage von Closures. Die Wahl von let/const statt var gibt dir zuverlässigen Block-Scope und vermeidet Hoisting-Überraschungen. Studiere als Nächstes, wie Funktionen ihre Umgebung in JavaScript Closures erfassen und wie zurückgegebene Funktionen in Funktionsausdrücken funktionieren.

Übungen