Opérateurs conditionnels JavaScript

Introduction aux opérateurs conditionnels

Les opérateurs conditionnels (aussi appelés instructions conditionnelles) en JavaScript sont la façon dont un programme prend des décisions. Au lieu d'exécuter chaque ligne de haut en bas, ils permettent à votre code de choisir quel bloc exécuter selon qu'une condition est true ou false.

Ce chapitre couvre l'ensemble des outils que vous utilisez au quotidien :

• les instructions if, else if et else,
• l'opérateur ternaire ? : (et quand ne pas l'imbriquer),
• la façon dont les valeurs truthy et falsy influencent les conditions,
• l'évaluation en court-circuit avec && et ||,
• l'opérateur de coalescence des nuls ?? pour les valeurs par défaut.

Une condition est toute expression que JavaScript peut évaluer en boolean. Elle est généralement construite à partir d'opérateurs de comparaison (>, <, ===, …) et combinée avec des opérateurs logiques (&&, ||, !).

L'instruction if

L'instruction if est la conditionnelle la plus fondamentale, utilisée pour exécuter un bloc de code uniquement lorsqu'une condition spécifiée est vraie.

Syntaxe

if (condition) {
  // code to execute if condition is true
}

Exemple

L'instruction else

L'instruction else complète if en exécutant son bloc quand la condition de l'if est fausse.

Syntaxe

if (condition) {
  // code if condition is true
} else {
  // code if condition is false
}

Exemple

L'instruction else if

else if vous permet de tester plusieurs conditions en séquence. JavaScript vérifie chacune de haut en bas et exécute la première branche dont la condition est vraie — les suivantes sont ignorées, même si elles seraient aussi vraies. Cet ordre est important : placez vos conditions les plus spécifiques ou prioritaires en premier.

Syntaxe

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if neither condition is true
}

Exemple

Lorsque vous comparez une valeur à de nombreuses options fixes, une chaîne de else if peut devenir répétitive. L'instruction switch est souvent plus adaptée dans ce cas.

L'opérateur conditionnel (ternaire) ?

L'opérateur ternaire (? :) est un raccourci compact pour if...else. C'est le seul opérateur JavaScript qui prend trois opérandes, et contrairement à une instruction, il retourne une valeur — ce qui le rend idéal pour assigner un résultat en fonction d'une condition.

Syntaxe

let result = condition ? value1 : value2;

Si condition est vraie, l'expression évalue à value1 ; sinon elle évalue à value2.

Exemple

Parce qu'il produit une valeur, l'opérateur ternaire est aussi pratique directement dans les chaînes de gabarit et les arguments de fonctions :

Opérateurs ternaires imbriqués et chaînés

Un opérateur ternaire peut lui-même retourner un autre opérateur ternaire, ce qui imite une chaîne else if :

Cela fonctionne, mais la lisibilité diminue rapidement. Évitez d'imbriquer les opérateurs ternaires quand la logique est non triviale — un enchaînement profond a ? b : c ? d : e est difficile à lire et facile à mal formuler. Préférez if...else if (ou switch) dès que vous avez plus d'une condition, et réservez l'opérateur ternaire aux choix simples entre deux alternatives.

Valeurs truthy et falsy

La condition dans un if ou un opérateur ternaire n'a pas besoin d'être un boolean. JavaScript convertit ce que vous lui donnez en true ou false. Les valeurs converties en false sont appelées falsy ; tout le reste est truthy.

Il y a exactement huit valeurs falsy :

false
0        // and -0
0n       // BigInt zero
""       // empty string
null
undefined
NaN

Tout le reste — y compris "0", "false", [] (array vide) et {} (object vide) — est truthy.

C'est pourquoi un raccourci courant comme if (name) { ... } vérifie si name a une valeur utilisable plutôt que de tester name === "" ou name === undefined.

Évaluation en court-circuit

Les opérateurs logiques && et || ne retournent pas toujours un boolean — ils retournent l'un de leurs opérandes et cessent d'évaluer dès que le résultat est connu. C'est ce qu'on appelle le court-circuit.

• a && b retourne a si a est falsy, sinon b.
• a || b retourne a si a est truthy, sinon b.

Le repli avec || a un inconvénient : il traite toutes les valeurs falsy comme manquantes. Si 0 ou "" est une valeur valide, || le remplacera à tort. C'est exactement le problème que ?? résout.

Consultez le chapitre dédié aux opérateurs logiques pour les règles complètes.

L'opérateur de coalescence des nuls (??)

L'opérateur de coalescence des nuls ?? retourne son côté droit uniquement lorsque le côté gauche est null ou undefined — pas pour d'autres valeurs falsy comme 0 ou "".

Utilisez ?? chaque fois que vous assignez des valeurs par défaut à des valeurs qui pourraient légitimement être 0, "" ou false. Utilisez || uniquement lorsque vous souhaitez vraiment que n'importe quelle valeur falsy déclenche le repli.

Conclusion

Les opérateurs conditionnels sont la façon dont votre code prend des décisions. Utilisez if / else if / else pour la logique de branchement, l'opérateur ternaire ? : pour les choix de valeurs simples (sans imbrication profonde), et ?? pour fournir des valeurs par défaut en toute sécurité. Combinez-les avec les opérateurs de comparaison et les opérateurs logiques pour exprimer n'importe quelle condition, et passez à l'instruction switch lorsque vous comparez une valeur à de nombreuses options.

Pratique