Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

2.3. Les nouveaux mots clés : « let » & « const »

Le mot-clé let permet de déclarer une variable locale dans le contexte où elle a été assignée (Un contexte est le terme français pour désigner un scope en Anglais).

Par exemple, les instructions que vous écrivez dans le corps d’une fonction ou à l’extérieur n’ont pas le même contexte. Normalement une instruction if n’a pas de contexte en soi, mais maintenant si, avec le mot clé let. Cela peut être utile pour effectuer beaucoup d’opérations sur une variable, sans polluer d’autres contextes avec des variables qui ne sont pas nécessaires :

var x = 1; 
if(x < 10) { 
 let v = 1; 
 v = v + 21; 
 console.log(v); 
} 
// v n'est pas définie, car v a été déclarée avec 'let' et non 'var'.
console.log(v);

Et cela fonctionne pour les boucles également !

for (let i = 0; i < 10; i++) { 
 console.log(i); // 0, 1, 2, 3, 4 ... 9 
}
// i n'est pas défini hors du contexte de la boucle
console.log(i);

En général, garder un contexte global propre est vivement conseillé et c’est pourquoi ce mot clé est vraiment le bienvenu ! Sachez que let a été pensé pour remplacer var, alors nous n’allons pas nous en priver dans ce cours.

Le mot clé const quant à lui, permet de déclarer … des constantes ! Voyons comment cela fonctionne :

const PI = 3.141592;

Une déclaration de constante ne peut se faire qu’une fois, une fois définie, vous ne pouvez plus changer sa valeur :

PI = 3.14 // Erreur : la valeur de PI ne peut plus être modifiée

C’est bien pratique si vous avez besoin de définir des valeurs une bonne fois pour toutes dans votre application.

Cependant, le comportement est un peu différent pour une constante de tableau ou d’objet. Vous ne pouvez pas modifier la référence vers le tableau ou l’objet, mais vous pouvez continuer à modifier les valeurs du tableau, ou les propriétés de l’objet :

const MATHEMATICAL_CONSTANTS = {PI: 3.141592, e: 2,718281}; 
MATHEMATICAL_CONSTANTS.PI = 3.142; // Aucun problème.

Une dernière chose. En JavaScript, comme dans beaucoup d’autres langages, il existe des mots-clés réservés. Ce sont des mots que vous ne devez pas utiliser comme noms de variables, de fonctions ou de méthodes, car JavaScript a une utilisation spéciale pour eux. Voici quelques exemples de mots-clés : ifelsenewvarfor … mais également class ou super !

Retrouvez la liste exhaustive des mots-clés réservés JavaScript (ES6 compris) ici.