wpRock
Julien MA Jacob - Développeur WordPress

Les ternaires en JS sont des conditions qui suivent le shéma SI … SINON SI … SINON, avec une syntaxe bien plus courte qu'une condition IF … ELSE IF … ELSE mais aussi plus limitée

JS : Conditions ternaires exécutant des instructions

Commençons par voir comment nous pouvons utiliser une condition ternaire pour exécuter conditionnellement une instruction JavaScript. Il est à noter que nous ne pouvons exécuter qu'une seule instruction par condition.

Conditions ternaires avec schéma IF ... ELSE

La syntaxe des conditions ternaires en JavaScript est la suivante pour une condition suivant le schéma IF ... ELSE.

condition ? instructionIfTrue : instructionIfFalse ;

Voici un exemple de son utilisation :

let x = 42;
42 == x ? console.log("x equal 42") : console.log("x not equal 42");

// Log : 
// x equal 42

La condition IF ... ELSE ci-dessous est équivalent à la condition ternaire présentée ci-dessus.

let x = 42;

if (42 == x) {
    console.log("x equal 42");
} else {
    console.log("x not equal 42");
}

// Log : 
// x equal 42

Conditions ternaires avec schéma IF ... ELSEIF ... ELSE

La syntaxe des conditions ternaires en JavaScript est la suivante pour une condition suivant le schéma IF ... ELSEIF ... ELSE.


condition1 ? instructionIfTrue1 : condition2 ? instructionIfTrue2 : instructionIfElse ;

Il est possible de répéter ce schéma avec autant de condition que l'on le souhaite.


condition1 ? instructionIfTrue1 : 
condition2 ? instructionIfTrue2 : 
condition3 ? instructionIfTrue3 : 
instructionIfElse ;

Voici un exemple de son utilisation :

let x = 42;

x > 42 ? console.log("x is greater than 42") : 
x == 42 ? console.log("x equal 42") : 
console.log("x is less than 42");

// Log : 
// x equal 42

JS : Conditions ternaires avec retour

Une condition ternaire peut aussi être utilisée pour retourner une valeur en fonction d'une condition.

Conditions ternaires avec schéma IF ... ELSE

let x = 42;

let y = 42 == x ? "x equal 42" : "x not equal 42";

console.log(y);

// Log : 
// x equal 42

La condition IF ... ELSE ci-dessous est équivalent à la condition ternaire présentée ci-dessus.

let x = 42;
let y;

if (42 == x) {
    y = "x equal 42";
} else {
    y = "x not equal 42";
}

console.log(y);

// Log : 
// x equal 42

Conditions ternaires avec schéma IF ... ELSEIF ... ELSE

let x = 42;
let y;

y = x > 42 "x is greater than 42" : 
    x == 42 ? "x equal 42" : 
    "x is less than 42";

console.log(y);

// Log : 
// x equal 42

La condition IF ... ELSEIF ... ELSE ci-dessous est équivalent à la condition ternaire présentée ci-dessus.

let x = 42;
let y;

if (x > 42) {
    y = "x is greater than 42";
} elseif (x == 42) {
    y = "x equal 42";
} else {
    y = "x is less than 42";
}

console.log(y);

// Log : 
// x equal 42
Julien .MA Jacob
Développeur WordPress
Julien MA Jacob - Développeur WordPress
🧙‍♂️ Passionné par le web et la programmation avec toujours plein de projets en tête 👨‍💻
  Chapitres // JavaScript / JS 🔥 Guide du développeur galactique
wpRock - Guide WordPress Galactique (6)
JS : Les commentaires

Voyons comment les commentaires permettent d'annoter le code JS avec les syntaxes // ... et /* ... */

wpRock - Guide WordPress Galactique (27)
JS : Les opérateurs

Les opérateurs arithmétiques, d'incrémentation / décrémentation, de comparaisons, logiques et d'affectations en JS

wpRock - Guide WordPress Galactique (25)
JS : Conditions SWITCH

La condition SWITCH permet d'exécuter certains codes en fonction de la valeur d'une variable passée en paramètre

wpRock - Guide WordPress Galactique (15)
JS : Conditions ternaires

Les ternaires en JS sont des conditions qui suivent le schéma SI ... SINON SI ... SINON, avec une syntaxe bien plus courte qu'une condition IF ... ELSE IF ... ELSE mais aussi plus limitée

wpRock - Guide WordPress Galactique (14)
JS : Boucle FOR

La boucle FOR permet d'exécuter un code une ou plusieurs fois en fonction de la condition qui lui est passée en paramètre