L'opérateur conditionnel

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'opérateur (ternaire) conditionnel est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de Instructions/if...else.

Dans cet article

Exemple interactif

function getFee(isMember) {
  return isMember ? "$2.00" : "$10.00";
}

console.log(getFee(true));
// Expected output: "$2.00"

console.log(getFee(false));
// Expected output: "$10.00"

console.log(getFee(null));
// Expected output: "$10.00"

Syntaxe

condition ? exprSiVrai : exprSiFaux;

Paramètres

condition

Une expression qui est évaluée en un booléen (true ou false).

exprSiVrai

Une expression qui est évaluée si la condition est équivalente à true (truthy)

exprSiFaux

Une expression qui est évaluée si la condition est équivalente à false (falsy).

Description

SI condition vaut true, l'opérateur renverra la valeur d'exprSiVrai; dans le cas contraire, il renverra la valeur de exprSiFaux. Par exemple, on peut afficher un message différent en fonction d'une variable estMembre avec cette déclaration :

"Le prix est : " + (estMembre ? "15 €" : "30 €");

On peut également affecter des variables dont la valeur dépendra du test :

var elvisLives = Math.PI > 4 ? "Yep" : "Nope";

On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :

js
var premierControle = false,
  secondControle = false,
  acces = premierControle
    ? "Accès refusé"
    : secondControle
      ? "Accès refusé"
      : "Accès autorisé";

console.log(acces); // "Accès autorisé"

Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :

js
var stop = false,
  age = 16;

age > 18 ? location.assign("continue.html") : (stop = true);

en utilisant l'opérateur virgule, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un if...else n'est pas plus approprié).

js
var stop = false,
  age = 23;

age > 18
  ? (console.log("OK, accès autorisé."), location.assign("continue.html"))
  : ((stop = true), console.log("Accès refusé !"));

De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera la dernière valeur qui sera affectée. Ici aussi, attention à la lisibilité du code relativement à un if...else.

js
var age = 16;

var url =
  age > 18
    ? (console.log("Accès autorisé."),
      // console.log renvoie "undefined", mais cela importe peu car
      // ce n'est pas le dernier élément de l'expression
      "continue.html") // la valeur à affecter si âge > 18
    : (console.log("Accès refusé !"),
      // etc.
      "stop.html"); // la valeur à affecter si âge <= 18

location.assign(url); // "stop.html"

Utiliser l'opérateur ternaire dans la valeur de retour

On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec if...else où return est la seule instruction utilisée :

js
var func1 = function( .. ) {
  if (condition1) { return valeur1 }
  else if (condition2) { return valeur2 }
  else if (condition3) { return valeur3 }
  else { return value4 }
}

var func2 = function( .. ) {
  return condition1 ? valeur1
       : condition2 ? valeur2
       : condition3 ? valeur3
       :              valeur4
}