L'opérateur conditionnel
========================

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`.

Exemple interactif
------------------

Syntaxe
-------


```js
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 :


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


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


```js
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
}
```

Spécifications
--------------

| Specification |
| --- |
| ECMAScript Language Specification # sec-conditional-operator |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'instruction `if...else`
* Le chaînage optionnel