Tout programme utile finit par atteindre un point de décision. Ce bouton doit-il soumettre le formulaire ou afficher une erreur ? Cet ut

Tout programme utile finit par atteindre un point de décision. Ce bouton doit-il soumettre le formulaire ou afficher une erreur ? Cet utilisateur doit-il voir le tableau de bord d'administration ou la vue invité ? JavaScript répond à ces questions grâce aux instructions conditionnelles. Elles sont les vannes de contrôle de votre code : elles ouvrent un chemin et en ferment un autre, tout cela en fonction du fait qu'une expression soit évaluée comme vraie (true) ou fausse (false). Sans elles, votre script avancerait de haut en bas sans jamais réagir à la personne qui l'utilise.

La branche la plus simple : if

L'instruction if est la première porte que vous franchissez. Vous placez une condition entre parenthèses. Si cette condition se résout en true, le bloc de code situé en dessous est exécuté. Si elle se résout en false, JavaScript ignore entièrement le bloc et continue la lecture du fichier.

C'est exactement ce dont vous avez besoin pour des vérifications ponctuelles et simples. Imaginez la validation d'un champ de formulaire avant d'envoyer quoi que ce soit à un serveur :

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Pas d' email, pas de soumission. La logique est directe et claire. Utilisez if lorsqu'il n'y a qu'un seul cas particulier à surveiller et qu'aucune action alternative n'est requise.

Gérer le choix entre deux options : if...else

La plupart des décisions réelles ont deux facettes. Le couple if...else couvre précisément cela. Un bloc s'exécute lorsque la condition est vraie, l'autre lorsqu'elle est fausse. Les deux chemins sont mutuellement exclusifs.

Imaginez une vérification du mode sombre lors du chargement de la page :

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

Le navigateur n'ajoutera jamais les deux classes. Il choisit un chemin, l'exécute, puis passe à la suite. Chaque fois que votre logique se divise nettement en deux résultats possibles, c'est cette structure qu'il faut utiliser.

Plusieurs chemins : if...else if...else

Tous les problèmes ne sont pas binaires. Parfois, vous avez besoin d'une échelle de possibilités. La chaîne if...else if...else vous permet de tester plusieurs conditions à la suite. JavaScript les évalue de haut en bas et exécute le premier bloc dont la condition est vraie. Une fois cette correspondance trouvée, le reste de l'échelle est ignoré.

Un exemple classique est la conversion d'un score numérique en note alphabétique :

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

L'ordre est ici d'une importance capitale. Si vous vérifiez score >= 70 avant score >= 90, presque toutes les notes de passage seraient bloquées dans la catégorie C car la première correspondance vraie l'emporte. Gardez vos conditions classées de la plus spécifique à la moins spécifique, et terminez toujours la chaîne par un else final pour capturer tout ce qui aurait pu échapper aux tests.

Correspondance de valeurs fixes : switch

Lorsque vous comparez une variable à une liste de constantes connues, une longue chaîne if...else devient illisible. L'instruction switch permet de clarifier les choses. Elle évalue une expression une seule fois, puis la compare à des étiquettes case en utilisant l'égalité stricte (===). Cela rend le code plus facile à parcourir lorsque les options sont discrètes et nommées.

Considérez la définition des heures d'ouverture d'un magasin en fonction du jour actuel :

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Faites attention au break. Si vous l'omettez, l'exécution continue vers le case suivant. Ce comportement est parfois utile, mais il cause plus souvent des bugs silencieux. Utilisé correctement, le switch rend votre intention évidente au premier coup d'œil et maintient les branches liées alignées dans une colonne propre.

Décisions compactes : l'opérateur ternaire

L'opérateur ternaire — écrit ? : — est une expression et non une instruction. Cette distinction est importante