Instructions de contrôle et fonctions

Le programme du chapitre précédent calculait le total d'une commande, écrite en dur : un livre de Java, deux de CSS. La Librairie a besoin de calculer le total de n'importe quelle commande : parcourir ses lignes, choisir les frais de port selon le montant et le pays, appliquer la remise qui correspond au code saisi. Il faut pour cela des conditions, des boucles, et surtout des fonctions, qui donnent un nom à un calcul pour le réutiliser.

Les conditions et les boucles de JavaScript sont celles de Java, à quelques nuances près ; nous les parcourons vite. Les fonctions, en revanche, sont l'une des grandes différences entre les deux langages : en JavaScript, une fonction est une valeur, que l'on range dans une variable et que l'on passe à une autre fonction. Cette idée, simple, porte tout le reste du livre : les événements (chapitre 8), les méthodes des tableaux (chapitre 5), l'asynchrone (chapitre 9).

3.1 Conditions

if et else

const sousTotal = 3890; // en centimes
let port;
if (sousTotal >= 5000) {
  port = 0;
} else if (sousTotal >= 3000) {
  port = 290;
} else {
  port = 490;
}
console.log("Frais de port :", port);

const codePromo = "";
if (codePromo) {
  console.log("Code saisi :", codePromo);
} else {
  console.log("Aucun code promotionnel");
}

Frais de port : 290
Aucun code promotionnel

La syntaxe est celle de Java. La différence est dans la condition : Java exige un boolean, JavaScript accepte n'importe quelle valeur et la convertit (chapitre 2). Le test if (codePromo) est faux pour la chaîne vide, mais aussi pour null ou undefined : c'est l'idiome courant pour « si une valeur a été saisie ». Il est à éviter quand 0 est une valeur légitime : if (quantite) est faux pour une quantité nulle.

switch

const code = "ETUDIANT";
let remise;
switch (code) {
  case "BIENVENUE":
    remise = 0.05;
    break;
  case "ETUDIANT":
  case "ENSEIGNANT":
    remise = 0.1;
    break;
  default:
    remise = 0;
}
console.log(`Remise pour ${code} : ${remise * 100} %`);

const saisie = "1";
switch (saisie) {
  case 1:
    console.log("le nombre 1");
    break;
  default:
    console.log("pas le nombre 1 : switch compare avec ===");
}

Remise pour ETUDIANT : 10 %
pas le nombre 1 : switch compare avec ===

Deux case qui se suivent sans instruction ("ETUDIANT" et "ENSEIGNANT") partagent leur traitement ; c'est le seul usage légitime de la traversée. Un break oublié, lui, est une erreur classique (exercice 3.2) ; ESLint la signale (règle no-fallthrough). Et comme la comparaison est stricte, la chaîne "1", lue dans un champ de formulaire, ne correspond pas au case 1.

L'opérateur conditionnel

Pour choisir entre deux valeurs, l'opérateur condition ? a : b est plus court qu'un if : const port = sousTotal >= 5000 ? 0 : 490;. On ne l'imbrique pas : au-delà de deux cas, un if ou une fonction se lisent mieux.

3.2 Boucles

for (let i = 1; i <= 3; i++) {
  console.log(`Exemplaire n° ${i}`);
}

let stock = 10;
let jours = 0;
while (stock > 0) {
  stock -= 4;
  jours++;
}
console.log(`Stock épuisé en ${jours} jours (stock final : ${stock})`);

const titres = ["HTML", "CSS", "JavaScript"];
for (const titre of titres) {
  console.log(titre, titre.length);
}

let voyelles = 0;
for (const lettre of "JavaScript") {
  if ("aeiouy".includes(lettre.toLowerCase())) {
    voyelles++;
  }
}
console.log("Voyelles :", voyelles);

Exemplaire n° 1
Exemplaire n° 2
Exemplaire n° 3
Stock épuisé en 3 jours (stock final : -2)
HTML 4
CSS 3
JavaScript 10
Voyelles : 3

const prix = [1200, 0, 2450, -1, 3200, 990];
let total = 0;
for (const p of prix) {
  if (p === 0) {
    continue; // livre offert : on passe au suivant
  }
  if (p < 0) {
    console.log("Prix invalide, arrêt du calcul");
    break;
  }
  total += p;
}
console.log("Total :", total);

Prix invalide, arrêt du calcul
Total : 3650

for…in : les clés d'un objet

const livre = { titre: "CSS", prix: 2700, pages: 238 };
for (const cle in livre) {
  console.log(cle, "→", livre[cle]);
}

const titres = ["HTML", "CSS"];
for (const indice in titres) {
  console.log(indice, typeof indice);
}

titre → CSS
prix → 2700
pages → 238
0 string
1 string