let et const — contrôler réaffectation et redéclaration

Que tu totalises une commande ou affiches le nom de l'utilisateur connecté, tu dois donner un nom à une valeur pour pouvoir la référencer plusieurs fois. Ce nom est une variable (un nom attaché à une valeur — écris le nom, et tu récupères la même valeur).

JavaScript te donne deux façons de créer une variable, const et let, et celle que tu choisis décide si tu peux mettre une valeur différente plus tard.

Nommer une valeur — choisir entre const et let

Écris la même valeur directement à plusieurs endroits dans ton code, et tu devras traquer chaque occurrence quand elle devra changer. Donne un nom dès le départ à des valeurs comme un prix unitaire ou un taux de taxe, et référence ce nom ensuite.

La ligne où tu la nommes s'appelle une déclaration (la ligne qui crée le nom d'une variable et lui donne sa première valeur).

Une déclaration JavaScript décide, au moment même où elle crée le nom, si le contenu de ce nom pourra être remplacé plus tard. Utilise const si non, let si oui.

Mettre une valeur différente dans un nom déjà existant s'appelle une réaffectation (donner plus tard une valeur différente à un nom déjà déclaré). Un nom déclaré avec const ne peut pas être réaffecté, donc une bonne règle par défaut est d'écrire const en premier, et de passer à let seulement quand une ligne a besoin de le réaffecter.

const — pour les valeurs que tu ne remplaceras pas

const fixe une valeur sur la ligne où tu la déclares, et ce nom ne prend jamais une valeur différente après ça. Des choses comme un nom de produit, un prix unitaire, ou un taux de taxe — des valeurs qui restent identiques pendant que le traitement continue — ont leur place ici, et c'est le cas de la plupart des valeurs d'un programme.

Une suite de caractères entourée de guillemets, comme "Mug isotherme", s'appelle une chaîne, et un nombre comme 1200 est un nombre. Les deux sont couverts en détail dans les articles 3 et 4.

console.log, qui apparaît dans l'exemple de code suivant, est l'instruction qui affiche à l'écran de résultats, sous forme de texte, la valeur que tu lui passes entre parenthèses. La console de ce site n'a pas d'écran, donc tu lui passes n'importe quelle valeur que tu veux vérifier.

Tout ce qui va de // jusqu'à la fin de la ligne est un commentaire (du texte explicatif laissé dans le code qui ne s'exécute jamais) et n'apparaîtra pas dans la sortie. Les lignes comme // ① déjà écrites dans les exercices sont ce même genre de note.

// Les valeurs que tu ne remplaceras pas utilisent const
const productName = "Mug isotherme";
const unitPrice = 1200;

console.log(productName);   // Mug isotherme
console.log(unitPrice);     // 1200

Stocke un produit d'une boutique en ligne dans des variables et affiche-le.

① Déclare productName comme "Mug isotherme", unitPrice comme 1200, et quantity comme 3, tous avec const.

② Affiche le contenu de productName.

③ Calcule le sous-total à partir du prix unitaire et de la quantité, et affiche-le.

(Si tout s'exécute correctement, une explication apparaîtra.)

let — les variables dans lesquelles tu mettras des valeurs plus tard

Utilise let pour des choses comme un compte de stock ou un total en cours — des valeurs dont le contenu change au fil du traitement. Le côté droit de = lit la valeur actuelle telle quelle, donc tu peux lire la valeur actuelle, calculer avec, et réaffecter le résultat au même nom.

let orderTotal = 0;

orderTotal = orderTotal + 1200;  // Lit le 0 actuel, ajoute 1200, réaffecte
orderTotal = orderTotal + 400;   // Lit le 1200 actuel, ajoute 400, réaffecte

console.log(orderTotal);         // 1600

Le stock d'un entrepôt change à chaque expédition et livraison. stockCount est déjà déclaré avec let.

① Après une expédition qui réduit le stock de 3, réaffecte le nouveau total à stockCount et affiche-le.

② Ensuite, après une livraison qui ajoute 10, réaffecte le nouveau total à stockCount et affiche-le.

Réaffectation vs redéclaration — deux erreurs qui arrêtent l'exécution

Choisir const signifie décider, directement dans le code, que le contenu de ce nom ne change jamais.

Assigne-lui une valeur différente après ça, et JavaScript arrête l'exécution sur cette ligne et lève un TypeError (une erreur pour l'utilisation incorrecte d'une valeur). Rien après cette ligne ne s'exécute.

L'autre façon d'arrêter l'exécution est la redéclaration (déclarer à nouveau un nom déjà utilisé dans la même portée). Ni const ni let ne l'autorisent — tu obtiens une SyntaxError (une erreur pour du code qui ne suit pas du tout la grammaire du langage).

Ça attrape immédiatement les fautes de frappe dans les noms, ou un nom réutilisé accidentellement pour autre chose.

let cartQuantity = 1;
let cartQuantity = 2;
// SyntaxError: Identifier 'cartQuantity' has already been declared

Si tout ce que tu veux, c'est mettre une nouvelle valeur, déclare-la une seule fois, puis assigne au nom à chaque ligne suivante. Une ligne sans mot-clé de déclaration est une réaffectation, donc avec let, ça n'arrête pas l'exécution.

let itemQuantity = 1;

itemQuantity = 2;            // Pas de mot-clé de déclaration, donc c'est une réaffectation
console.log(itemQuantity);   // 2

Les erreurs apparaissent à des moments différents

Le TypeError d'une réaffectation apparaît sur cette ligne, une fois que l'exécution y arrive — donc tout ce qui s'est exécuté avant apparaît encore dans la sortie.

La SyntaxError d'une redéclaration apparaît pendant l'analyse du code, donc rien ne s'exécute, pas même la ligne 1. Si tu ne vois aucune sortie du tout, soupçonne d'abord une erreur de syntaxe.

Les valeurs qui ne changent pas, comme un taux de taxe, sont déclarées avec const. Le code ci-dessous tente de réaffecter ce taux de taxe après coup. Exécute-le tel quel et vérifie jusqu'où ça va et quel message l'arrête. (Cette fois tu exécutes juste le code et tu lis le résultat — pas de modification.)

Nommer les variables — camelCase et caractères autorisés

Un nom de variable, c'est là où tu dis au lecteur ce qu'est réellement la valeur. Des noms comme a ou data te renvoient à la déclaration à chaque fois que tu lis une ligne lointaine. Des noms comme unitPrice ou stockCount permettent de lire le contenu directement à partir du nom.

Les noms peuvent utiliser lettres, chiffres, underscores, et le symbole dollar, et ne peuvent pas commencer par un chiffre. La casse compte, donc stockcount et stockCount sont des variables différentes.

Les mots auxquels JavaScript a déjà donné un sens, comme const / let / if (mots réservés), ne peuvent pas être utilisés comme noms.

Pour les noms composés de deux mots ou plus, utilise le camelCase (le premier mot commence en minuscule, seule la première lettre de chaque mot suivant est en majuscule). priceWithTax ou orderTotal ont cette forme.

Les fonctions et propriétés intégrées de JavaScript suivent la même forme, donc s'y aligner évite que tes propres noms se distinguent.

const listPrice = 1250;
const discountRate = 0.15;                 // 15% de réduction membre

// Le nom te dit ce qu'est ce montant
const discountedPrice = listPrice * (1 - discountRate);
console.log(discountedPrice);              // 1062.5

// Arrondit au centime inférieur
console.log(Math.floor(discountedPrice));  // 1062

Calcule le total pour 2 unités d'un article alimentaire taxé au taux réduit de 8 %. unitPrice, quantity, et taxRate sont déjà déclarés.

① Stocke le sous-total avant taxe dans une variable au nom en camelCase.

② Stocke le prix TTC — le sous-total avec la taxe appliquée — dans un autre nom en camelCase, et affiche-le.

Pourquoi pas var

L'ancien code et les anciens tutoriels introduisent une troisième déclaration, var. var te laisse redéclarer le même nom autant de fois que tu veux, ne lève pas d'erreur si tu le références avant sa ligne de déclaration, et continue simplement avec une valeur qui n'a pas encore été définie. La portée où un nom est valide fonctionne aussi différemment de const / let.

Comme il ne signale pas les erreurs sur le coup, retrouver la cause prend plus de temps.

Le nouveau code n'utilise pas var

const et let signalent tous les deux la redéclaration et les références avant déclaration comme des erreurs. Ce cours n'utilise pas var non plus à partir d'ici. La mécanique complète de la portée elle-même est couverte dans l'article sur la portée, dans la catégorie syntaxe.

Cet article a couvert le nommage des valeurs avec const et let, le TypeError d'une réaffectation de const, la SyntaxError d'une redéclaration, et les règles de nommage incluant le camelCase. Les valeurs que tu ne remplaceras pas utilisent const ; seules celles que tu remplaceras utilisent let — ce choix se retrouve dans chaque morceau de code à partir d'ici.