Astuce : comment utiliser l’opérateur ternaire en JavaScript

Dans ce didacticiel, nous allons explorer la syntaxe de l’opérateur ternaire en JavaScript et certaines de ses utilisations courantes.

La opérateur ternaire (également connu sous le nom de opérateur conditionnel) peut être utilisé pour effectuer une vérification de condition en ligne au lieu d’utiliser if...else déclarations. Cela rend le code plus court et plus lisible. Il peut être utilisé pour attribuer une valeur à une variable en fonction d’une condition ou exécuter une expression en fonction d’une condition.

Syntaxe

L’opérateur ternaire accepte trois opérandes ; c’est le seul opérateur en JavaScript pour faire ça. Vous fournissez une condition à tester, suivie d’un point d’interrogation, suivi de deux expressions séparées par deux points. Si la condition est considérée comme vraie (la vérité), la première expression est exécutée ; si elle est considérée comme fausse, l’expression finale est exécutée.

Il est utilisé dans le format suivant :

condition ? expr1 : expr2

Ici, condition est la condition à tester. Si sa valeur est considérée comme true, expr1 est exécuté. Sinon, si sa valeur est considérée comme false, expr2 est exécuté.

expr1 et expr2 sont tout type d’expression. Il peut s’agir de variables, d’appels de fonction ou même d’autres conditions.

Par exemple:

1 > 2 ? console.log("You are right") : console.log('You are wrong');

Utilisation de l’opérateur ternaire pour l’affectation de valeur

L’un des cas d’utilisation les plus courants des opérateurs ternaires consiste à décider quelle valeur attribuer à une variable. Souvent, la valeur d’une variable peut dépendre de la valeur d’une autre variable ou condition.

Bien que cela puisse être fait en utilisant le if...else déclaration, cela peut rendre le code plus long et moins lisible. Par exemple:

const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); 

Dans cet exemple de code, vous définissez d’abord la variable message. Ensuite, vous utilisez le if...else instruction pour déterminer la valeur de la variable.

Cela peut être fait simplement en une seule ligne en utilisant l’opérateur ternaire :

const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); 

Utilisation de l’opérateur ternaire pour l’exécution d’expressions

Les opérateurs ternaires peuvent être utilisés pour exécuter n’importe quel type d’expression.

Par exemple, si vous voulez décider quelle fonction exécuter en fonction de la valeur d’une variable, vous pouvez le faire comme ceci en utilisant le if...else déclaration:

if (feedback === "yes") {
  sayThankYou();
} else {
  saySorry();
}

Cela peut être fait en une seule ligne en utilisant l’opérateur ternaire :

feedback === "yes" ? sayThankYou() : saySorry();

Si feedback a la valeur yespuis le sayThankYou fonction sera appelée et exécutée. Sinon, le saySorry fonction sera appelée et exécutée.

Utilisation de l’opérateur ternaire pour les vérifications nulles

Dans de nombreux cas, vous pouvez gérer des variables qui peuvent ou non avoir une valeur définie, par exemple, lors de la récupération de résultats à partir d’une entrée utilisateur ou lors de la récupération de données à partir d’un serveur.

L’opérateur ternaire permet de vérifier qu’une variable n’est pas null ou undefined en passant simplement le nom de la variable à la position de l’opérande condition.

Ceci est particulièrement utile lorsque la variable est un objet. Si vous essayez d’accéder à une propriété sur un objet qui est en fait null ou undefined, une erreur se produira. Vérifier que l’objet est réellement défini en premier peut vous aider à éviter les erreurs.

Par exemple:

let book = { name: 'Emma', author: 'Jane Austen' };
console.log(book ? book.name : 'No book'); 

book = null;
console.log(book ? book.name : 'No book'); 

Dans la première partie de ce bloc de code, book est un objet avec deux propriétés — name et author. Lorsque l’opérateur ternaire est utilisé sur bookil vérifie que ce n’est pas null ou undefined. Si ce n’est pas le cas, c’est-à-dire qu’il a une valeur, le name la propriété est accessible et connectée à la console. Sinon, si c’est nul, No book est connecté à la console à la place.

Depuis book n’est pas null, le nom du livre est enregistré dans la console. Cependant, dans la deuxième partie, lorsque la même condition est appliquée, la condition dans l’opérateur ternaire échouera, puisque book est null. Ainsi, « Aucun livre » sera enregistré dans la console.

Conditions imbriquées

Bien que les opérateurs ternaires soient utilisés en ligne, plusieurs les conditions peut être utilisé dans le cadre des expressions d’un opérateur ternaire. Vous pouvez imbriquer ou enchaîner plusieurs conditions pour effectuer des vérifications de condition similaires à if...else if...else déclarations.

Par exemple, la valeur d’une variable peut dépendre de plusieurs conditions. Il peut être mis en œuvre à l’aide if...else if...else:

let score = '67';
let grade;
if (score < 50) {
  grade = 'F';
} else if (score < 70) {
  grade = 'D'
} else if (score < 80) {
  grade = 'C'
} else if (score < 90) {
  grade = 'B'
} else {
  grade = 'A'
}

console.log(grade); 

Dans ce bloc de code, vous testez plusieurs conditions sur le score variable pour déterminer la notation alphabétique de la variable.

Ces mêmes conditions peuvent être remplies à l’aide d’opérateurs ternaires comme suit :

let score = '67';
let grade = score < 50 ? 'F'
  : score < 70 ? 'D'
  : score < 80 ? 'C'
  : score < 90 ? 'B'
  : 'A';

console.log(grade); 

La première condition est évaluée, c’est-à-dire score < 50. Si c’est truealors la valeur de grade est F. Si c’est falsealors la deuxième expression est évaluée qui est score < 70.

Cela continue jusqu’à ce que toutes les conditions soient falsece qui signifie que la valeur de la note sera Aou jusqu’à ce que l’une des conditions soit évaluée comme étant true et sa valeur de vérité est attribuée à grade.

CodePen Exemple

Dans cet exemple en direct, vous pouvez tester le fonctionnement de l’opérateur ternaire avec plusieurs conditions.

Si vous entrez une valeur inférieure à 100, le message « Too Low » s’affichera. Si vous saisissez une valeur supérieure à 100, le message « Trop élevé » s’affichera. Si vous entrez 100, le message « Parfait » s’affichera.

Voir le stylo
Opérateur ternaire en JS par SitePoint (@SitePoint)
sur CodePen.

Conclusion

Comme expliqué dans les exemples de ce tutoriel, l’opérateur ternaire en JavaScript a de nombreux cas d’utilisation. Dans de nombreuses situations, l’opérateur ternaire peut augmenter la lisibilité de notre code en remplaçant de longs if...else déclarations.

Lecture connexe :