JavaScript-Variablen

Einführung

Eine Variable ist ein benannter Behälter für einen Wert. In JavaScript erstellt man Variablen, um Daten zu speichern – den Namen eines Benutzers, eine laufende Summe, das Ergebnis einer Berechnung – und verweist später im Programm über den Namen auf diese Daten.

Dieser Leitfaden behandelt alles, was man benötigt, um Variablen sicher zu deklarieren: die drei Schlüsselwörter (let, const und das ältere var), wie der Gültigkeitsbereich (Scope) bestimmt, wo eine Variable sichtbar ist, was Hoisting und die Temporal Dead Zone (TDZ) in der Praxis bedeuten, den Unterschied zwischen dem Neuzuweisen und dem Mutieren eines const-Wertes sowie die Namensregeln und Konventionen, die in der Community gebräuchlich sind.

Kurzversion: Verwende standardmäßig const, let wenn du neu zuweisen musst, und vermeide var in modernem Code.

Eine Variable deklarieren

Eine Variable wird mit einem Schlüsselwort gefolgt von einem Namen deklariert, und optional mit = ein Wert zugewiesen:

JavaScript ist dynamisch typisiert: Eine Variable hat keinen festen Typ, sodass dieselbe Variable jetzt einen string und später eine Zahl enthalten kann. (Siehe JavaScript-Datentypen für die Werte, die Variablen aufnehmen können.)

Es gibt drei Deklarations-Schlüsselwörter:

• const — für Werte, die nicht neu zugewiesen werden (deine Standardwahl).
• let — für Werte, die neu zugewiesen werden.
• var — das ursprüngliche Schlüsselwort, das aus Gründen der Abwärtskompatibilität beibehalten wird. Siehe Das alte „var".

let, const und var im Vergleich

Das folgende Beispiel zeigt die praktischen Unterschiede zwischen dem blockbezogenen let/const und dem funktionsbezogenen var:

Scope: Wo eine Variable lebt

Der Scope bestimmt, an welcher Stelle im Code auf eine Variable zugegriffen werden kann. Eine ausführlichere Behandlung findest du unter Variablen-Scope, Closure.

Block-Scope (let und const)

let und const sind nur innerhalb des { ... }-Blocks sichtbar, in dem sie deklariert werden – einem if, einer Schleife oder einem beliebigen Klammernpaar:

Deshalb ist let die richtige Wahl für Schleifenzähler: Jede Iteration einer for-Schleife erhält ihre eigene Bindung.

Funktions-Scope (var)

var ignoriert Blöcke. Es ist auf die nächstgelegene umschließende Funktion beschränkt (oder den globalen Scope, wenn es sich außerhalb einer Funktion befindet), was eine häufige Fehlerquelle darstellt:

Globaler Scope

Eine außerhalb einer Funktion deklarierte Variable ist global und überall erreichbar. In Browsern wird ein top-level var an das globale window-object angehängt, während top-level let und const script-scoped sind und dies nicht tun:

Hoisting und die Temporal Dead Zone

Hoisting bedeutet, dass Deklarationen verarbeitet werden, bevor der Code ausgeführt wird. Die drei Schlüsselwörter unterscheiden sich darin, wie sie hoisten.

Eine var-Deklaration wird gehoisted und mit undefined initialisiert, sodass das Lesen vor der Zeile, die ihr einen Wert zuweist, undefined statt eines Fehlers ergibt:

let und const werden ebenfalls gehoisted, aber nicht initialisiert. Vom Anfang des Blocks bis zur Deklarationszeile befindet sich die Variable in der Temporal Dead Zone (TDZ) – der Zugriff darauf wirft einen ReferenceError:

Die TDZ ist ein Feature, kein Merkwürdigkeit: Sie fängt versehentliche Verwendung vor der Deklaration ab, die var stillschweigend verbirgt.

const: Neuzuweisung vs. Mutation

const verhindert das Neuzuweisen der Variable – du kannst den Namen nicht auf einen neuen Wert zeigen lassen. Es macht den Wert selbst nicht unveränderlich. Objekte und arrays, die in einem const gespeichert sind, können weiterhin geändert werden:

Verwende const für Objekte und arrays, wenn du die Bindung nicht neu zuweist – es dokumentiert die Absicht und verhindert eine ganze Klasse von Fehlern. Wenn du wirklich ein unveränderliches object benötigst, verwende Object.freeze().

Namensregeln und Konventionen

JavaScript erzwingt einige feste Regeln für Variablennamen:

• Namen dürfen Buchstaben, Ziffern, _ (Unterstrich) und $ (Dollarzeichen) enthalten.
• Namen dürfen nicht mit einer Ziffer beginnen.
• Namen sind case-sensitive – total und Total sind verschiedene Variablen.
• Reservierte Schlüsselwörter wie let, class oder return dürfen nicht verwendet werden.
• Leerzeichen sind nicht erlaubt.

Zusätzlich zu den Regeln sollte man diese Konventionen für lesbaren Code befolgen:

• Beschreibende Namen verwenden: userAge, nicht x.
• camelCase für Variablen und Funktionen: firstName, itemCount.
• UPPER_SNAKE_CASE für feste Konstanten: const MAX_SIZE = 100;.
• Einzelne Buchstaben vermeiden, außer für kurzlebige Schleifenzähler (i, j).

Zusammenfassung

• Verwende standardmäßig const, let wenn du neu zuweisen musst, und vermeide var in neuem Code.
• let und const sind block-scoped; var ist function-scoped und verlässt Blöcke.
• let/const befinden sich vor ihrer Deklaration in der TDZ; var wird als undefined gelesen.
• const blockiert Neuzuweisung, nicht Mutation – Inhalte von object und array können sich dennoch ändern.
• Namensregeln befolgen (keine führende Ziffer, keine Schlüsselwörter, case-sensitive) und camelCase verwenden.

Um tiefer einzusteigen, lies Das alte „var" und Variablen-Scope, Closure.

Übungen