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

let können auch verwendet werden, um zu vermeiden, Probleme mit den Verschlüssen. Es bindet frisches Wert, statt einen alten Verweis, wie gezeigt in den Beispielen unten.

DEMO

for(var i = 1; i < 6; i++) {
  document.getElementById('my-element' + i)
    .addEventListener('click', function() { alert(i) })
}

Obige Code zeigt eine klassische JavaScript-closure-problem. Verweis auf die i variable gespeichert wird im click-handler Schließung, eher als der tatsächliche Wert des i.

Jeder einzelne Klick-handler auf das gleiche Objekt beziehen, weil es nur ein Zähler-Objekt, das hält 6 so erhalten Sie sechs auf jeder klicken.

Allgemeine Problemumgehung ist, um wickeln Sie diesen in eine anonyme Funktion auf und übergeben i als argument. Solche Probleme können vermieden werden jetzt durch let statt var wie gezeigt im code unten.

DEMO (Getestet in Chrome und Firefox 50)

'use strict';

for(let i = 1; i < 6; i++) {
  document.getElementById('my-element' + i)
    .addEventListener('click', function() { alert(i) })
}

InformationsquelleAutor Gurpreet Singh

Hier ist ein Erklärung des lassen - Schlüsselwort mit einigen Beispielen.

lassen funktioniert sehr ähnlich wie var. Der Hauptunterschied ist, dass der Anwendungsbereich des var-variable die das gesamte einschließende Funktion

Diese Tabelle auf Wikipedia zeigt, welche Browser die Unterstützung von Javascript 1.7.

Beachten Sie, dass nur Mozilla und Chrome-Browsern unterstützt. IE, Safari und möglicherweise andere nicht.

InformationsquelleAutor Ben S

let

Blockbereich

Variablen deklariert, mit der let keyword-block-Bereich, was bedeutet, dass Sie verfügbar sind nur in der block, in dem Sie deklariert wurden.

Auf der obersten Ebene (außerhalb einer Funktion)

Auf der obersten Ebene werden die Variablen deklariert, mit let erstellen Sie keine Eigenschaften auf das Globale Objekt.

var globalVariable = 42;
let blockScopedVariable = 43;

console.log(globalVariable); //42
console.log(blockScopedVariable); //43

console.log(this.globalVariable); //42
console.log(this.blockScopedVariable); //undefined

Innerhalb einer Funktion

Innerhalb einer Funktion (aber außerhalb eines Blocks), let hat den gleichen Umfang wie var.

(() => {
  var functionScopedVariable = 42;
  let blockScopedVariable = 43;

  console.log(functionScopedVariable); //42
  console.log(blockScopedVariable); //43
})();

console.log(functionScopedVariable); //ReferenceError: functionScopedVariable is not defined
console.log(blockScopedVariable); //ReferenceError: blockScopedVariable is not defined

Innerhalb eines Blocks

Variablen deklariert, mit let innerhalb eines Blocks kann nicht zugegriffen werden, die außerhalb dieses Blocks.

{
  var globalVariable = 42;
  let blockScopedVariable = 43;
  console.log(globalVariable); //42
  console.log(blockScopedVariable); //43
}

console.log(globalVariable); //42
console.log(blockScopedVariable); //ReferenceError: blockScopedVariable is not defined

Innerhalb einer Schleife

Deklarierten Variablen mit let in Schleifen auf die verwiesen werden kann nur innerhalb dieser Schleife.

for (var i = 0; i < 3; i++) {
  var j = i * 2;
}
console.log(i); //3
console.log(j); //4

for (let k = 0; k < 3; k++) {
  let l = k * 2;
}
console.log(typeof k); //undefined
console.log(typeof l); //undefined
//Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.

Schleifen mit Verschlüssen

Wenn Sie let statt var in einer Schleife bei jeder iteration erhalten Sie eine neue variable. Das bedeutet, dass Sie können sicher mit einem Verschluss in einer Schleife.

//Logs 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

//Logs 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}

Zeitliche dead zone

Weil die zeitliche dead zone, Variablen deklariert, mit let kann nicht zugegriffen werden, bevor Sie deklariert sind. Der Versuch zu tun, so wirft einen Fehler.

console.log(noTDZ); //undefined
var noTDZ = 43;
console.log(hasTDZ); //ReferenceError: hasTDZ is not defined
let hasTDZ = 42;

Kein re-deklarieren

Kann man nicht erklären, die gleiche variable mehrfach mit let. Man kann auch nicht eine variable deklarieren, die mit let mit dem gleichen Bezeichner wie eine andere variable, die deklariert wurde mit var.

var a;
var a; //Works fine.

let b;
let b; //SyntaxError: Identifier 'b' has already been declared

var c;
let c; //SyntaxError: Identifier 'c' has already been declared

const

const ist ganz ähnlich wie let—es ist block-Gültigkeitsbereich und hat TDZ. Es gibt jedoch zwei Dinge, die anders sind.

Kein re-zuweisen

Variable deklariert, mit const können nicht neu belegt werden.

const a = 42;
a = 43; //TypeError: Assignment to constant variable.

Beachten Sie, dass es nicht bedeutet, dass der Wert unveränderlich ist. Seine Eigenschaften noch verändert werden kann.

const obj = {};
obj.a = 42;
console.log(obj.a); //42

Wenn Sie wollen, um ein immutable-Objekt verwenden, sollten Sie - Objekt.freeze().

Initialisierung erforderlich ist

Du immer einen Wert angeben muss bei der Deklaration einer Variablen, die mit const.

const a; //SyntaxError: Missing initializer in const declaration

InformationsquelleAutor Michał Perłakowski

• Variable Nicht Hochziehen

  let wird nicht hissen um den gesamten Umfang der Sperre, die Sie in angezeigt werden. Dagegen var könnte hoist, wie unten beschrieben.

  {
     console.log(cc); //undefined. Caused by hoisting
     var cc = 23;
  }
  
  {
     console.log(bb); //ReferenceError: bb is not defined
     let bb = 23;
  }

  Eigentlich Pro @Bergi, Sowohl var und lassen sind gehisst.

• Garbage Collection

  Block Rahmen let nützlich ist, bezieht sich auf Verschlüsse und die garbage collection, um Speicherplatz freizugeben. Überlegen Sie,

  function process(data) {
      //...
  }
  
  var hugeData = { .. };
  
  process(hugeData);
  
  var btn = document.getElementById("mybutton");
  btn.addEventListener( "click", function click(evt){
      //....
  });

  Den click handler callback muss nicht die hugeData variable überhaupt. Theoretisch, nach process(..) läuft, die riesigen Daten-Struktur hugeData könnte Müll gesammelt. Es ist jedoch möglich, dass einige JS-engine noch zu halten, diese riesige Struktur, da die click Funktion hat einen Verschluss über den gesamten Umfang.

  Jedoch, wird der block scope kann diese riesigen Daten-Struktur an Müll gesammelt.

  function process(data) {
      //...
  }
  
  { //anything declared inside this block can be garbage collected
      let hugeData = { .. };
      process(hugeData);
  }
  
  var btn = document.getElementById("mybutton");
  btn.addEventListener( "click", function click(evt){
      //....
  });

• let Schleifen

  let in der Schleife kann re-bindet es zu jeder iteration der Schleife, so dass Sie sicher, dass re-weisen Sie ihm den Wert aus der vorherigen Schleife iteration. Überlegen Sie,

  //print '5' 5 times
  for (var i = 0; i < 5; ++i) {
      setTimeout(function () {
          console.log(i);
      }, 1000);  
  }

  Jedoch ersetzen var mit let

  //print 1, 2, 3, 4, 5. now
  for (let i = 0; i < 5; ++i) {
      setTimeout(function () {
          console.log(i);
      }, 1000);  
  }

  Weil let erstellen Sie eine neue lexikalische Umgebung mit, diese Namen für a) die initialiser Ausdruck b) jede iteration (vorher die für die Beurteilung der Inkrement-Ausdruck), mehr Einzelheiten sind hier.

InformationsquelleAutor zangw

Hier ist ein Beispiel, um add-on zu dem, was andere bereits geschrieben haben. Angenommen, Sie wollen eine Reihe von Funktionen, die adderFunctions, wo jede Funktion nimmt ein einzelnes argument Zahl und gibt die Summe der Argumente und die Funktion index in das array. Zu erzeugen versuchen adderFunctions mit einer Schleife über die var keyword nicht so funktionieren, wie jemand vielleicht naiv erwarten:

//An array of adder functions.
var adderFunctions = [];

for (var i = 0; i < 1000; i++) {
  //We want the function at index i to add the index to its argument.
  adderFunctions[i] = function(x) {
    //What is i bound to here?
    return x + i;
  };
}

var add12 = adderFunctions[12];

//Uh oh. The function is bound to i in the outer scope, which is currently 1000.
console.log(add12(8) === 20); //=> false
console.log(add12(8) === 1008); //=> true
console.log(i); //=> 1000

//It gets worse.
i = -8;
console.log(add12(8) === 0); //=> true

Den obigen Vorgang nicht erzeugen die gewünschte array-Funktionen, da i's Geltungsbereich erstreckt sich über die iteration der for block, in dem jede Funktion erstellt wurde. Stattdessen wird am Ende der Schleife, die i in jeder Funktion die Schließung bezieht sich auf i's-Wert am Ende der Schleife (1000) für jeden anonymen Funktion in adderFunctions. Dies ist nicht das, was wir wollten: wir haben jetzt ein array mit 1000 verschiedenen Funktionen im Speicher mit genau dem gleichen Verhalten. Und wenn wir anschließend aktualisieren Sie den Wert von i die mutation wirkt sich auf alle adderFunctions.

Aber wir können versuchen, wieder mit der let Stichwort:

//Let's try this again.
//NOTE: We're using another ES6 keyword, const, for values that won't
//be reassigned. const and let have similar scoping behavior.
const adderFunctions = [];

for (let i = 0; i < 1000; i++) {
  //NOTE: We're using the newer arrow function syntax this time, but 
  //using the "function(x) { ..." syntax from the previous example 
  //here would not change the behavior shown.
  adderFunctions[i] = x => x + i;
}

const add12 = adderFunctions[12];

//Yay! The behavior is as expected. 
console.log(add12(8) === 20); //=> true

//i's scope doesn't extend outside the for loop.
console.log(i); //=> ReferenceError: i is not defined

Dieser Zeit i ist der Rückstoß bei jeder iteration der for Schleife. Jede Funktion, die jetzt hält den Wert von i an der Zeit, von der Funktion der Schöpfung, und adderFunctions verhält sich wie erwartet.

Jetzt Bild mischen der zwei Verhaltensweisen, und Sie werden wahrscheinlich sehen, warum es nicht empfehlenswert ist die Mischung der neueren let und const mit den älteren var im selben Skript. Hierdurch kann sich die ist einige der spektakulär verwirrenden code.

const doubleAdderFunctions = [];

for (var i = 0; i < 1000; i++) {
    const j = i;
    doubleAdderFunctions[i] = x => x + i + j;
}

const add18 = doubleAdderFunctions[9];
const add24 = doubleAdderFunctions[12];

//It's not fun debugging situations like this, especially when the
//code is more complex than in this example.
console.log(add18(24) === 42); //=> false
console.log(add24(18) === 42); //=> false
console.log(add18(24) === add24(18)); //=> false
console.log(add18(24) === 2018); //=> false
console.log(add24(18) === 2018); //=> false
console.log(add18(24) === 1033); //=> true
console.log(add24(18) === 1030); //=> true

Lassen Sie dieses nicht Ihnen geschehen. Verwenden Sie eine linter.

HINWEIS: Dies ist ein Lehr-Beispiel soll zeigen das var/let Verhalten in Schleifen und mit Funktionshüllen, dass wäre auch einfach zu verstehen. Dies wäre eine schreckliche Art und Weise, um zahlen zu addieren. Aber die Allgemeine Technik der Erfassung der Daten in anonyme Funktion Verschlüsse möglicherweise werden angetroffen in der realen Welt auch in anderen Kontexten. YMMV.

InformationsquelleAutor abroz

Können die folgenden zwei Funktionen die den Unterschied zu zeigen:

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

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

InformationsquelleAutor Abdennour TOUMI

Funktion VS block-scope:

Den wichtigsten Unterschied zwischen var und let ist, dass Variablen, die mit var sind Funktion Gültigkeitsbereich. In der Erwägung, dass die Funktionen deklariert, mit let sind block Gültigkeitsbereich. Zum Beispiel:

function testVar () {
  if(true) {
    var foo = 'foo';
  }

  console.log(foo);
}

testVar();  
//logs 'foo'


function testLet () {
  if(true) {
    let bar = 'bar';
  }

  console.log(bar);
}

testLet(); 
//reference error
//bar is scoped to the block of the if statement 

Variablen mit var:

Wenn die erste Funktion testVar aufgerufen wird, die variable foo deklariert, mit var ist noch von außen zugänglich if - Anweisung. Diese variable foo zur Verfügung stehen würde überall im Rahmen der testVar Funktion.

Variablen mit let:

Wenn die zweite Funktion testLet aufgerufen wird, wird die variable bar, deklariert mit let ist nur innen zugänglich if - Anweisung. Da die deklarierten Variablen mit let sind block Gültigkeitsbereich (wo ein block ist der code zwischen den geschweiften Klammern.e.g if{} , for{}, function{}).

let Variablen nicht bekommen gehisst:

Weiterer Unterschied zwischen var und let ist Variablen deklariert, mit let nicht bekommen gehisst. Ein Beispiel ist der beste Weg, um dieses Verhalten zu veranschaulichen:

Variablen mit let nicht bekommen gehisst:

console.log(letVar);

let letVar = 10;
//referenceError, the variable doesn't get hoisted

Variablen mit var tun bekommen gehisst:

console.log(varVar);

var varVar = 10;
//logs undefined, the variable gets hoisted

Globalen let nicht befestigt bekommen window:

Eine variable deklariert mit let im globalen Bereich (also code, der nicht in einer Funktion) nicht Hinzugefügt als eine Eigenschaft der globalen window Objekt. Zum Beispiel (dieser code steht im globalen scope):

var bar = 5;
let foo  = 10;

console.log(bar); //logs 5
console.log(foo); //logs 10

console.log(window.bar);  
//logs 5, variable added to window object

console.log(window.foo);
//logs undefined, variable not added to window object

Wann sollte let verwendet werden var?

Verwenden let über var Wann immer Sie können, weil es einfach scoped mehr spezifischen. Dies reduziert mögliche Namenskonflikte, die auftreten können, wenn der Umgang mit einer großen Anzahl von Variablen. var verwendet werden können, wenn Sie möchten, eine Globale variable, die nicht ausdrücklich auf die window Objekt (immer sorgfältig prüfen, ob dies wirklich notwendig ist).

InformationsquelleAutor Willem van der Veen

Bei Der Verwendung let

Den let Schlüsselwort legt die Deklaration von Variablen der Geltungsbereich von was auch immer-block (in der Regel { .. } - pair-Mädchen) es ist auch enthalten in. In anderen Worten,let implizit entführt jedem block Gültigkeitsbereich für die Variablen-Deklaration.

let Variablen kann nicht zugegriffen werden, in der window Objekt, weil Sie nicht Global zugegriffen.

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

Bei Der Verwendung var

var und Variablen in ES5 hat-Bereichen in Funktionen Bedeutung der Variablen sind gültig innerhalb der Funktion und nicht außerhalb der Funktion selbst.

var - Variablen zugegriffen werden, die in der window Objekt, weil Sie nicht Global zugegriffen.

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

einer der bekanntesten interview-Fragen in Bezug auf den Anwendungsbereich kann auch ausreichen, die genaue Verwendung der let und var als unten;

Bei der Verwendung let

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

Denn bei Verwendung let für jeden loop-Durchlauf die variable den Gültigkeitsbereich und hat seine eigene Kopie.

Bei der Verwendung var

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

Denn bei Verwendung var für jeden loop-Durchlauf die variable den Gültigkeitsbereich und hat gemeinsam kopieren.

InformationsquelleAutor Ankur Soni

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)

InformationsquelleAutor zloctb

Bisher gab es nur zwei Gültigkeitsbereiche in JavaScript, d.h. die funktionalen und global. Mit ' let " keyword JavaScript hat jetzt eingeführt block-level Variablen.

Haben ein komplettes Verständnis von der 'let' Schlüsselwort
ES6: "let' Schlüsselwort zum deklarieren von Variablen in JavaScript helfen.

InformationsquelleAutor Hitesh Garg

Dieser Artikel legt eindeutig fest, der Unterschied zwischen var, let und const

const ist ein signal, dass die Kennung nicht erneut zugewiesen werden.

let, ist ein signal, dass die variable neu zugewiesen werden können, wie ein
Zähler in einer Schleife, oder eine swap-Wert in einem Algorithmus. Es signalisiert auch
dass die variable nur dann verwendet werden, in der der block definiert wird,
was nicht immer der gesamte mit Funktion.

var ist nun das schwächste signal zur Verfügung, wenn Sie eine variable definieren
in JavaScript. Die variable kann oder kann nicht neu zugewiesen werden, und die
variable kann oder kann nicht verwendet werden, für eine gesamte Funktion, oder einfach nur für
der Zweck eines block-oder-Schleife.

https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75#.esmkpbg9b

InformationsquelleAutor anandharshan

Werfen Sie einen Blick auf dieses Bild, habe ich ein sehr einfaches Beispiel für die demonstration der const und let Variablen. Wie Sie sehen können, wenn Sie versuchen, sich zu ändern const variable, erhalten Sie die Fehlermeldung (Versuchen zu überschreiben 'name' die Konstante'), aber werfen Sie einen Blick auf let variable...

Zuerst erklären wir let age = 33, und später weisen Sie einen anderen Wert age = 34;, das ist ok, wir haben keinen Fehler wenn wir versuchen zu ändern let variable

InformationsquelleAutor Mile Mijatovic

lassen vs var. Es ist alles über Umfang.

var Variablen sind global und zugegriffen werden kann, im Grunde überall, während lassen-Variablen werden nicht global und existieren so lange, bis eine schließende Klammer tötet Sie.

Siehe mein Beispiel unten, und beachten Sie, wie der Löwe (lassen) variable verhält sich das anders in den zwei Konsolen.protokolliert werden; es wird von scope in die 2. Konsole.log.

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.

InformationsquelleAutor daCoda