Opérateur ternaire en JS : tout ce que vous devez savoir

Qu’est-ce que le Ternaire ?

Ternary Operator est un opérateur javascript disponible dans tous les navigateurs depuis juillet 2015. Il s'agit d'une alternative abrégée aux instructions if/else. Cet opérateur est largement utilisé dans différents langages de programmation comme Java, C, Python mais nous nous concentrerons dans cet article sur javascript.

Vérifions la syntaxe générale de l'opérateur ternaire.

condition ? ifTrue : ifFalse

Comme vous pouvez le voir dans l'exemple ci-dessus, l'opérateur ternaire remplace les instructions if et else, en conséquence, par ? et : symboles. La condition qui se trouve à gauche du point d’interrogation sera vérifiée. Si c'est vrai, première expression qui se situe entre les ? et la marque : sera exécutée. Si c'est faux, la dernière expression écrite après le symbole : sera exécutée.

Comment ça marche ?

Afin de comprendre le fonctionnement de l'opérateur ternaire, comparons-le avec l'instruction if/else classique.
Le code Javascript ci-dessous enregistrera une chaîne dans la console, sous condition.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

Maintenant, réécrivons ce code en utilisant l'opérateur ternaire.

let a = 10
a == 10 ? console.log("Variable is ten!") : console.log("Variable is not ten!")

L'opérateur ternaire dans ce bloc de code enregistre la chaîne de manière conditionnelle comme nous le souhaitons. Mais il existe une meilleure façon d'écrire cette déclaration.
L'opérateur ternaire exécute non seulement l'expression mais renvoie également la valeur. Ainsi, au lieu d'utiliser l'opérateur pour gérer deux expressions console.log différentes, nous pouvons écrire l'instruction de manière à gérer deux valeurs différentes qui se trouvent dans une seule instruction console.log.
Par exemple :

let a = 10
console.log(a == 10 ? "Variable is ten!" : "Variable is not ten!")

Le résultat de cette ligne sera exactement le même que celui de l'autre expression ternaire que nous avons écrite auparavant. Mais ce code est plus compact et facile à lire.

Nous pouvons utiliser l'opérateur ternaire pour attribuer des valeurs aux variables de manière conditionnelle. Regardons un exemple avec des instructions if/else régulières, puis réécrivons-le en utilisant le ternaire.

let a = 10
let b
if(a === 10){
    b = a * 5
}else{
    b = a * 2
}

Si a vaut 10, le bloc de code le multipliera par 5, sinon il multipliera la variable par 2 et dans les deux cas, l'attribuera à b.
L'alternative utilisant l'opérateur ternaire ressemblera à ce qui suit :

let a = 10
let b = a === 10 ? a * 5 : a * 2

Comme vous pouvez le constater, il est plus pratique d'écrire un code sur une seule ligne pour des opérations de base comme celle-ci.

Conditions imbriquées

Parfois, nous devons utiliser plusieurs conditions if/else les unes dans les autres. L'opérateur ternaire peut être utilisé pour enchaîner les conditions.

let a = 5
if(a === 1){
    console.log("1")
}else if(a === 2){
    console.log("2")
}else{
    console.log("a is not 1 or 2")
}

Ce chaînage de condition présenté ci-dessus peut être représenté à l'aide de l'opérateur ternaire de la manière suivante :

let a = 5
console.log(a === 1 ? "1" : a === 2 ? "2" : "a is not 1 or 2")

Comme vous pouvez le prédire, cela peut facilement devenir très compliqué. C'est pourquoi l'utilisation d'un opérateur ternaire dans des instructions conditionnelles complexes n'est pas requise.

Ternaire dans React

Si vous avez déjà créé une application React, vous savez probablement que le rendu conditionnel est un sujet important. L'opérateur ternaire facilite cette opération. Voyons un exemple de la page officielle de React.
C'est la manière habituelle d'écrire la déclaration :

condition ? ifTrue : ifFalse

Et c'est la même déclaration, mais en utilisant l'opérateur ternaire.

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

Comme vous pouvez le voir, ça a l'air bien mieux. Ainsi, il est parfois plus propre et plus efficace d’écrire des déclarations avec ternaire, en particulier lorsque l’on travaille avec React. Mais dans certains cas, l’opérateur ternaire peut rendre le code encore plus difficile à lire.

Dans quelles autres situations, pensez-vous, devons-nous utiliser ou éviter l'opérateur ternaire ? N'hésitez pas à me faire part de vos impressions dans les commentaires !

Merci d'avoir lu.
Veuillez consulter ces liens pour en savoir plus.

• En savoir plus sur l'opérateur ternaire : opérateur conditionnel (ternaire) - MDN Web Docs
• En savoir plus sur le rendu conditionnel dans React : Rendu conditionnel - React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!