Was ist der Unterschied zwischen der Verwendung von "let" und "var"?

Question

ECMAScript 6 eingeführt die let Anweisung .

Ich habe gehört, dass man es als eine local Variable, aber ich bin mir immer noch nicht ganz sicher, warum sie sich anders verhält als die var Stichwort.

Was sind die Unterschiede? Wann sollte let verwendet werden anstelle von var ?

Answer 1

Ich bin gerade auf einen Anwendungsfall gestoßen, den ich verwenden musste var über let um eine neue Variable einzuführen. Hier ist ein Fall:

Ich möchte eine neue Variable mit dynamischen Variablennamen erstellen.

let variableName = 'a';
eval("let " + variableName + '= 10;');
console.log(a);   // this doesn't work

var variableName = 'a';
eval("var " + variableName + '= 10;');
console.log(a);   // this works

Der obige Code funktioniert nicht, weil eval führt einen neuen Code-Block ein. Die Erklärung mit var wird eine Variable außerhalb dieses Codeblocks deklariert, da var deklariert eine Variable im Funktionsbereich.

let deklariert dagegen eine Variable in einem Blockbereich. Also, a ist nur sichtbar in eval Block.

Answer 2

Let ist ein Teil von es6. Diese Funktionen werden den Unterschied auf einfache Weise erklären.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

Answer 3

Wie oben erwähnt:

Der Unterschied liegt im Scoping. var ist auf die nächstgelegene Funktion Block y let ist auf den Bereich nächstgelegener umschließender Block , die kleiner sein kann als ein Funktionsblock. Beide sind global, wenn sie außerhalb eines Blocks liegen. Beispiel sehen:

Beispiel 1:

In meinen beiden Beispielen habe ich eine Funktion myfunc . myfunc enthält eine Variable myvar ist gleich 10. In meinem ersten Beispiel prüfe ich, ob myvar ist gleich 10 ( myvar==10 ) . Wenn ja, deklariere ich erneut eine Variable myvar (jetzt habe ich zwei myvar-Variablen) mit var und weisen ihm einen neuen Wert (20) zu. In der nächsten Zeile gebe ich den Wert auf meiner Konsole aus. Nach dem bedingten Block drucke ich wieder den Wert von myvar auf meiner Konsole. Wenn Sie sich die Ausgabe von myfunc , myvar hat einen Wert von 20.

Beispiel2: In meinem zweiten Beispiel wird statt der Verwendung von var Schlüsselwort in meinem bedingten Block erkläre ich myvar mit let Stichwort . Wenn ich jetzt aufrufe myfunc Ich erhalte zwei verschiedene Ausgaben: myvar=20 y myvar=10 .

Der Unterschied ist also ganz einfach, nämlich der Anwendungsbereich.

Answer 4

Ich möchte diese Schlüsselwörter mit dem Ausführungskontext verknüpfen, denn der Ausführungskontext ist bei all dem wichtig. Der Ausführungskontext hat zwei Phasen: eine Erstellungsphase und eine Ausführungsphase. Darüber hinaus hat jeder Ausführungskontext eine variable Umgebung und eine äußere Umgebung (seine lexikalische Umgebung).

Während der Erstellungsphase eines Ausführungskontextes speichern var, let und const ihre Variable weiterhin mit einem undefinierten Wert in der Variablenumgebung des jeweiligen Ausführungskontextes im Speicher. Der Unterschied liegt in der Ausführungsphase. Wenn Sie eine mit var definierte Variable referenzieren, bevor ihr ein Wert zugewiesen wird, ist sie einfach undefiniert. Es wird keine Ausnahme ausgelöst.

Sie können jedoch nicht auf die mit let oder const deklarierte Variable verweisen, bevor sie deklariert ist. Wenn Sie versuchen, sie zu verwenden, bevor sie deklariert ist, wird während der Ausführungsphase des Ausführungskontexts eine Ausnahme ausgelöst. Nun befindet sich die Variable dank der Erstellungsphase des Ausführungskontextes noch im Speicher, aber die Engine erlaubt Ihnen nicht, sie zu verwenden:

function a(){
    b;
    let b;
}
a();
> Uncaught ReferenceError: b is not defined

Wenn die Engine bei einer mit var definierten Variablen die Variable nicht in der Variablenumgebung des aktuellen Ausführungskontexts finden kann, geht sie in der Scope Chain (der äußeren Umgebung) nach oben und sucht in der Variablenumgebung der äußeren Umgebung nach der Variablen. Wenn sie dort nicht gefunden wird, wird die Suche in der Scope Chain fortgesetzt. Dies ist bei let und const nicht der Fall.

Das zweite Merkmal von let ist die Einführung des Blockumfangs. Blöcke werden durch geschweifte Klammern definiert. Beispiele sind Funktionsblöcke, if-Blöcke, for-Blöcke usw. Wenn Sie eine Variable mit let innerhalb eines Blocks deklarieren, ist die Variable nur innerhalb des Blocks verfügbar. Jedes Mal, wenn der Block ausgeführt wird, z. B. innerhalb einer for-Schleife, wird eine neue Variable im Speicher angelegt.

ES6 führt auch das const-Schlüsselwort für die Deklaration von Variablen ein. const ist auch blockskaliert. Der Unterschied zwischen let und const besteht darin, dass const-Variablen mit einem Initialisierer deklariert werden müssen, sonst wird ein Fehler erzeugt.

Was schließlich den Ausführungskontext betrifft, so werden die mit var definierten Variablen an das Objekt "this" angehängt. Im globalen Ausführungskontext ist das in den Browsern das Window-Objekt. Dies ist bei let oder const nicht der Fall.

Answer 5

Da ich derzeit versuche, ein tieferes Verständnis von JavaScript zu erlangen, werde ich meine kurze Recherche, die einige der bereits besprochenen großen Stücke sowie einige andere Details enthält, aus einer anderen Perspektive teilen.

Verstehen des Unterschieds zwischen var y lassen Sie kann einfacher sein, wenn wir den Unterschied zwischen Funktion y Blockumfang .

Betrachten wir die folgenden Fälle:

(function timer() {
    for(var i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();

   Stack            VariableEnvironment //one VariablEnvironment for timer();
                                       // when the timer is out - the value will be the same value for each call
5. [setTimeout, i]  [i=5] 
4. [setTimeout, i]  
3. [setTimeout, i]
2. [setTimeout, i]
1. [setTimeout, i]
0. [setTimeout, i]

####################    

(function timer() {
    for (let i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();

   Stack           LexicalEnvironment - each iteration has a new lexical environment
5. [setTimeout, i]  [i=5]       
                      LexicalEnvironment 
4. [setTimeout, i]    [i=4]     
                        LexicalEnvironment 
3. [setTimeout, i]      [i=3]       
                         LexicalEnvironment 
2. [setTimeout, i]       [i=2]
                           LexicalEnvironment 
1. [setTimeout, i]         [i=1]
                             LexicalEnvironment 
0. [setTimeout, i]           [i=0]

wenn timer() wird ein Ausführungskontext erstellt, das sowohl die VariableUmgebung und alle LexikalischeUmgebungen entsprechend jeder Iteration.

Und ein einfacheres Beispiel

Funktionsumfang

function test() {
    for(var z = 0; z < 69; z++) {
        //todo
    }
    //z is visible outside the loop
}

Blockumfang

function test() {
    for(let z = 0; z < 69; z++) {
        //todo
    }
    //z is not defined :(
}