From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../javascript/reference/statements/let/index.html | 454 +++++++++++++++++++++ 1 file changed, 454 insertions(+) create mode 100644 files/de/web/javascript/reference/statements/let/index.html (limited to 'files/de/web/javascript/reference/statements/let') diff --git a/files/de/web/javascript/reference/statements/let/index.html b/files/de/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..5c68f5eb96 --- /dev/null +++ b/files/de/web/javascript/reference/statements/let/index.html @@ -0,0 +1,454 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +tags: + - ECMAScript 2015 + - JavaScript + - Statement + - Variable declaration + - Variables + - let +translation_of: Web/JavaScript/Reference/Statements/let +--- +
+
+
{{jsSidebar("Statements")}}
+
+
+ +

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
+
Initialwerte 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
+}
+ +

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
+ +

Private Eigenschaften emulieren

+ +

Beim Einsatz von Konstruktoren können let-Deklarationen (alternativ zu Closures) genutzt werden, um private Eigenschaften in mehreren Methoden zu verwenden.

+ +
var Thing;
+
+{
+  let privateScope = new WeakMap();
+  let counter = 0;
+
+  Thing = function() {
+    this.someProperty = 'foo';
+
+    privateScope.set(this, {
+      hidden: ++counter,
+    });
+  };
+
+  Thing.prototype.showPublic = function() {
+    return this.someProperty;
+  };
+
+  Thing.prototype.showPrivate = function() {
+    return privateScope.get(this).hidden;
+  };
+}
+
+console.log(typeof privateScope);
+// "undefined"
+
+var thing = new Thing();
+
+console.log(thing);
+// Thing {someProperty: "foo"}
+
+thing.showPublic();
+// "foo"
+
+thing.showPrivate();
+// 1
+ +

Das selbe Kapselungsmuster mit Funktionsabschlüssen über lokale Variablen kann mit var erstellt werden, aber dieses benötigt dann funktionsweite Sichtbarkeit (üblicherweise eine IIFE im Modulmuster) anstatt nur blockweite Sichtbarkeit wie das obenstehende Beispiel.

+ +

Redeklarationen

+ +

Erneute Deklaration derselben Variable innerhalb desselben Gültigkeitsbereiches erzeugt einen Syntaxfehler ({{jsxref("SyntaxError")}}).

+ +
if (x) {
+  let foo;
+  let foo; // SyntaxError thrown.
+}
+ +

Der Körper einer switch-Anweisung ist nur ein einzelner Block, weshalb das folgende Beispiel einen Fehler verursacht.

+ +
let x = 1;
+switch(x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // SyntaxError for redeclaration.
+    break;
+}
+ +

Ist innerhalb einer case-Klausel jedoch ein innerer Block eingebettet, erzeugt dieser seinen eigenen lexikalischen Gültigkeitsbereich. Das folgende Beispiel erzeugt deshalb keine solchen Redeklarations-Fehler, wie sie im vorangegangenen Beispiel auftraten.

+ +
let x = 1;
+
+switch(x) {
+  case 0: {
+    let foo;
+    break;
+  }
+  case 1: {
+    let foo;
+    break;
+  }
+}
+ +

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.

+ +

Zeitweilig tote Zonen und Fehler mit let

+ +

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;
+}
+ +

Ein weiteres Beispiel zeitweilig toter Zonen mit lexikalischen Gültigkeitsbereichen

+ +

Aufgrund seines lexikalischen Gültigkeitsbereiches wird der Bezeichner "foo" im untenstehenden Ausdruck (foo + 55) als das foo des if-Blocks interpretiert, nicht aber als die verdeckte Variable foo mit dem Wert 33.
+ Bei Auswertung des Ausdrucks existiert das foo des if-Blocks bereits im lexikalischen Gültigkeitsbereich, hat seine Initialisierung (welche Teil derselben Anweisung ist) aber noch nicht erreicht (und auch nicht abgeschlossen). Folglich ist es noch immer in seiner zeitweilig toten Zone.

+ +
function test(){
+   var foo = 33;
+   if (true) {
+      let foo = (foo + 55); // ReferenceError
+   }
+}
+test();
+ +

Dieses Phänomen kann in einer Situation wie der folgenden verwirren. Die Anweisung let n of n.a gehört bereits zum eigenen Gültigkeitsbereich des Blocks der for-Schleife. Der Bezeichner "n.a" wird als Eigenschaft 'a' des Objektes 'n' interpretiert, welches im ersten Teil derselben Anweisung deklariert wird ("let n"). Dieses befindet sich noch immer in seiner zeitweilig toten Zone, da bei Auswertung des Ausdrucks die Deklarationsanweisung als noch nicht erreicht und abgeschlossen gilt.

+ +
function go(n) {
+  // n here is defined!
+  console.log(n); // Object {a: [1,2,3]}
+
+  for (let n of n.a) { // ReferenceError
+    console.log(n);
+  }
+}
+
+go({a: [1, 2, 3]});
+ +

Nicht-standardisierte let Ausdrücke

+ +

let Blöcke

+ +
+

Die Unterstützung für let Blöcke wurde in Gecko 44 entfernt ({{bug(1167029)}}).

+
+ +

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

+ +
+

Die Unterstützung für let Blöcke wurde in Gecko 41 entfernt ({{bug(1023609)}}).

+
+ +

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

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ES2015')}}Initiale Definition. Definiert keine let Ausdrücke und let Blöcke.
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ESDraft')}}
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(41.0)}}12{{ CompatGeckoDesktop(44) }}1117{{CompatUnknown}}
Temporal dead zone{{CompatUnknown}}12{{ CompatGeckoDesktop(35) }}11{{CompatUnknown}}{{CompatUnknown}}
let expression {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
let block {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Allowed in {{Glossary("sloppy mode")}}{{CompatChrome(49.0)}}{{CompatUnknown}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatChrome(41.0)}}{{ CompatGeckoMobile(44) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(41.0)}}
Temporal dead zone{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile(35) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
let expression {{non-standard_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
let block {{non-standard_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Allowed in {{Glossary("sloppy mode")}}{{CompatNo}}{{CompatChrome(49.0)}}{{CompatGeckoDesktop(44)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

Firefox-spezifische Hinweise

+ + + +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf