JavaScript Conditions (if, else, switch) : Comment les Utiliser ?

Vous voulez que votre code réagisse différemment selon les situations ? Comment dire à JavaScript de faire une action si une condition est remplie, et autre chose si elle ne l’est pas ? Vous cherchez des exemples clairs pour comprendre comment ça marche ?

Ce guide vous montre comment utiliser les instructions conditionnelles en JavaScript (if, else, switch…). On va voir ensemble comment structurer la logique de votre code avec des exemples pratiques et faciles à reprendre.

Tableau Récapitulatif des Conditions en JavaScript

Avant d’entrer dans les détails, voici un résumé rapide de toutes les conditions que vous pouvez utiliser. Ça vous donne une vue d’ensemble pour choisir la bonne instruction au bon moment.

Instruction	Syntaxe de base	Quand l’utiliser ? (Cas d’usage principal)
if	`if (condition) { ... }`	Pour exécuter un bloc de code si une seule condition est vraie (true).
else	`if (condition) { ... } else { ... }`	Pour exécuter un autre bloc de code si la condition du `if` est fausse (false).
else if	`if (c1) { ... } else if (c2) { ... }`	Pour tester plusieurs conditions à la suite.
switch	`switch (expression) { case x: ... break; }`	Quand vous testez une seule variable contre plusieurs valeurs fixes. Plus propre qu’une longue série de `else if`.
Opérateur ternaire	`condition ? valeur_si_vrai : valeur_si_faux`	Un raccourci sur une seule ligne pour une simple instruction `if/else`, souvent pour assigner une valeur à une variable.

La Condition `if` : La Base de Toute Logique

L’instruction if est la plus simple et la plus utilisée. Elle permet d’exécuter un bout de code seulement si une condition est vraie (true). Si la condition est fausse (false), le code à l’intérieur du bloc est simplement ignoré.

La syntaxe est directe : la condition à tester est placée entre parenthèses (), et le code à exécuter se trouve entre accolades {}. Ce bloc de code ne s’activera que si le résultat de l’expression dans les parenthèses est considéré comme vrai.

// Exemple simple avec if
const age = 20;

if (age >= 18) {
  // Ce code ne s'exécute que si la variable 'age' est supérieure ou égale à 18.
  console.log("Vous êtes majeur."); 
}

// Le programme continue ici, que la condition soit vraie ou fausse.

Étendre les Possibilités avec `else` et `else if`

Le if tout seul, c’est bien, mais souvent on veut aussi gérer le cas où la condition n’est pas remplie. C’est là que else et else if entrent en jeu.

Le « sinon » avec `else`

L’instruction else se place juste après un bloc if. Elle définit le code à exécuter si la condition initiale est fausse. C’est le plan B de votre logique : « si ceci est vrai, fais ça, sinon fais autre chose ». Il n’y a pas de condition dans les parenthèses pour else, car il s’exécute pour tous les autres cas.

const temperature = 15;

if (temperature > 25) {
  console.log("C'est une journée chaude.");
} else {
  // Ce bloc s'exécute car la condition (15 > 25) est fausse.
  console.log("Pensez à prendre une veste.");
}

Enchaîner les tests avec `else if`

Et si vous avez plus de deux options ? Vous pouvez tester plusieurs conditions en chaîne avec else if. JavaScript va les vérifier dans l’ordre. Dès qu’une condition est vraie, son bloc de code est exécuté et le reste de la chaîne (les autres else if et le else final) est ignoré.

C’est très utile pour créer des logiques plus complexes, comme un système de notation ou des messages différents selon une valeur.

if (condition1) : Testé en premier.
else if (condition2) : Testé seulement si condition1 est fausse.
else : Exécuté si aucune des conditions précédentes n’est vraie.

let note = 85;
let resultat;

if (note >= 90) {
  resultat = "A";
} else if (note >= 80) {
  // Le code s'arrête ici, car 85 >= 80 est vrai.
  resultat = "B"; 
} else if (note >= 70) {
  resultat = "C";
} else {
  resultat = "D";
}

console.log("Votre note est : " + resultat); // Affichera: Votre note est : B

Gérer Efficacement les Cas Multiples avec `switch`

Quand vous avez une longue série de else if qui testent tous la même variable, le code peut vite devenir lourd. L’instruction switch est une alternative propre et lisible pour gérer ce genre de situation. Elle évalue une expression une seule fois et compare son résultat avec différentes valeurs possibles (les case).

Le fonctionnement repose sur trois mots-clés :

case : Définit une valeur à comparer. Si la valeur du case correspond à celle de l’expression, le code qui suit est exécuté.
break : C’est très important. Il stoppe l’exécution à l’intérieur du switch. Sans lui, le code continuerait à s’exécuter dans les case suivants.
default : Similaire au else, ce bloc s’exécute si aucune des valeurs des case ne correspond.

Attention : N’oubliez jamais le mot-clé break à la fin de chaque case. Si vous l’omettez, le programme exécutera le code du case suivant, ce qui cause souvent des erreurs de logique difficiles à trouver.

const jour = "Mardi";
let message;

switch (jour) {
  case "Lundi":
    message = "Début de la semaine de travail.";
    break;
  case "Mardi":
    message = "Le deuxième jour, on continue !";
    break; // Le switch s'arrête ici car 'jour' correspond à "Mardi".
  case "Samedi":
  case "Dimanche":
    message = "C'est le week-end !";
    break;
  default:
    message = "Un jour comme un autre.";
    break;
}

console.log(message); // Affiche "Le deuxième jour, on continue !"

L’Opérateur Ternaire (`? :`) : La Condition sur une Seule Ligne

L’opérateur ternaire est un raccourci pour une instruction if/else simple. Il permet d’écrire une condition complète sur une seule ligne, ce qui est pratique pour affecter une valeur à une variable de manière conditionnelle.

Sa structure est : condition ? expression_si_vrai : expression_si_faux. C’est une manière très concise d’écrire votre code, mais il faut l’utiliser pour des conditions simples afin de ne pas nuire à la lisibilité.

const estMembre = true;

// Version classique avec if/else
let prix;
if (estMembre) {
  prix = 10;
} else {
  prix = 20;
}
console.log(prix); // Affiche 10

// Même logique avec l'opérateur ternaire
const prixTernaire = estMembre ? 10 : 20;
console.log(prixTernaire); // Affiche 10

FAQ – Questions Fréquentes sur les Conditions JS

Voici quelques réponses aux questions que beaucoup de développeurs se posent sur les conditions en JavaScript.

Quelle est la différence entre `==` et `===` ?

C’est une source d’erreur classique pour les débutants. La différence est simple mais essentielle :

== (Égalité simple) : Compare les valeurs après avoir essayé de les convertir au même type. Par exemple, 5 == "5" est true.
=== (Égalité stricte) : Compare les valeurs ET les types. Aucune conversion n’est faite. 5 === "5" est false car un est un nombre et l’autre une chaîne de caractères.

Bonne pratique : Pour éviter les comportements inattendus, il est recommandé de toujours utiliser l’égalité stricte (===) et la différence stricte (!==) dans votre code.

Comment combiner plusieurs conditions ?

Vous pouvez tester plusieurs expressions dans un seul if grâce aux opérateurs logiques :

L’opérateur ET (&&) : Renvoie true seulement si toutes les conditions sont vraies. Exemple : if (age > 18 && aLePermis).
L’opérateur OU (||) : Renvoie true si au moins une des conditions est vraie. Exemple : if (estAdmin || estProprietaire).

Peut-on imbriquer des conditions ?

Oui, c’est possible. Vous pouvez placer une structure if/else à l’intérieur d’un autre if ou else. Ça permet de créer des logiques très précises.

Par contre, il faut faire attention à la lisibilité. Si vous avez plus de deux niveaux d’imbrication, votre code devient vite difficile à comprendre. Il est souvent préférable de réorganiser votre logique, par exemple en utilisant des fonctions, pour garder un code clair.