Die Fertigstellung von ES6 im Jahr 2015 brachte neue Möglichkeiten zur Definition von JavaScript-Variablen . Das Schlüsselwort let erstellt eine Variable mit Blockbereich, während const einen unveränderlichen Wert angibt. Hier erfahren Sie, wie sich diese modernen Variablentypen von der klassischen var unterscheiden.
Var
Vor ES6 war var Ihre einzige Option beim Definieren eine Variable. Sie können die Werte von Variablen, die mit var erstellt wurden, frei ändern. Sie können auch die Variable selbst neu deklarieren.
var demo = "erster Wert"; var demo = “zweiter Wert”; Demo = “dritter Wert”; example = "dies wirft einen Fehler aus – Variable nicht deklariert";
Durch die Verwendung von var wird eine Variable erstellt, die auf die aktuelle Funktion beschränkt ist. Falls Sie sie außerhalb einer Funktion verwenden, wird die resultierende Variable global angewendet.
Der “Bereich” einer Variablen beschreibt, wo sie verwendet werden kann. Auf eine funktionsbezogene Variable kann durch Code in der Funktion zugegriffen werden, die sie definiert. Auf eine globale Variable kann im gesamten Code zugegriffen werden.
var myGlobal = "global"; FunktionstestA() { var myFunctionScope = "testA"; console.log(myFunctionScope); console.log(myGlobal); } FunktionstestB() { myGlobal = "überschrieben!"; console.log(myGlobal); //console.log(myFunctionScope); //FEHLER } testA(); testB(); testA();
In diesem Beispiel wird der Unterschied zwischen globalen und funktionsbezogenen Variablen gezeigt. myGlobal kann sowohl von testA als auch von testB gelesen (und geschrieben) werden. myFunctionScope ist nur in testA definiert, daher gibt testB beim Versuch, darauf zuzugreifen, einen Fehler aus. Folgendes würde dieses Beispiel ausgeben:
testA global overwriteed! testA überschrieben! Werbung
Der Wert von myFunctionScope wird innerhalb jeder Funktion separat verwaltet. Der Wert von myGlobal wird in beiden Funktionen aktualisiert, wenn testB ihn überschreibt.
Let
Das neuere Schlüsselwort let ist die moderne Alternative zu var. Sie können let all die Stellen übernehmen, an denen Sie früher var geschrieben haben. Es gibt jedoch wichtige Unterschiede zu beachten.
Das wichtigste Merkmal von Let ist der Bereich. Variablen werden auf einzelne Codeblöcke anstatt auf ganze Funktionen beschränkt. In JavaScript ist ein Block ein Codeabschnitt, der in geschweifte Klammern eingeschlossen ist. Auf jede let-Variable kann nur Code innerhalb ihres Blocks zugreifen.
function letTest(x) { let Demo = "Hallo Welt"; wenn (x > 10) { sei y = 9000; demo = "foobar"; } console.log(demo); //"Fußleiste" console.log(y); //FEHLER }
In diesem Beispiel erstellt die if-Anweisung einen neuen Codeblock. Blöcke erben den Gültigkeitsbereich ihres übergeordneten Blocks, sodass die Demovariable verfügbar bleibt. Die y-Variable ist auf die if-Anweisung beschränkt. Der Versuch, außerhalb des if-Blocks auf y zuzugreifen, führt zu einem undefinierten Variablenfehler.
Wie bei var können mit let erstellte Variablen ihre Werte jederzeit ändern. Sie können jedoch nicht erneut deklariert werden – die zweimalige Verwendung von let mit demselben Namen in einem einzelnen Block führt zu einem Fehler.
let demo = "test"; Demo = "Beispiel"; let Demo = "test"; //FEHLER
Eine Ausnahme ist die Neudeklaration einer Variablen in einem verschachtelten Bereich. Die Regeln des Scoping auf Blockebene bedeuten, dass dies erlaubt ist – Am Ende haben Sie zwei separate Variablen, die zufällig denselben Bezeichner haben.
let foo = "bar"; wenn (wahr) { let foo = “foobar”; console.log(foo); } console.log(foo); Werbung
Das obige Beispiel würde eine Foobar-Leiste ausgeben. Die Variable foo wird im if-Block neu deklariert, ohne die Variable foo des äußeren Gültigkeitsbereichs zu beeinflussen. Sie verlieren die Möglichkeit, innerhalb des inneren Blocks auf die äußere Variable zu verweisen.
Const
Das Schlüsselwort const war ein weiterer ES6-Zusatz. Es hat einen Blockbereich wie let. const steht für “const” und wird für unveränderliche Werte verwendet, die sich nie ändern werden. Der Versuch, den Wert einer const-Variablen zu aktualisieren, führt immer zu einem Fehler.
const foo = "bar"; const foo = “foobar”; //FEHLER
Daher müssen Sie const-Variablen immer mit einem Wert initialisieren. Es ist nicht zulässig, eine const zu definieren und ihren Wert später festzulegen.
let demoLet; //OK var demoVar; //OK const demoConst; //FEHLER const demoConst = "Wert"; //OK
Aus technischer Sicht definiert const keinen konstanten Wert. Es erstellt tatsächlich eine konstante Referenz auf einen Wert. Dies hat zur Folge, dass Sie die Eigenschaften von Objekten, die einer Konstante zugewiesen sind, weiterhin aktualisieren können. Fehler treten nur auf, wenn Sie die const selbst auf der linken Seite einer Zuweisung verwenden.
Welchen Variablentyp soll ich verwenden?
Sie sollten let für die meisten Allzweckvariablen in Ihrem JavaScript-Code übernehmen. Das Scoping auf Blockebene und die verbotene Neudeklaration helfen, Fehler abzufangen und unbeabsichtigtes Überschreiben zu vermeiden.
Die Verwendung der Variablen “Leakage” wo auf Variablen in Bereichen zugegriffen werden kann, für die sie nicht vorgesehen sind. Ein klassisches Beispiel sind Iteratoren in Schleifen:
for (var i = 0; ich <= 10; ich++) { //etwas tun } console.log(i); Werbung
Dies würde dazu führen, dass 10 an die Konsole ausgegeben werden. Die Verwendung von let würde stattdessen undefined ausgeben, da die i-Variable außerhalb von if nicht zugänglich wäre. Umfang. Dies ist normalerweise das gewünschte Ergebnis in einem solchen Szenario.
Schleifen zeigen auch die Gefahren einer var-Neuzuweisung:
für (var i = 0; ich <= 10; ich++) { setTimeout(() => console.log(i), 1000); }
Auf den ersten Blick sieht dieser Code so aus, als ob er die Zahlen 1 bis 10 ausgeben sollte. Stattdessen wird 10 zehnmal protokolliert. setTimeout() ist asynchron und i im Callback ist lexikalisch an den Geltungsbereich gebunden. Da var i in der Schleife verwendet wird, erhält die Variable i bei jeder Iteration einen neuen Wert. Wenn der Timer-Callback ausgeführt wird, sind alle zehn Iterationen bereits abgeschlossen und ich werde immer auf den endgültigen Wert auflösen – 10, in diesem Fall.
Die Verwendung von let i würde stattdessen eine neue Variable namens i für jede Iteration der Schleife deklarieren. Jede Variable behält ihren eigenen Wert, nachdem ihre Iteration abgeschlossen ist, was zu der erwarteten Protokollausgabe führt.
Wann nicht verwendet werden Let
Es gibt Szenarien, in denen Sie let nicht verwenden sollten. Sie sollten const verwenden, wenn Sie eine Variable erstellen, von der Sie wissen, dass sie sich nie ändern wird. Bundler und statische Analysetools können Sie dann warnen, wenn Sie unwissentlich versuchen, ihren Wert neu zuzuweisen.
Es ist normalerweise eine gute Idee, Variablen nach Möglichkeit unveränderlich zu lassen. Dies hilft bei der Beseitigung von Fehlern, die durch unbeabsichtigtes Überschreiben verursacht werden. Die Verwendung von const hilft Ihnen auch, Ihre Absicht in einer Codebasis anzugeben, indem explizit angegeben wird, dass sich ein Wert nicht ändert.
ES6-Funktionen wie let und const werden jetzt von modernen Browsern universell unterstützt. Einige ältere Browser ohne vollständige ES6-Unterstützung, insbesondere Internet Explorer 11, bieten sie ebenfalls an. Sie müssen sich keine Sorgen machen, ob sie verfügbar sind, es sei denn, Sie zielen auf eine stark veraltete Plattform ab. Verwenden Sie let und const, um Ihren Code sauberer zu halten und das Risiko versteckter Fehler zu reduzieren.