Vingt et un articles — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 11)

Vingt et un articles

Erreurs, stockage et qualité du code · niveau 2

Énoncé

Un panier construit à partir des champs d'un formulaire annonce « 021 articles » au lieu de 3.


const lignes = [
  { titre: "Programmation Java", quantite: "2" },
  { titre: "Analyse MPSI", quantite: "1" },
];

function nombreArticles(lignes) {
  return lignes.reduce((n, l) => n + l.quantite, 0);
}

console.log(`${nombreArticles(lignes)} articles`);

Décrire comment le débogueur permet de trouver la cause (où poser le point d'arrêt, que regarder), puis corriger. Pourquoi le panier de la Librairie ne peut-il pas avoir ce bogue ? Quel test l'aurait détecté ?

Corrigé

On pose un point d'arrêt sur la ligne du reduce (ou dans la fonction fléchée), puis on regarde n et l.quantite dans le panneau Scope à chaque passage : au premier, n vaut 0 et l.quantite vaut "2", entre guillemets. 0 + "2" est une concaténation : "02", puis "021". Les valeurs lues dans un <input> sont toujours des chaînes (chapitre 8). Correction, à la lecture du formulaire plutôt que dans le calcul : quantite: Number(champ.value), ou champ.valueAsNumber pour un champ de type number. Le panier de la Librairie ne peut pas avoir ce bogue : changerQuantite refuse tout ce qui n'est pas un entier (Number.isInteger("2") est faux) ; le test « une quantité invalide lève une RangeError » l'aurait vérifié avec assert.throws(() => changerQuantite([], "A", "2"), RangeError).