JavaScript Différence entre var et let


Exemple

(Remarque: tous les exemples utilisant let sont également valables pour const )

var est disponible dans toutes les versions de JavaScript, alors que let et const font partie d'ECMAScript 6 et sont uniquement disponibles dans certains navigateurs récents .

var est portée à la fonction contenant ou à l'espace global, selon qu'elle est déclarée:

var x = 4; // global scope

function DoThings() {
    var x = 7; // function scope
    console.log(x);
}

console.log(x); // >> 4
DoThings();     // >> 7
console.log(x); // >> 4

Cela signifie qu'il "échappe" if instructions et toutes les constructions de blocs similaires:

var x = 4;
if (true) {
    var x = 7;
}
console.log(x); // >> 7

for (var i = 0; i < 4; i++) {
    var j = 10;
}
console.log(i); // >> 4
console.log(j); // >> 10

À titre de comparaison, let champ d’attente:

let x = 4;

if (true) {
    let x = 7;
    console.log(x); // >> 7
}

console.log(x); // >> 4

for (let i = 0; i < 4; i++) {
    let j = 10;
}
console.log(i); // >> "ReferenceError: i is not defined"
console.log(j); // >> "ReferenceError: j is not defined"

Notez que i et j ne sont déclarés que dans la boucle for et sont donc non déclarés en dehors de celle-ci.

Il existe plusieurs autres différences cruciales:

Déclaration de variable globale

Dans la portée supérieure (en dehors des fonctions et des blocs), les déclarations var placent un élément dans l'objet global. let ne pas:

var x = 4;
let y = 7;

console.log(this.x); // >> 4
console.log(this.y); // >> undefined

Re-déclaration

Déclarer une variable deux fois en utilisant var ne produit pas d'erreur (même si cela équivaut à la déclarer une fois):

var x = 4;
var x = 7;

Avec let , cela produit une erreur:

let x = 4;
let x = 7;

TypeError: l'identifiant x a déjà été déclaré

La même chose est vraie lorsque y est déclaré avec var :

var y = 4;
let y = 7;

TypeError: l'identifiant y a déjà été déclaré

Cependant les variables déclarées avec let peuvent être réutilisées (non re-déclarées) dans un bloc imbriqué

let i = 5;    
{
   let i = 6;
   console.log(i); // >> 6
}
console.log(i); // >> 5

Au sein du bloc l'extérieur i est inaccessible, mais si le bloc a une à l' intérieur let déclaration pour i , l'extérieur i ne peux pas être accessible et jetterai un ReferenceError si elle est utilisée avant la seconde est déclarée.

let i = 5;
{
    i = 6;  // outer i is unavailable within the Temporal Dead Zone
    let i;
}

ReferenceError: i n'est pas défini

Levage

Les variables déclarées à la fois avec var et let sont hissées . La différence est qu’une variable déclarée avec var peut être référencée avant sa propre affectation, car elle est automatiquement attribuée (avec une valeur undefined ), mais let peut pas - elle exige spécifiquement que la variable soit déclarée avant d’être invoquée:

console.log(x); // >> undefined
console.log(y); // >> "ReferenceError: `y` is not defined"
//OR >> "ReferenceError: can't access lexical declaration `y` before initialization"
var x = 4;
let y = 7;

La zone située entre le début d'un bloc et une déclaration let ou const est appelée zone morte temporelle , et toute référence à la variable dans cette zone provoquera une ReferenceError . Cela se produit même si la variable est affectée avant d'être déclarée :

y=7; // >> "ReferenceError: `y` is not defined"
let y;

En mode non strict, l' affectation d'une valeur à une variable sans déclaration déclare automatiquement la variable dans la portée globale . Dans ce cas, au lieu de y étant automatiquement déclaré dans la portée globale, let le nom de la variable ( y ) en réserve et n'autorisez aucun accès ou affectation avant la ligne où il est déclaré / initialisé.