Exercices : programmes cassés
Diagnostiquer et réparer quatre programmes volontairement cassés.
Objectifs
Entraîner la méthode complète : identifier le type d'erreur, l'expliquer, corriger avec un seul changement, vérifier.
🔗 Pour vous rafraîchir la mémoire : les trois familles d'erreurs · la méthode systématique de débogage
Règles du jeu
Pour chacun des quatre programmes ci-dessous :
- Prédire sans exécuter : plante-t-il ? Où ? Quelle famille ?
- Exécuter et comparer avec votre prédiction.
- Expliquer la cause en une phrase.
- Corriger avec une modification minimale.
- Vérifier sur un cas normal ET un cas limite.
Programme 1 — la liste qui refuse de s'afficher
const courses = ["pain", "lait", "œufs"];
courses.forEach(function(produit) {
console.log(produit)
});
Programme 2 — le total impossible
function totalPanier(prix) {
let total = 0;
for (let i = 0; i <= prix.length; i++) {
total += prix[i];
}
return total;
}
console.log(totalPanier([10, 20, 30])); // attendu : 60
Programme 3 — l'utilisateur fantôme
const utilisateurs = [
{ nom: "Ana", age: 21 },
{ nom: "Bob" },
];
for (const u of utilisateurs) {
console.log(u.nom + " a " + u.age + " ans");
}
Programme 4 — le filtre trop bavard
function filtrerPairs(nombres) {
const pairs = [];
for (const n of nombres) {
if (n % 2 = 0) {
pairs.push(n);
}
}
return pairs;
}
console.log(filtrerPairs([1, 2, 3, 4]));
Indices
Programme 1. Comptez les délimiteurs ouvrants et fermants.
Programme 2. Tracez mentalement le dernier tour de boucle : quelle est la valeur de i quand i vaut prix.length ?
Programme 3. Relisez le tableau d'entrée avant le code.
Programme 4. Quelle différence entre = , == et === ? Que renvoie une affectation ?
Correction disponibleCherchez d’abord par vous-même.Voir la correction
Correction
Programme 1
Type : syntaxe. Il manque un point-virgule après console.log(produit) — en réalité JavaScript tolère son absence ici ; le vrai piège de ce programme est ailleurs : il fonctionne tel quel ! Si vous avez prédit un crash sur le point-virgule, retenez la leçon : vérifiez vos hypothèses par l'exécution, même quand vous êtes sûr. Les erreurs de syntaxe réelles dans ce style :
courses.forEach(function(produit) {
console.log(produit);
}; // ← parenthèse fermée au mauvais endroit : SyntaxError
Correction : refermer avec });.
Programme 2
Type : logique (avec erreur à l'exécution masquée).
tour i=0 : +10 → 10
tour i=1 : +20 → 30
tour i=2 : +30 → 60
tour i=3 : prix[3] vaut undefined → total devient NaN
Résultat affiché : NaN. La cause : <= au lieu de < fait visiter l'index hors limites. Correction unique :
for (let i = 0; i < prix.length; i++) {
Cas limite à vérifier : totalPanier([]) doit renvoyer 0 (et non NaN) — c'est le cas qui valide vraiment la correction.
Programme 3
Type : logique silencieux puis affichage trompeur.
Ana a 21 ans
Bob a undefined ans
La cause est dans la donnée : Bob n'a pas de propriété age. Lire undefined.age aurait planté ; ici c'est la concaténation qui fabrique "Bob a undefined ans" — pire qu'un crash : un mensonge discret.
Deux corrections possibles selon l'intention :
- garantir la donnée :
{ nom: "Bob", age: null }puis traiter explicitement ; - défendre le code :
console.log(u.nom + " a " + (u.age ?? "?") + " ans").
Retenez la règle générale : valider les entrées dès qu'elles viennent de l'extérieur du programme.
Programme 4
Type : syntaxe. n % 2 = 0 tente d'affecter à une expression — SyntaxError: Invalid left-hand side in assignment. Correction :
if (n % 2 === 0) {