web-dev-qa-db-fra.com

Quelle est la différence entre 'let' et 'const' ECMAScript 2015 (ES6)?

Je me demande quelle est la différence entre let et const dans ES6. Les deux ont une portée, comme dans le code suivant:

const PI = 3.14;
console.log(PI);

PI = 3;
console.log(PI);

const PI = 4;
console.log(PI);

var PI = 5;
console.log(PI);

Dans ES5, le résultat sera:

3.14
3.14
3.14
3.14

Mais dans ES6 ce sera:

3.14
3
4
5

Je me demande pourquoi ES6 autorise le changement de la valeur const; la question est de savoir pourquoi devrions-nous utiliser 'const' maintenant? on peut utiliser 'let' à la place?

Remarque: jsbin peut être utilisé pour les tests. Choisissez JavaScript pour exécuter le code ES5 et Traceur pour l'exécuter avec les fonctionnalités ES6.

javascriptecmascript-5ecmascript-6
43
Hazem Hagrass

Ce que vous voyez n'est qu'une erreur de mise en œuvre. Selon le ES6 spec wiki sur const , const est:

Un formulaire de liaison initialize, une fois seulement en lecture seule, est utile et contient précédent dans les implémentations existantes, sous la forme de const déclarations.

Il est conçu pour être en lecture seule, tout comme il l'est actuellement. L’implémentation de const dans Traceur et Continuum dans ES6 est très complexe

Voici un problème Github concernant le fait que Traceur n’applique pas const

21
Some Guy

La différence entre let et const est qu’une fois que vous liez une valeur/un objet à une variable en utilisant const, vous ne pouvez pas réaffecter à cette variable. Exemple:

const something = {};
something = 10; // Error.

let somethingElse = {};
somethingElse = 1000; // This is fine.

Notez que const ne fait pas quelque chose d'immuable.

const myArr = [];
myArr.Push(10); // Works fine.

La meilleure façon de rendre un objet (peu profond) immuable pour le moment est d’utiliser Object.freeze() dessus.

51
Thomas Foster

laisser

  • Utilisez la portée du bloc dans la programmation.
  • pour chaque bloc, créez sa propre nouvelle portée à laquelle vous ne pouvez pas accéder en dehors de ce bloc.
  • la valeur peut être modifiée autant de fois que vous le souhaitez.

  • let est extrêmement utile pour la grande majorité du code. Cela peut grandement améliorer la lisibilité de votre code et réduire les risques d'erreur de programmation.

    let abc = 0;

if(true)
 abc = 5 //fine

if(true){
  let def = 5
}
console.log(def)

const

  • Cela vous permet d'être immuable avec les variables.

  • const est une bonne pratique pour la lisibilité et la maintenabilité et évite d'utiliser des littéraux magiques, par exemple.

    // Low readability
if (x > 10) {
}

//Better!
const maxRows = 10;
if (x > maxRows) {
 }

  • les déclarations const doivent être initialisées

     const foo; // ERROR: const declarations must be initialized
  • Un const est bloqué comme nous l’avons vu avec let: +
const foo = 123;
if (true) {
    const foo = 456; // Allowed as its a new variable limited to this `if` block
}
6
Pardeep Jain

let et const  

Les variables déclarées avec let et const éliminent un problème spécifique de levage, car elles concernent le bloc, pas la fonction.

Si une variable est déclarée à l'aide de let ou const à l'intérieur d'un bloc de code (indiqué par des accolades {}), la variable est bloquée dans ce que l'on appelle la zone morte temporelle jusqu'à ce que la déclaration de la variable soit traitée. Ce comportement empêche l’accès aux variables uniquement après leur déclaration.

Règles d'utilisation de let et const  

let et const ont aussi d'autres propriétés intéressantes.

  • Les variables déclarées avec let peuvent être réaffectées, mais ne peuvent pas être redéclarées Dans la même portée.
  • Les variables déclarées avec const doivent se voir attribuer une valeur initiale, mais .__ ne peut pas être redéclaré dans la même portée ni être réaffecté.

Cas d'utilisation  

La grande question est de savoir quand utiliser let et const? La règle générale est la suivante:

  • utilisez let lorsque vous prévoyez de réaffecter de nouvelles valeurs à une variable, et
  • utilisez const lorsque vous ne prévoyez pas de réaffecter de nouvelles valeurs à une variable

Puisque const est le moyen le plus strict de déclarer une variable, il est suggéré de toujours déclarer les variables avec const, car cela facilitera la tâche de votre code car vous savez que les identificateurs ne changeront pas pendant la durée de vie de votre programme. Si vous trouvez que vous devez mettre à jour ou modifier une variable, revenez en arrière et passez-la de const à let.

1
Dhairya Lakhera

Résumé:

Les mots clés let et const permettent de déclarer des variables block scoped. Il y a une grande différence cependant:

  • Les variables déclarées avec let peuvent être réaffectées.
  • Les variables déclarées avec const doivent être initialisées lorsqu'elles sont déclarées et ne peuvent pas être réaffectées.

Si vous essayez de réaffecter des variables avec déclaré avec le mot clé const, vous obtiendrez l'erreur suivante (chrome devtools):

 const reassignment error

Pourquoi devrions-nous utiliser cela?

Si nous savons que nous voulons affecter une variable une fois et que nous ne voulons pas la réaffecter, l'utilisation des mots clés const offre les avantages suivants:

  • Nous communiquons dans notre code que nous ne voulons pas réaffecter la variable. Ainsi, si d'autres programmeurs consultent votre code (ou même votre code que vous avez écrit il y a longtemps), vous savez que les variables déclarées avec const ne doivent pas être réaffectées. De cette façon, notre code devient plus déclaratif et plus facile à utiliser.
  • On force le principe de ne pas pouvoir réaffecter une variable (le moteur JS lève une erreur). Ainsi, si vous essayez accidentellement de réaffecter une variable qui n'est pas censée être réaffectée, vous pouvez le détecter plus tôt (car il est enregistré dans la console).

Caveat:

Bien qu'une variable déclarée avec const ne puisse pas être réaffectée, cela ne signifie pas qu'un objet assigné ne peut pas être modifié. Par exemple:

const obj = {prop1: 1}

// we can still mutate the object assigned to the 
// variable declared with the const keyword
obj.prop1 = 10;
obj.prop2 = 2;

console.log(obj);

Si vous souhaitez également que votre objet soit non-modifiable, vous pouvez utiliser Object.freeze() afin d’y parvenir.

1
Willem van der Veen

ES6 let et const

La nouvelle let vous permet de déclarer une variable dont la portée est limitée au bloc (variable locale). La principale différence est que la portée d'une variable var correspond à l'ensemble de la fonction englobante:

if (true) {
  var foo = 42; // scope globally
}

console.log(foo); // 42

Utilisation de let par blocs: 

if (true) {
  let foo = 42; // scoped in block
}

console.log(foo); // ReferenceError: bar is not defined

Utiliser var dans la portée de la fonction revient à utiliser let:

function bar() {
  var foo = 42; // scoped in function
}

console.log(foo); // ReferenceError: bar is not defined

Le mot clé let attache la déclaration de variable à la portée du bloc dans lequel il est contenu. D'autre part, l'utilisation de ES6 const est très similaire à l'utilisation de let, mais une fois assignée, elle ne peut pas être modifiée. Utilisez const comme valeur immuable pour éviter que la variable ne soit réattribuée accidentellement:

const num = 42;

try {
  num = 99;
} catch(err) {
  console.log(err);
  // TypeError: invalid assignment to const `number'

}

num; // 42

Utilisez const pour affecter des variables constantes dans la vie réelle (par exemple, température de congélation, IP, date de naissance, etc.). Il est toujours recommandé d'utiliser uniquement let et const. Ainsi, vous supprimez le comportement sujet aux erreurs avec le levage variable. JavaScript const ne concerne pas la création de valeurs non modifiables, il n'a rien à voir avec la valeur, const permet d'éviter de réaffecter une autre valeur à la variable et de placer celle-ci dans un état en lecture seule. Cependant, les valeurs peuvent toujours être modifiées:

const arr = [0, 1, 2];
arr[3] = 3; // [0, 1, 2, 3]

Pour éviter que la valeur ne change, utilisez Object.freeze():

let arr = Object.freeze([0, 1, 2]);
arr[0] = 5;

arr; // [0, 1, 2]

Un cas particulier où let est vraiment utile est dans la boucle for:

for (let i = 0; i <= 5; i++) {
  console.log(i);
}

// 0 1 2 3 4 5

console.log(i); // ReferenceError, great! i is not global
0
Shakespear

Voici quelques notes que j'ai prises qui m'a aidé sur ce sujet. Comparez également const et let à var.

Voici à propos de var:

// Var
// 1. var is hoisted to the top of the function, regardless of block
// 2. var can be defined as last line and will be hoisted to top of code block
// 3. for undefined var //output error is 'undefined' and code continues executing
// 4. trying to execute function with undefined variable
// Example: // log(myName); // output: ReferenceError: myName is not defined and code stops executing

Voici à propos de let et const:

// Let and Const
// 1. use `const` to declare variables which won't change
// 2. `const` is used to initialize-once, read-only thereafter
// 3. use `let` to declare variables which will change
// 4. `let` or `const` are scoped to the "block", not the function
// 5. trying to change value of const and then console.logging result will give error
// const ANSWER = 42;
// ANSWER = 3.14159;
// console.log(ANSWER);
// Error statement will be "TypeError: Assignment to constant variable." and code will stop executing
// 6. `let` won't allow reference before definition
// function letTest2 () {
//   log(b);
//   let b = 3;}
// Error statement will be "ReferenceError: b is not defined." and code will stop executing
0
Kean Amaral