Déclaration if en ligne en JavaScript

JavaScript ne possède pas de forme distincte de l’instruction if sur une seule ligne. Pour une expression conditionnelle qui choisit entre des valeurs, utilisez l’opérateur conditionnel (ternaire). Les opérateurs logiques peuvent aussi sélectionner ou conserver des valeurs grâce à l’évaluation à court-circuit, mais leur comportement est différent. Ce guide explique le fonctionnement de chaque forme, la gestion de plusieurs résultats et les cas où une instruction if...else classique est plus claire.

Comprendre l’opérateur ternaire

L’opérateur conditionnel est une expression : il évalue une condition et produit l’une de deux expressions. Ses trois opérandes s’écrivent condition ? expressionIfTrue : expressionIfFalse. La condition est évaluée en premier. Si elle est vraie au sens logique, JavaScript évalue l’expression qui suit ? ; sinon, il évalue celle qui suit :. Seule la branche sélectionnée est évaluée.

Exécutez cet exemple. Le résultat affiché est « Pass » ; ce libellé reste en anglais :

const score = 82;
const result = score >= 60 ? "Pass" : "Try again";

console.log(result);

Pass

Vous pouvez affecter la valeur obtenue à une variable, la transmettre à une fonction ou l’utiliser dans une expression plus grande. L’opérateur renvoie la valeur de l’expression sélectionnée ; les branches n’ont pas besoin d’être des chaînes de caractères. Par exemple, une branche peut produire un nombre ou un objet. Veillez à ce que les deux branches soient assez courtes pour que le choix soit immédiatement compréhensible. Si l’une d’elles nécessite plusieurs instructions, utilisez plutôt if...else.

Utiliser des opérateurs ternaires imbriqués pour plusieurs conditions

Lorsqu’il existe plus de deux résultats possibles, une expression conditionnelle peut figurer dans l’une des branches. JavaScript évalue d’abord la première condition, puis n’évalue l’expression imbriquée que si la branche correspondante est sélectionnée. Chaque condition occupe ainsi une place précise dans l’ordre, et une valeur de repli finale couvre les cas qui ne correspondent à aucun des tests précédents.

Exécutez cet exemple. Le résultat affiché est « Cool » ; ce libellé reste en anglais :

const temperature = 18;
const description =
  temperature >= 30 ? "Hot" :
  temperature >= 20 ? "Warm" :
  temperature >= 10 ? "Cool" :
  "Cold";

console.log(description);

Cool

Lisez les tests de haut en bas : la première condition vraie détermine le résultat, et la dernière chaîne est utilisée si les trois comparaisons sont fausses. L’ordre compte lorsque des intervalles se chevauchent. Par exemple, tester une condition générale avant une condition plus précise peut rendre cette dernière inaccessible. L’imbrication fonctionne, mais plusieurs niveaux peuvent être difficiles à parcourir ; utilisez une chaîne if...else if...else si elle rend l’ordre des décisions plus facile à suivre.

Utiliser les opérateurs logiques pour des conditions en ligne

Les opérateurs && et || évaluent leurs opérandes à court-circuit et renvoient des valeurs d’opérande. Avec left && right, JavaScript renvoie left si cette valeur est fausse au sens logique ; sinon, il évalue et renvoie right. Avec left || right, il renvoie left si cette valeur est vraie au sens logique ; sinon, il évalue et renvoie right. Ces opérateurs ne convertissent pas systématiquement le résultat en booléen.

Une forme compacte courante utilise || pour fournir une valeur de repli :

Exécutez cet exemple. Le résultat affiché est « Guest » (invité) ; ce libellé reste en anglais :

const displayName = "";
const label = displayName || "Guest";

console.log(label);

Guest

Cette forme utilise la valeur de repli lorsque l’opérande de gauche est faux au sens logique, notamment s’il s’agit d’une chaîne vide, de 0, de false, de null ou de undefined. C’est utile lorsque toutes ces valeurs signifient « aucune valeur ». En revanche, cette forme ne convient pas si une valeur valide comme 0 ou une chaîne vide doit être conservée. Dans ce cas, testez spécifiquement null ou undefined avec ??, ou utilisez une condition explicite.

La forme avec && est utile lorsqu’une condition vraie au sens logique doit produire une valeur, tandis qu’une condition fausse doit renvoyer cette valeur fausse. Par exemple, isLoggedIn && "Welcome back" renvoie le message lorsque isLoggedIn vaut true et renvoie false lorsque cette variable vaut false. Cela peut convenir dans un contexte qui ignore les valeurs false, mais ce n’est pas équivalent à un opérateur ternaire qui prévoit une valeur précise pour le cas faux.

Choisir entre les opérateurs ternaires et logiques

Utilisez une expression ternaire lorsqu’une condition simple choisit entre deux valeurs voulues. N’utilisez des ternaires imbriqués que si les branches restent faciles à lire et que l’ordre des conditions est évident. Utilisez && lorsqu’une condition vraie au sens logique doit permettre l’évaluation d’une expression, et || lorsque toute valeur de gauche fausse au sens logique doit déclencher la valeur de repli. Choisissez ?? lorsque seule une valeur null ou undefined doit la déclencher.

Un ternaire reste une expression ; il ne remplace pas toutes les instructions if. Préférez if...else pour plusieurs instructions, des effets de bord ou des décisions qui nécessitent des commentaires ou une logique conséquente. Une forme courte sur une seule ligne n’est pas automatiquement plus rapide ni plus claire : choisissez la forme qui rend la condition, la valeur renvoyée et la valeur de repli les plus faciles à comprendre.