let, const, var in JavaScript: Scope & Hoisting

Drei Keywords, ein Zweck

In JavaScript gibt es drei Möglichkeiten, eine Variable zu deklarieren: var, let und const. Alle drei binden einen Namen an einen Wert, unterscheiden sich aber im Scope, in den Regeln zur Neuzuweisung und im Verhalten, bevor die Deklaration tatsächlich ausgeführt wird. In modernem Code nutzt man meistens const, let für Werte, die sich ändern sollen, und var praktisch gar nicht mehr.

Kurz gesagt:

Der Rest dieser Seite erklärt, warum sich diese drei Zeilen so verhalten, wie sie es tun.

const: die Standardwahl

Mit const legst du eine Bindung an, die sich nicht erneut zuweisen lässt. Wenn du einmal const x = 5 geschrieben hast, kannst du später nicht einfach x = 6 schreiben – die Engine wirft dir einen TypeError um die Ohren.

Das ist die ganze Regel. Da die meisten Variablen in einem sauber geschriebenen Programm nie neu zugewiesen werden müssen, passt const für den Großteil der Fälle. Wenn du standardmäßig zu const greifst, fallen die Stellen, an denen sich ein Wert tatsächlich ändert, sofort ins Auge.

Eine häufige Stolperfalle: const schützt die Bindung, nicht den Wert. Handelt es sich um ein Objekt oder Array, bleibt dessen Inhalt weiterhin veränderbar:

const bedeutet: "Dieser Name zeigt immer auf dasselbe Objekt." Es bedeutet nicht, dass das Objekt selbst unveränderlich ist. Willst du das Objekt wirklich einfrieren, ist Object.freeze(user) das Mittel der Wahl – in der Praxis verlässt man sich aber meist einfach auf die Konvention, dass man const-Objekte nicht mutiert.

let: Wenn du wirklich neu zuweisen musst

let verhält sich genauso wie const, mit einem einzigen Unterschied: Du kannst die Variable neu zuweisen. Nimm es für Zähler, Akkumulatoren, Schleifenvariablen und überall dort, wo sich ein Wert tatsächlich im Laufe der Zeit ändert.

Wenn du let schreibst und die Variable später nie neu zuweist, mach lieber ein const draus. In den meisten Projekten meckert der Linter ohnehin genau an dieser Stelle.

Block Scope in JavaScript

Sowohl let als auch const sind block-scoped, gelten also nur innerhalb ihres Blocks. Ein Block ist alles, was zwischen { und } steht – der Rumpf eines if, einer for-Schleife, einer Funktion oder auch einfach ein eigenständiger { ... }-Block. Eine Variable, die innerhalb eines Blocks deklariert wird, existiert außerhalb davon schlicht nicht.

Genau das willst du. So bleiben Variablen auf den Bereich beschränkt, in dem sie gebraucht werden, und versehentliche Namenskollisionen sind ausgeschlossen.

var macht das nicht – und genau deshalb solltest du es vermeiden.

var: Function Scope und seine Tücken

var ist an die nächste Funktion gebunden, nicht an den nächsten Block. Eine var-Deklaration innerhalb eines if- oder for-Blocks sickert also nach außen in die umgebende Funktion durch:

Genau dieses lockere Scoping ist die Ursache einer langen Reihe klassischer JavaScript-Bugs — der Klassiker schlechthin sind Schleifen, in denen sich alle Iterationen dasselbe var i teilen und am Ende jeder Callback denselben finalen Wert sieht.

Dazu kommt: Mit var kannst du denselben Namen im selben Scope beliebig oft neu deklarieren, ohne dass JavaScript mucken würde — Tippfehler bleiben so gnadenlos unbemerkt:

Moderner Code setzt fast ausschließlich auf let und const. var begegnet dir höchstens noch in Alt-Projekten, betagten Stack-Overflow-Antworten oder Skripten, die noch in uralten Umgebungen laufen müssen.

Hoisting und die Temporal Dead Zone in JavaScript

Alle drei Deklarationen werden gehoistet – die Engine weiß also schon vor der Ausführung des Blocks von ihnen – aber sie verhalten sich unterschiedlich, solange die Zeile mit der Deklaration noch nicht durchlaufen wurde.

var wird gehoistet und automatisch mit undefined initialisiert. Du kannst darauf also zugreifen, bevor die var-Zeile überhaupt erreicht wurde, ohne dass ein Fehler fliegt:

let und const werden zwar gehoistet, aber nicht initialisiert. Greifst du vor der Deklaration darauf zu, fliegt dir ein Fehler um die Ohren. Dieses Zeitfenster zwischen dem Betreten des Scopes und dem tatsächlichen Ausführen der Deklaration nennt man die Temporal Dead Zone (kurz TDZ):

Die TDZ ist ein Feature, kein Bug. Sie verwandelt "vor der Deklaration benutzt" von einem stillen undefined in einen lauten Fehler – und fängt damit jede Menge Tippfehler und Reihenfolge-Patzer ab.

const als Schleifenvariable in for...of

Ein kleiner, aber häufiger Fall: for...of-Schleifen erzeugen bei jedem Durchlauf ein frisches Binding. Deshalb darfst du const für die Schleifenvariable verwenden, auch wenn sie sich zwischen den Iterationen "ändert".

Jede Iteration bekommt ihre eigene name-Bindung – es gibt also keine einzelne Variable, die neu zugewiesen wird. Eine klassische for-Schleife vom Typ for (let i = 0; i < n; i++) braucht dagegen weiterhin let, denn i ist eine einzige Bindung, die hochgezählt wird.

Eine Faustregel für die Praxis

Wähle deine Deklarationen in dieser Reihenfolge:

• const als Standard. Wenn der Wert ohnehin nicht neu zugewiesen wird, sag das auch explizit.
• let, wenn sich die Bindung tatsächlich ändern muss.
• var nur dann, wenn du in einer Codebasis arbeitest, die es zwingend verlangt.

Hältst du dich konsequent daran, sieht man jeder Variable auf einen Blick an, was sie ist: neu zuweisbar oder nicht, gebunden an diesen Block oder an die gesamte Funktion.

MAX_RETRIES und users ändern sich nie — also const. successful wächst mit der Zeit — daher let. user ist in jedem Schleifendurchlauf eine frische Bindung — wieder const. Wer den Code von oben nach unten liest, erkennt sofort, welche Werte sich bewegen und welche fix sind, ohne den Code überhaupt auszuführen.

Als Nächstes: Primitive Datentypen

Jetzt weißt du, wie man Variablen in JavaScript deklariert. Die nächste logische Frage: Welche Art von Werten können darin eigentlich landen? JavaScript kommt mit einer überschaubaren Menge an primitiven Typen — Zahlen, Strings, Booleans und ein paar weitere — und jeder davon hat seine eigenen Eigenheiten. Darum geht's auf der nächsten Seite.