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
condition ? exprSiVrai : exprSiFaux;
Paramètres
condition
-
Une expression qui est évaluée en un booléen (
true
oufalse
). 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) :
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 :
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é).
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
.
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 :
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
Voir aussi
- L'instruction
if...else
- Le chaînage optionnel