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

var ist eine Variable mit globalem Geltungsbereich (aufhebbar).

let y const ist Blockumfang.

test.js

{
    let l = 'let';
    const c = 'const';
    var v = 'var';
    v2 = 'var 2';
}

console.log(v, this.v);
console.log(v2, this.v2);
console.log(l); // ReferenceError: l is not defined
console.log(c); // ReferenceError: c is not defined

Answer 2

Bei Verwendung let

El let Schlüsselwort fügt die Variablendeklaration in den Geltungsbereich eines beliebigen Blocks (in der Regel ein { .. } Paar), in dem es enthalten ist. Mit anderen Worten, let übernimmt implizit den Geltungsbereich eines jeden Blocks für seine Variablendeklaration.

let Variablen können nicht in der window Objekt, da auf sie nicht global zugegriffen werden kann.

function a(){
    { // this is the Max Scope for let variable
        let x = 12;
    }
    console.log(x);
}
a(); // Uncaught ReferenceError: x is not defined

Bei Verwendung var

var und Variablen in ES5 haben in Funktionen einen Geltungsbereich, was bedeutet, dass die Variablen innerhalb der Funktion und nicht außerhalb der Funktion selbst gültig sind.

var können die Variablen in der window Objekt, da auf sie nicht global zugegriffen werden kann.

function a(){ // this is the Max Scope for var variable
    { 
        var x = 12;
    }
    console.log(x);
}
a(); // 12

Wenn Sie mehr wissen wollen, lesen Sie weiter unten

eine der berühmtesten Interviewfragen zum Umfang kann auch die genaue Verwendung von let y var wie unten;

Bei der Verwendung von let

for (let i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 0 to 9, that is literally AWW!!!
        }, 
        100 * i);
}

Dies liegt daran, dass bei der Verwendung von let Für jede Schleifeniteration ist die Variable skaliert und hat ihre eigene Kopie.

Bei der Verwendung von var

for (var i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 10 times 10
        }, 
        100 * i);
}

Dies liegt daran, dass bei der Verwendung von var Für jede Schleifeniteration ist die Variable "scoped" und hat eine gemeinsame Kopie.

Answer 3

Einige Hacks mit let :

1.

    let statistics = [16, 170, 10];
    let [age, height, grade] = statistics;

    console.log(height)

2.

    let x = 120,
    y = 12;
    [x, y] = [y, x];
    console.log(`x: ${x} y: ${y}`);

3.

    let node = {
                   type: "Identifier",
                   name: "foo"
               };

    let { type, name, value } = node;

    console.log(type);      // "Identifier"
    console.log(name);      // "foo"
    console.log(value);     // undefined

    let node = {
        type: "Identifier"
    };

    let { type: localType, name: localName = "bar" } = node;

    console.log(localType);     // "Identifier"
    console.log(localName);     // "bar"

Getter und Setter mit let :

let jar = {
    numberOfCookies: 10,
    get cookies() {
        return this.numberOfCookies;
    },
    set cookies(value) {
        this.numberOfCookies = value;
    }
};

console.log(jar.cookies)
jar.cookies = 7;

console.log(jar.cookies)

Answer 4

Let vs. var. Es dreht sich alles um Umfang .

var-Variablen sind global und ist praktisch überall zugänglich, während let-Variablen sind nicht global und existieren nur so lange, bis eine schließende Klammer sie tötet.

Sehen Sie sich mein Beispiel unten an und beachten Sie, wie sich die Variable lion (let) in den beiden console.logs unterschiedlich verhält; sie wird in der zweiten console.log außerhalb des Anwendungsbereichs.

var cat = "cat";
let dog = "dog";

var animals = () => {
    var giraffe = "giraffe";
    let lion = "lion";

    console.log(cat);  //will print 'cat'.
    console.log(dog);  //will print 'dog', because dog was declared outside this function (like var cat).

    console.log(giraffe); //will print 'giraffe'.
    console.log(lion); //will print 'lion', as lion is within scope.
}

console.log(giraffe); //will print 'giraffe', as giraffe is a global variable (var).
console.log(lion); //will print UNDEFINED, as lion is a 'let' variable and is now out of scope.

Answer 5

Die folgende Abbildung zeigt, wie sich "let" und "var" im Anwendungsbereich unterscheiden:

let gfoo = 123;
if (true) {
    let gfoo = 456;
}
console.log(gfoo); // 123

var hfoo = 123;
if (true) {
    var hfoo = 456;
}
console.log(hfoo); // 456

El gfoo definiert durch let ist zunächst in der globale Reichweite und wenn wir erklären, dass gfoo wieder innerhalb der if clause seine Umfang geändert und wenn der Variablen innerhalb dieses Bereichs ein neuer Wert zugewiesen wird, wird beeinflusst nicht den globalen Geltungsbereich.

. hfoo definiert durch var ist zunächst in der globale Reichweite aber wieder, wenn wir es innerhalb der if clause wird der globale Bereich hfoo berücksichtigt, obwohl var erneut verwendet wurde, um ihn zu deklarieren. Und wenn wir den Wert neu zuweisen, sehen wir, dass der globale Bereich hfoo ebenfalls betroffen ist. Dies ist der Hauptunterschied.