Conditions — else if, l'opérateur ternaire et switch

Pour calculer le niveau d'un membre ou afficher l'état d'une commande, les conditions se résument rarement à deux cas. Si tu écris Platinum, Gold et Standard sous forme de trois if séparés, les conditions du dessous sont encore testées alors que celle du dessus a déjà tranché, et tu obtiens une ligne affichée pour chaque condition vérifiée.

Cet article couvre else if pour tester des conditions par étapes, l'opérateur ternaire qui renvoie directement une valeur, et switch pour comparer une valeur à plusieurs valeurs possibles.

Distinguer trois cas ou plus — enchaîner des else if

On veut attribuer une étiquette à un produit selon la note moyenne de ses avis : « Excellent » à partir de 4,5, « Bien noté » à partir de 3,5, et « Note faible » en dessous.

Deux if séparés sont testés indépendamment l'un de l'autre : avec une note de 4,8, les deux conditions sont vraies et deux lignes s'affichent, « Excellent » puis « Bien noté ».

En enchaînant des else if (une condition supplémentaire, testée seulement si la précédente était fausse), tu regroupes plusieurs conditions en une seule structure conditionnelle. Le bloc entre { } qui suit chaque condition s'appelle une branche.

Les conditions sont testées de haut en bas, et seule la première branche dont la condition est vraie s'exécute. Si aucune ne correspond, c'est la branche else qui s'exécute.

const score = 4.8;   // note moyenne des avis sur un produit

// Des if séparés sont testés chacun indépendamment
if (score >= 4.5) {
  console.log("Excellent");      // vrai
}
if (score >= 3.5) {
  console.log("Bien noté");      // vrai aussi → 2 lignes affichées
}

// Enchaînés avec else if, la première condition vraie met fin aux tests
if (score >= 4.5) {
  console.log("Excellent");      // seule celle-ci s'exécute
} else if (score >= 3.5) {
  console.log("Bien noté");      // jamais testée
} else {
  console.log("Note faible");    // jamais testée
}

Le else est facultatif. Sans lui, si aucune condition ne correspond, aucune branche ne s'exécute et le programme passe à la ligne qui suit toute la structure.

Le tableau ci-dessous montre à quelle étape le test s'arrête quand on fait passer trois notes différentes dans la même chaîne.

L'ordre des conditions change le résultat

Si tu places en premier une condition qui couvre une plage plus large, les conditions plus étroites situées en dessous ne sont jamais atteintes. Si tu écris score >= 3.5 en premier, un produit noté 4,8 se retrouve classé « Bien noté ». Pour qu'une note de 4,8 donne « Excellent », mets d'abord la condition la plus étroite, comme score >= 4.5.

Affiche le statut d'une commande sous forme de message. orderId, isCanceled, isShipped et isPaid sont déjà déclarées.

① Affiche une ligne de la forme « Statut de la commande A-1001 ».

② Écris une branche qui affiche « Annulée » si la commande a été annulée.

③ Ajoute ensuite, dans cet ordre, une branche qui affiche « Expédiée » si elle a été expédiée, puis une qui affiche « En préparation » si elle a été payée.

④ Si aucun de ces cas ne s'applique, affiche « En attente de paiement ».

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

Obtenir le résultat sous forme de valeur — l'opérateur ternaire

Imagine que tu veuilles afficher « En stock » ou « Rupture de stock » selon la quantité disponible, et ranger cette chaîne dans une variable pour la réutiliser. Avec if et else, impossible d'utiliser const, car une const doit recevoir sa valeur au moment même où elle est déclarée. Tu dois donc d'abord déclarer la variable avec let, puis lui affecter une valeur dans chaque branche.

Un morceau de code comme stock > 0, qui produit une valeur quand il est évalué, s'appelle une expression. Un morceau de code comme if (…) { … }, qui exécute des actions sans produire de valeur, s'appelle une instruction.

Avec l'opérateur ternaire (une expression en trois parties — une condition, une valeur si elle est vraie, une valeur si elle est fausse — qui prend la valeur choisie), tu écris les deux branches sur une seule ligne.

const stock = 0;   // quantité en stock

// if est une instruction : déclaration et affectation sont séparées
let label;
if (stock > 0) {
  label = "En stock";
} else {
  label = "Rupture de stock";
}
console.log(label);   // Rupture de stock

// L'opérateur ternaire est une expression : il va directement dans une const
const badge = stock > 0 ? "En stock" : "Rupture de stock";
console.log(badge);   // Rupture de stock

// Il fonctionne aussi directement dans un littéral de gabarit
console.log(`Statut : ${stock > 0 ? "Disponible" : "En réapprovisionnement"}`);  // Statut : En réapprovisionnement

Dès qu'il te faut trois issues ou plus, reviens à else if. On peut imbriquer des opérateurs ternaires, mais ? et : se répètent alors sur une même ligne, comme dans a ? x : b ? y : z, et tu dois suivre à l'œil quelle condition va avec quelle valeur.

Affiche un titre pour les avis et les points gagnés lors d'un achat. reviewCount, isPremium et purchaseAmount sont déjà déclarées.

① Affiche un titre « Aucun avis pour l'instant » quand il y a 0 avis, et « ◯ avis » dès qu'il y en a au moins 1.

② Range dans une variable un taux de points : 0.03 pour les membres premium et 0.01 pour tous les autres.

③ Multiplie le montant de l'achat par le taux de ②, arrondis à l'entier inférieur, et affiche « Points gagnés : ◯ pt (membre standard) », en faisant aussi varier le type de membre.

Aiguiller selon une valeur — switch et case

On veut choisir un message sur les frais selon le mode de paiement retenu par le client. C'est faisable avec else if, mais tu réécrirais sans cesse la même variable — paymentMethod === "credit", paymentMethod === "convenience" — et on voit moins bien ce que le branchement compare réellement.

Avec switch (une instruction qui compare une valeur à plusieurs valeurs possibles dans l'ordre, puis commence l'exécution à la branche qui correspond), tu n'écris qu'une fois la valeur à comparer entre les parenthèses, et tu listes les valeurs possibles sous la forme case valeur:. Le break placé en fin de branche fait sortir du switch, et quand aucun case ne correspond, c'est la branche default: qui s'exécute.

const paymentMethod = "credit";   // mode de paiement choisi par le client

switch (paymentMethod) {
  case "credit":
    console.log("Pas de frais");                 // celle-ci s'exécute
    break;
  case "convenience":
    console.log("Frais : 200 yens");             // paiement en supérette, ne correspond pas
    break;
  case "cod":
    console.log("Frais : 330 yens");             // contre-remboursement, ne correspond pas
    break;
  default:
    console.log("Choisis un mode de paiement");
}

Le default est facultatif. Si une valeur qui ne correspond à rien arrive dans un switch sans default, aucune branche ne s'exécute et le programme passe à la ligne suivante. Quand des valeurs que tu n'as pas prévues peuvent arriver, afficher un message dans default te permet de repérer à l'écran qu'une valeur inattendue est passée.

case distingue les chaînes des nombres

switch compare les valeurs de la même façon que === : des types différents ne correspondent jamais. La chaîne "200" lue depuis un champ de saisie ne correspond pas à case 200: et part vers default. Si une valeur peut être tantôt un nombre, tantôt une chaîne, convertis-la vers un seul type avant la comparaison.

Détermine les frais de livraison selon le mode de livraison. shippingMethod, itemTotal et shippingFee sont déjà déclarées.

① Avec un switch, fixe les frais de livraison à 500 pour standard et à 900 pour express.

② Ajoute une branche qui les fixe à 0 pour store (retrait en magasin).

③ Si aucun de ces cas ne s'applique, affiche « Vérifie le mode de livraison ».

④ Après le switch, affiche « Livraison : ◯ yens / Total : ◯ yens ».

L'exécution continue dans le case suivant — oublier break

Avec switch, on trébuche souvent sur un break oublié. Le code reste valide, donc aucune erreur de syntaxe ne s'affiche : tu ne t'en rends compte qu'à l'exécution, en voyant des lignes en trop.

Sans break, l'exécution se poursuit dans le code des case situés sous celui qui correspond. C'est ce qu'on appelle le fall-through (l'exécution « tombe » dans les case suivants). Elle continue — sans comparer aux valeurs des case du dessous — jusqu'à rencontrer un break ou atteindre la fin du switch.

const orderStatus = "paid";   // statut de la commande

// Sans break, le code sous le case qui correspond s'exécute aussi
switch (orderStatus) {
  case "paid":
    console.log("Payée");                    // correspond, l'exécution démarre ici
  case "shipped":
    console.log("Expédiée");                 // pas de break, donc l'exécution continue
  default:
    console.log("Vérifie le statut");        // et jusqu'à default
}

// Empiler des case permet à plusieurs valeurs de partager le même code
switch (orderStatus) {
  case "pending":
  case "paid":
    console.log("Pas encore expédiée");   // pending comme paid arrivent ici
    break;
}

Tu peux tirer parti de ce comportement quand plusieurs valeurs doivent partager le même code. Si tu empiles deux case sans code entre eux, une correspondance sur le case du haut passe directement au code du dessous. Place un break à la fin de la branche partagée.

Affiche les fonctionnalités disponibles dans chaque forfait. La variable plan, qui contient le forfait actuel, est déjà déclarée.

① Affiche un titre de la forme « Fonctionnalités du forfait standard ».

② Écris un switch et affiche « Lecture hors ligne » dans la branche premium.

③ En dessous, ajoute une branche standard qui affiche « Qualité HD » et une branche free qui affiche « Streaming vidéo », sans écrire de break.

④ Ajoute un case pour que trial exécute le même code que free.