L'opérateur ternaire en JavaScript

Syntaxe

C'est un opérateur à trois opérandes. La condition est évaluée et une valeur est retounée.

// Si condition true alors l'opérateur retourne valeur_si_true // Si condition false alors l'opérateur retourne valeur_si_false condition ? valeur_si_true : valeur_si_false ; // Faire la différence avec cette structure qui ne retourne rien if (condition) {...} else {...}

Exemples

La bonne façon de l'utiliser, c'est de l'utiliser pour ce qu'il est c'est-à-dire un opérateur et d'exploiter sa valeur de retour. Vous pouvez le faire dans une affectation. Vous en avez un exemple ci-dessous : si la condition est vraie, alors la valeur 1 est affectée à x, sinon c'est la valeur 0. Vous le trouverez aussi dans la condition d'une structure conditionnelle.

var condition=true; var x = condition ? 1 : 0 ; alert(x);

On peut mettre plusieurs opérateurs ternaires en "cascade". Ca permet d'évaluer plusieurs conditions.

var nombre=200; var taille = nombre > 100 ? 'Très grand' : nombre > 10 ? 'Grand' : 'Petit'; alert(taille);

Si nombre est plus grand que 100 le premier l'opérateur ternaire retourne 'Trés grand'.

Sinon c'est la condition d'un deuxième opérateur qui est évaluée. Si nombre plus grand que 10 le deuxième opérateur retourne 'Grand' sinon il retourne 'Petit'.

// Ne pas s'en servir comme un if else var condition = ... condition ? alert(1) : alert(2) ; // Ici on programmera ça if (condition) alert(1) else alert(2); // Ne pas essayer de mettre plusieurs instructions var condition = ... // Ca déclenche une erreur à cause du ; condition ? alert(1);alert(2) : ... ;

Pour bien comprendre le fonctionnement d'un opérateur ternaire, je vous donne ci-dessous la fonction qu'il faut écrire pour avoir un fonctionnement équivalent

function ternaire (condition,valeur_si_true,valeur_si_false) { if (condition) return valeur_si_true; else return valeur_si_false; } var x = ternaire(true,1,0); alert(x);