Const & Let

4

let et const permettent de stocker une valeur, au même titre que var. Cependant, ils sont plus performants et permettent de régler certains problèmes associés à var.

Const

La variable const est une abbréviation du terme constante. Par exemple, la variable const film = "Wayne's World" ne pourra jamais être mise à jours. Une redéclaration, par exemple: film = "Wayne's World 2", entrainerait une erreur.

Uncaught SyntaxError: Identifier 'film' has already been declared

Cependant, si une const contient un objet, redéclarer la valeur d'une de ses propriétés est valide.

Par exemple:

const wayne = {
  ville: "Aurora",
  copine: "Stacy"
};

Suivi de:

wayne.copine = "Cassandra"

N'entraînera aucune erreur, puisque seulement une propriété et non l'objet en entier a été mis à jour.

Si const wayne = { ville: "Aurora", copine: "Stacy" }; avait été suivi de wayne = { copine: "Cassandra" };, une erreur aurait été générée, car l'ensemble de la variable wayne aurait été remplacée par un nouvel objet.

Let

Contrairement à const, la variable let est plus permissive et peut être mise à jour sans problème.

Contexte (scope)

let et const ont un contexte de bloc. Leur contexte est donc toujours limité par les accolades {}, que ce soit celles d'une fonction ou encore celles d'un if.

Par exemple:

let voiture = false;
let engagement = false;

if (voiture === false) {
  let engagement = true;
  console.log(engagement) // true
}

console.log(engagement) // false

Ceci est possible, car les deux variables engagement sont considérées comme étant deux variables différentes, puisqu'elles ont un contexte différent.

Tandis que les variables définies avec var ont un contexte de fonction. Leur contexte est donc global, à moins de se trouver entre les accolades {} d'une fonction.

Le même exemple produirait donc le résultat suivant.

var voiture = false;
var engagement = false;

if (voiture === false) {
  var engagement = true;
  console.log(engagement) // true
}

console.log(engagement) // true

Redéfinition d'une variable

Imaginons la variable suivante var film = "Wayne's world" et que plus tard, par manque d'imagination, une nouvelle variable est définie à nouveau avec le même nom:
var film = "Wayne's world 2".

Que ce passera t'il?

Il serait logique de croire que JavaScript nous avertira que la variable film existe déjà et donc qu'elle ne peut pas être recréée.

Malheureusement, une variable définie via le mot-clé var accepte d'être définie plusieurs fois 🤦‍♂️. Chaque nouvelle définition ne fait que mettre à jour la valeur assignée à la variable, ce qui peut engendrer des erreurs difficiles à repérer.

Heureusement, une variable définie avec let ou const nous avertira si nous tentons de créer une deuxième variable utilisant le même nom.

Uncaught SyntaxError: Identifier 'film' has already been declared

Choisir entre var, const et let

Choisir entre var, const et let peut être un dilemme.

Prenant pour acquis qu'une variable const expose la vocation d'une variable plus explicitement, puisqu'elle indique une valeur qui ne devrait jamais changée, contrairement à let et var et considérant les avantages de const et let sur var, cet ordre d'utilisation ce veut une bonne règle du pouce 👍

  1. const (par défaut)
  2. let si une variable doit être réassignée
  3. var en dernier recours

Pour en savoir plus, voir cet article MDN🦖 traitant de const
et cet article traitant de let.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme