JavaScript var-Schlüsselwort

In JavaScript beeinflusst die Art, wie Variablen erstellt und verwendet werden, direkt das Verhalten des Codes. Das Schlüsselwort var wird seit Jahrzehnten zur Deklaration von Variablen genutzt. Seit ES6 let und const eingeführt hat, ist var in neuem Code selten die richtige Wahl — doch du wirst es noch in Tutorials, bei Interviewfragen und in Legacy-Projekten begegnen. Dieses Kapitel erklärt genau, wie var funktioniert, warum seine Scoping- und Hoisting-Regeln überraschen können und wann (falls überhaupt) man heute noch darauf zurückgreifen sollte.

Diese Seite behandelt: wie var seinen Gültigkeitsbereich bestimmt, Hoisting und die undefined-Falle, versehentliche globale Variablen, Neudeklaration, den berühmten Closure-in-Loop-Fehler und die sichereren let/const-Alternativen.

Einführung in die Variablendeklaration mit var

Das Schlüsselwort var deklariert eine Variable und initialisiert sie optional mit einem Wert. Mit var deklarierte Variablen haben Funktions-Scope oder globalen Scope (niemals Block-Scope) und unterliegen dem Hoisting, was Verhalten erzeugen kann, das Entwickler aus anderen Sprachen überrascht. Für die Grundlagen zur Deklaration von Variablen, siehe JavaScript-Variablen.

Funktions-Scope

Eine mit var innerhalb einer Funktion deklarierte Variable ist lokal für diese Funktion und überall innerhalb davon zugänglich. Entscheidend dabei: var respektiert keine Block-Grenzen. Selbst wenn es innerhalb eines Blocks wie einer if-Anweisung oder einer for-Schleife deklariert wird, „leckt" die Variable nach außen und ist überall innerhalb der umschließenden Funktion sichtbar.

Dies ist der größte Unterschied zu let und const: Mit diesen würde x nur innerhalb des if-Blocks existieren, und console.log würde einen ReferenceError auslösen. Für das vollständige Block-Scope-Bild, siehe Variable Scope.

Hoisting

Hoisting ist das JavaScript-Verhalten, bei dem Deklarationen so behandelt werden, als wären sie an den Anfang ihres umschließenden Gültigkeitsbereichs verschoben worden. Bei var wird nur die Deklaration gehoistet, nicht die Zuweisung — der Name existiert also vom Anfang der Funktion an, enthält aber undefined, bis die Ausführung die Zeile mit der Zuweisung erreicht.

Das Lesen von y vor seiner var-Zeile ergibt undefined anstelle eines ReferenceError. Genau das macht das var-Hoisting so tückisch: Code sieht aus, als würde er „funktionieren", aber ein Tippfehler oder eine falsch platzierte Zuweisung kann stillschweigend undefined lesen.

let und const werden ebenfalls gehoistet, leben aber in der Temporal Dead Zone, bis ihre Deklaration ausgeführt wird. Ein frühzeitiger Zugriff wirft also eine Ausnahme, anstatt stillschweigend undefined zurückzugeben — was meist dem entspricht, was man tatsächlich möchte:

Globale Variablen und das var-Schlüsselwort

Wenn var außerhalb einer Funktion verwendet wird, wird es zu einer globalen Variable, die von überall zugänglich ist. In Browsern wird es außerdem als Eigenschaft des globalen Objekts (window) angehängt, was let und const nicht tun. Das Risiko: Zwei Skripte, die beide var config deklarieren, überschreiben sich stillschweigend gegenseitig.

var globalVar = "I am global";
// In a browser: window.globalVar === "I am global"  → true

let blockGlobal = "scoped";
// window.blockGlobal → undefined (let/const do not become window properties)

Das Vergessen, eine Variable überhaupt zu deklarieren (Zuweisung an einen nicht deklarierten Namen im Nicht-Strict-Modus) erzeugt ebenfalls eine versehentliche globale Variable — ein weiterer Grund, "use strict" zu verwenden und let/const zu bevorzugen.

Einschränkungen von var und moderne Alternativen

Obwohl var ein grundlegender Bestandteil von JavaScript ist, hat es Einschränkungen, die zur Einführung von let und const in ES6 (ECMAScript 2015) geführt haben, die block-scoped Variablendeklarationen ermöglichen.

Hoisting und Scope-Verwirrung

Das Hoisting-Verhalten und der funktionsbezogene Gültigkeitsbereich von var können zu Verwirrung führen, insbesondere in Schleifenkonstrukten oder bedingten Blöcken, wo block-scoped Variablen intuitiv erwartet werden.

var-Neudeklaration und Closure-in-Loop-Eigenheiten

• Neudeklaration: Im Gegensatz zu let und const erlaubt var die erneute Deklaration derselben Variable im selben Scope ohne Fehler — so kann eine doppelte Deklaration eine frühere stillschweigend überschreiben.
• Closure-in-Loop: Eine var-Schleifenvariable lebt in einem gemeinsamen Funktions-Scope, sodass jede in der Schleife erstellte Closure dieselbe Variable sieht. Wenn die Callbacks ausgeführt werden, ist die Schleife bereits beendet und die Variable enthält ihren Endwert.

Der Closure-in-Loop-Fehler ist die klassische var-Falle. Alle drei Callbacks teilen sich ein i:

var durch let zu ersetzen behebt das Problem: let erstellt für jede Iteration eine neue Bindung, sodass jede Closure ihren eigenen Wert erfasst:

Vor let war die Lösung ein IIFE, das den Wert pro Iteration erfasste:

Einführung von let und const

Um die mit var verbundenen Probleme zu beheben, bieten let und const Entwicklern block-scoped Variablen, was das Fehlerrisiko durch Hoisting reduziert und den Code vorhersehbarer und einfacher zu debuggen macht.

Best Practices für die Verwendung von var in JavaScript

Trotz seiner Einschränkungen ist var nach wie vor Teil der JavaScript-Sprache und kann noch angetroffen werden, insbesondere in Legacy-Code. Die Einhaltung von Best Practices stellt sicher, dass seine Verwendung die Funktionalität oder Wartbarkeit des Codes nicht beeinträchtigt.

1. Einsatz in modernem Code einschränken: Bevorzuge let und const für Variablendeklarationen, um Block-Scoping zu nutzen und potenzielle Hoisting-Probleme zu reduzieren.
2. Scope verstehen: Beim Arbeiten mit var sollte man seinen funktionsbezogenen Gültigkeitsbereich im Blick behalten und die Codestruktur entsprechend planen, um unbeabsichtigte globale Variablen zu vermeiden.
3. Initialisierung bei der Deklaration: var-Variablen bei der Deklaration initialisieren, um undefined-Werte durch Hoisting zu vermeiden.

Fazit

Das Schlüsselwort var war lange Zeit ein Grundpfeiler von JavaScript. Das Verständnis seines Scoping- und Hoisting-Verhaltens ist entscheidend für das Schreiben von zuverlässigem Code. Im Laufe der Weiterentwicklung der Sprache wurden let und const eingeführt, um die Einschränkungen von var zu beheben und modernes JavaScript vorhersehbarer zu machen. Das Verständnis von var bleibt jedoch wichtig für die Pflege von Legacy-Codebasen. Durch das Befolgen von Best Practices und die Bevorzugung von block-scoped Deklarationen können Entwickler saubereren und besser wartbaren JavaScript-Code schreiben.

Übungen