let

Das Schlüsselwort let deklariert eine Variable im Gültigkeitsbereich des lokalen Blocks. Optional wird die Variable mit einem Wert initialisiert. let leitet sich vom englischen Verb "to let" ab, so daß man die Zeile "let x = 3" lesen kann als: "lassen wir x 3 sein" (let x be three), bekannt aus der Programmiersprache BASIC.

Syntax

let var1 [= wert1] [, var2 [= wert2]] [, ..., varN [= wertN]];

Parameter

var1, var2, …, varN

Variablenname. Jeder legale Bezeichner ist erlaubt.

wert1, wert2, …, wertN

Initialwert der Variablen. Jeder legale Ausdruck ist erlaubt.

Beschreibung

let ermöglicht es Variablen zu deklarieren, deren Gültigkeitsbereich auf den Block, den Befehl oder den Ausdruck beschränkt ist, in dem sie deklariert sind. Der Unterschied zum var Schlüsselwort ist, dass der Gültigkeitsbereich auf Blöcke und nicht auf Funktionen bzw. Global beschränkt ist.

Regeln für Gültigkeitsbereiche

Variablen, die mit let deklariert werden, haben als Gültigkeitsbereich den Block in dem sie definiert wurden und alle weiteren Unterblöcke in denen sie nicht neu definiert werden. In dieser Hinsicht funktioniert let ähnlich wie var. Der Unterschied besteht darin, dass der Gültigkeitbereich bei var Deklarierten Variablen die umschließende Funktion ist:

function varTest() {
  var x = 31;
  if (true) {
    var x = 71;  // gleiche Variable!
    console.log(x);  // 71
  }
  console.log(x);  // 71
}

function letTest() {
  let x = 31;
  if (true) {
    let x = 71;  // andere variable
    console.log(x);  // 71
  }
  console.log(x);  // 31
}

Sauberer Quelltext in inneren Funktionen

let macht den Programmcode manchmal leserlicher, wenn innere Funktionen eingesetzt werden.

var list = document.getElementById("list");

for (var i = 1; i <= 5; i++) {
  var item = document.createElement("li");
  item.appendChild(document.createTextNode("Item " + i));

  let j = i;
  item.onclick = function (ev) {
    console.log("Item " + j + " is clicked.");
  };
  list.appendChild(item);
}

Dieses Beispiel funktioniert wie erwartet, weil alle fünf Instanzen der anonymen inneren Funktionen auf verschiedene Instanzen der Variable j zugreifen. Wenn stattdessen var verwendet wird oder in der inneren Funktion statt j zu deklarieren i benutzt wird, funktioniert dies nicht.

Auf der ersten Ebene von Programmen und Funktionen erzeugt let im globalen Objekt keine Property, var hingegen schon. Deshalb ist this.y im folgenden Beispiel undefined.

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

Zeitweilig tote Zonen und Fehler mit let

Eine wiederholte Deklaration einer Variablen im gleichen Blockgültigkeitsbereich führt zu einem TypeError.

if (x) {
  let foo;
  let foo; // TypeError
}

In ECMAScript 2015, werden Deklarationen mit let nicht an den Anfang des Blocks verschoben (hoist). Wird eine Variable vor der Deklaration in einem Block referenziert, führt dies zu einem ReferenceError, weil sich die Variable bei Eintritt in den Block bis zur Verarbeitung der Deklaration in einer "zeitweilig toten Zone" (temporal dead zone) befindet.

function do_something() {
  console.log(foo); // ReferenceError
  let foo = 2;
}

Ein switch Block besteht nur aus einem Block, so dass Fehler wie im folgenden Beispiel auftreten können.

switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // SyntaxError für erneute Deklaration
    break;
}

Der Einsatz von let mit einem Variablennamen, der der gleiche wie bei einem Funktionsparameter ist, führt zu einem undefined Wert in einer for Schleife:

function go(n){
  for (let n of n.a) {
    console.log(n);
  }
}

go({a:[1,2,3]});

Ein weiteres Beispiel

Wenn let in einem Block eingesetzt wird, beschränkt das die Sichtbarkeit der Variablen auf den Block. Der Unterschied zu var ist, dass var für eine ganze Funktion sichtbar ist.

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // Gültigkeitsbereich: global
  let b = 22; // Gültigkeitsbereich: in if-Block

  console.log(a);  // 11
  console.log(b);  // 22
} 

console.log(a); // 11
console.log(b); // 2

Nicht-standardisierte let Ausdrücke

let Blöcke

let Blöcke ermöglichen es Werte von Variablen in einem Block zu bearbeiten, ohne gleichnamige Variablen außerhalb des Blocks zu beeinflussen.

Syntax

let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block;

Beschreibung

Der let Block unterstützt lokales Scoping für Variablen. Es funktioniert mit dem Binden von keiner oder mehreren Variablen im lexikalischen Scope eines einzigen Blocks. Ansonsten ist es genau das selbe wie ein Block Statement. Zu beachten ist, dass Variablen, die innerhalb des let Blocks mit var definiert werden auch außerhalb des Blocks verfügbar sind, weil diese an die Funktion gebunden werden. Wenn ein let Block-Syntax benutzt wird, ist das let gefolgt von runden Klammern zwingend notwendig. Fehler beim benutzen führen zu einem Syntaxerror.

Beispiel

var x = 5;
var y = 0;

let (x = x+10, y = 12) {
  console.log(x+y); // 27
}

console.log(x + y); // 5

Die Regeln für den Codeblock sind die gleichen wie für alle anderen Blöcke in JavaScript. Er hat seine Eigenen lokalen Variablen, die mit let deklariert sind.

Regeln für Gültigkeitsbereiche

Die Sichtbarkeit von mit let definierten Variablen ist der let Block selbst und auch jeder weitere innere Block in diesem Block, wenn die inneren Blöcke keine Variablen mit dem gleichen Namen definieren.

let Ausdrücke

Der let Ausdruck setzt die Sichtbarkeit einer Variablen auf nur einen Ausdruck.

Syntax

let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;

Beispiel

Man kann let benutzen, um Variablen nur für einen Ausdruck zu benutzen:

var a = 5;
let(a = 6) console.log(a); // 6
console.log(a); // 5

Regeln für Gültigkeitsbereiche

Gegeben ist folgender let Ausdruck:

let (decls) expr

Es wird ein impliziter Block um expr erstellt.

Name

Die Erklärung, daß let von englisch "to let sth. be sth." abgeleitet ist und so "let" als Name (reserviertes Wort) ausgewählt wurde, ist hier (englisch) zu finden.

Spezifikationen

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Firefox-spezifische Hinweise

• Vor SpiderMonkey 46 (Firefox 46 / Thunderbird 46 / SeaMonkey 2.43), wurde ein TypeError statt einem SyntaxError erzeugt, wenn Neudeklarationen durchgeführt wurden (Bug 1198833, Bug 1275240).
• Vor SpiderMonkey 44 (Firefox 44 / Thunderbird 44 / SeaMonkey 2.41), war let nur in Quelltexten verfügbar, die im HTML durch ein <script type="application/javascript;version=1.7"> Block umfasst wurden (oder höhere Versionen) und hatte eine andere Semantik.
• Die Unterstützung in Worker Codes ist hinter dem dom.workers.latestJSVersion flag versteckt (Bug 487070). Mit versionsfreiem let, wird das Flag für diese Funktion entfernt (Bug 1219523).
• ES2015-Einhaltung für let für SpIderMonkey wird in Bug 950547 nachverfolgt.

Siehe auch

• var
• const
• ES6 In Depth: let and const (englisch)
• Breaking changes in let and const in Firefox 44 (englisch)
• You Don't Know JS: Scope & Closures: Chapter 3: Function vs. Block Scope (englisch)