Projet : calculateur de pourboire et FizzBuzz

Une addition de 84 avec un pourboire de 20 pour cent, partagée entre quatre personnes, revient à 25.20 chacune. Cette unité construit ce calculateur, puis l'exercice classique FizzBuzz, avec les briques des unités précédentes.

D'un problème à un programme

Écrire un programme commence avant le moindre code. Dis d'abord avec des mots simples ce qui entre, ce qui sort et ce qui se passe entre les deux. Pour un calculateur de pourboire, les entrées sont l'addition, le taux de pourboire et le nombre de personnes. Les sorties sont le pourboire, le total et la part de chacun. Entre les deux, il y a trois petits calculs. Écrire cela transforme une tâche floue en plusieurs petites tâches, que tu sais déjà toutes faire.

Étape 1 : le calcul

const bill = 84;
const rate = 0.2;
const people = 4;

const tip = bill * rate;          // 16.8 (pourboire)
const total = bill + tip;         // 100.8 (total)
const each = total / people;      // 25.2 (part de chacun)

Vérifie les nombres à la main avant de faire confiance au code : 20 pour cent de 84 font 16.8, le total vaut 100.8, et 100.8 divisé par 4 donne 25.2. Tester avec des valeurs dont tu connais déjà la réponse permet d'attraper des erreurs comme un taux tapé 20 au lieu de 0.2, qui donnerait un pourboire de 1680.

Étape 2 : afficher l'argent correctement

L'argent s'affiche normalement avec deux décimales, et afficher 25.2 a l'air inachevé. La méthode de nombre toFixed(2) renvoie une chaîne avec exactement deux décimales : each.toFixed(2) donne donc "25.20". Souviens-toi de l'unité sur les nombres : les décimaux peuvent porter de minuscules erreurs d'arrondi binaires ; toFixed les cache aussi, une raison de plus de l'utiliser pour l'affichage. Garde les nombres sous forme de nombres pendant les calculs et n'appelle toFixed qu'à la toute fin, au moment d'afficher.

Étape 3 : l'envelopper dans une fonction

Un calcul que tu pourrais refaire avec d'autres nombres a sa place dans une fonction. La fonction ci-dessous renvoie un objet : un seul appel peut ainsi rendre les trois résultats avec des noms clairs. Les paramètres par défaut rendent le cas habituel court à écrire.

function splitBill(bill, rate = 0.15, people = 1) {
  const tip = bill * rate;
  const total = bill + tip;
  return { tip, total, each: total / people };
}

const r = splitBill(84, 0.2, 4);
console.log(`Tip: ${r.tip.toFixed(2)}`);       // affiche Tip: 16.80
console.log(`Each: ${r.each.toFixed(2)}`);     // affiche Each: 25.20

La ligne return { tip, total, each: total / people }; utilise un raccourci : écrire tip seul dans un objet signifie tip: tip, une propriété dont la clé et la variable portent le même nom.

FizzBuzz

FizzBuzz est un jeu de comptage devenu exercice de programmation. Compte de 1 à 15. Pour les multiples de 3, dis Fizz, pour les multiples de 5, dis Buzz, pour les multiples des deux, dis FizzBuzz, et sinon dis le nombre. L'exercice utilise une boucle, l'opérateur de reste et une chaîne de if, et il contient un piège. Le nombre 15 est un multiple de 3 : si tu testes 3 en premier, 15 affiche Fizz et n'atteint jamais la branche FizzBuzz. La solution est la règle de l'unité sur if : place la condition la plus étroite en premier.

for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) {         // le cas le plus étroit d'abord
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

Tester i % 15 === 0 fonctionne, car un nombre divisible à la fois par 3 et par 5 est divisible par 15. Écrire i % 3 === 0 && i % 5 === 0 dit la même chose plus directement, et les deux conviennent. Quand ta version s'exécute, compare son affichage ligne par ligne avec la liste attendue : 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz.

Que construire ensuite

Tu as maintenant le cœur du langage : valeurs, variables, opérateurs, décisions, boucles, tableaux, fonctions et objets. Presque tous les programmes sont construits avec ces briques. De bonnes étapes suivantes : réécrire FizzBuzz sous forme de fonction qui prend la limite supérieure, faire arrondir chaque part à l'unité monétaire supérieure avec Math.ceil dans le calculateur de pourboire, ou tenir une liste de dépenses dans un tableau d'objets et afficher un total par catégorie. Le guide JavaScript de MDN, que suit ce cours, continue avec des sujets comme les collections, les classes et la manipulation des pages web.