Quand utiliser var, let ou const ?

var, c’est fini

On peut commencer par évacuer var, qui ne devrait plus être utilisé, car ses règles de scoping sont sources d’erreur par rapport au fonctionnement de let et const.

const et let pour scoper les variables à un bloc

const et let sont les deux mots-clé permettant de déclarer une variable, en JavaScript (à partir de ES6) et en TypeScript.

Les variables déclarées avec let et const sont scopées à leur bloc de déclaration, c’est-à-dire qu’elles n’existent que dans ce bloc. Ainsi, on a le comportement suivant :

const a = 'foo';

if (true === true) {
  // La variable `a` qui vaut "bar" n'existe que dans ce bloc
  // Elle n'écrase pas la variable `a` définie à l'extérieur du bloc
  const a = 'bar';
}

console.log(a);  // Affiche "foo"

En JavaScript, un bloc est créé par une paire d’accolades ; on va donc avoir un bloc à chaque fois qu’on utilise l’une des syntaxes suivantes (liste non exhaustive) :

// Test
if (...) {
  // bloc
}

// Boucle
for (...) {
  // bloc
}

// Une classe
class Foo {
  // bloc
}

// Fonction
function foo() {
  // bloc
}

const pour les variables non réassignables

const permet de déclarer une variable qui doit avoir une valeur initiale et ne peut pas être réassignée.

const a = 'foo';
a = 'bar';  // Erreur, car `a` ne peut pas être réassignée

ATTENTION. Cela ne veut pas dire qu’une variable déclarée avec const est une constante.

Par exemple, si la variable contient un objet, on peut modifier les propriétés de cet objet. Si la variable contient un tableau, on peut ajouter ou retirer des membres du tableau. Autrement dit, la valeur d’une const n’est PAS immutable.

const names = ['Pierre', 'Paul'];
names.push('Jacques');   // OK, le tableau peut changer

const person = {name: 'Pierre'};
person.name = 'Paul';  // OK, l'objet peut changer

let pour les variables réassignables

let permet de déclarer une variable qui peut ne pas avoir de valeur initiale et qui peut être réassignée.

let html;                          // `html` est undefined
html = '<p>';                      // OK, `html` peut être réassignée
html = html + message + '</p>';    // OK, `html` peut être réassignée


Ressources supplémentaires

Informations

Tags : es6typescript

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne