Opérateur ternaire en JavaScript

Dans ce tutoriel, vous apprendrez à utiliser l’opérateur ternaire JavaScript pour rendre votre code plus concis.

Définition ternaire en JavaScript

L’expression se compose de trois opérandes :

  • la condition, la valeur si vraie et la valeur si fausse.
  • L’évaluation de la condition doit donner lieu soit à un résultat vrai/faux, soit à une valeur booléenne.
  • La valeur vraie se situe entre  » ? » et  » : » et est exécutée si la condition renvoie vrai. De même, la valeur fausse se trouve après  » : » et est exécutée si la condition renvoie une valeur fausse.

Opérateur ternaire JavaScript

Lorsque vous souhaitez exécuter un bloc si une condition est évaluée comme vraie, vous utilisez souvent une instruction if…else. Par exemple :

Lorsque vous souhaitez exécuter un bloc si une condition est évaluée comme vraie, vous utilisez souvent une instruction if…else. Par exemple :

let age = 18;
let message;

if (age >= 18) {
  message = 'Tu e majeur';
} else {
  message = 'Tu es mineur';
}

console.log(message);

Dans cet exemple, nous affichons un message indiquant qu’une personne est majeure si son âge est supérieur ou égal à 18 ans. Vous pouvez également utiliser un opérateur ternaire à la place de l’instruction if-else comme ceci :

let age = 18;
let message;

age >= 18 ? (message = 'Tu es majeur.') : (message = 'Non tu es mineur');

console.log(message);

Ou vous pouvez utiliser l’opérateur ternaire dans une expression comme suit :

condition ? Sivrai: Sifaux;

Dans cette syntaxe, la condition est une expression qui donne une valeur booléenne, soit vraie, soit fausse.

Si la condition est vraie, la première expression (Sivrai) est exécutée. Si elle est fausse, la deuxième expression (Sifaux) s’exécute.

La figure suivante illustre la syntaxe de l’opérateur ternaire utilisé dans une expression :

let nomdelavariable = condition ? Sivrai: Sifaux;

Exemples d’utilisation de l’opérateur ternaire en JavaScript

1) Utilisation de l’opérateur ternaire JavaScript pour effectuer plusieurs déclarations

L’exemple suivant utilise l’opérateur ternaire pour effectuer plusieurs opérations, où chaque opération est séparée par une virgule. Par exemple :

let vip = true;
let url = authenticated
  ? (alert('Tu as accès à lespace VIP'), '/vip')
  : (alert('Accès interdit'), '/error');

// redirection vers la page vip ou error
console.log(url); // '/admin'