Comprendre les opérateurs ternaires.

Les conditions sont un élément clé de tout code. Cela permet d’y intégrer de la logique afin de le rendre dynamique. Leur écriture s’avère cependant longue pour parfois effectuer une action toute simple.

Un bloc complet de if/else prend une place non négligeable. Je vais vous montrer comment optimiser votre code en utilisant des opérateurs ternaires aussi appelés opérateurs conditionnels pour des conditions simples.

Que sont les opérateurs ternaires ?

Derrière ce nom barbare se cache en réalité une syntaxe très simple qui a pour but de vous rendre la vie plus facile. Comparez plutôt.

const message = isMember ? `Bonjour ${member.firstName} !` : 'Bonjour inconnu';

//au lieu de la syntaxe classique
const message;
if (isMember) {
	message = `Bonjour ${member.firstName} !`;
} else {
	message = 'Bonjour inconnu';
}

La présentation des opérateurs ternaires peut de prime abord rebuter son monde, mais permettez-moi de vous montrer la chose différemment pour que vous compreniez bien comment lire ce type d’expressions.

condition ? valeurSiVrai : valeurSiFaux

Il faut fournir trois choses à un opérateur ternaire.

1. Une condition à vérifier.
2. Une valeur à définir si la condition est vraie. Truthy en anglais.
3. Une valeur à définir si la condition est fausse. Falsy en anglais.

Qu’est-ce qu’une condition vraie (truthy) ?

Non, je ne vous prends pas pour des imbéciles, je préfère simplement m’assurer que tout le monde comprend bien le principe de vrai ou de faux dans ce contexte. Si je vous ai indiqué plus haut la terminologie anglaise, c’est parce qu’elle a son importance et reflète beaucoup mieux ce qui se passe dans les faits que la traduction dans la langue de Molière.

Plaçons-nous dans un contexte booléen : c’est-à-dire un contexte où tout doit se résumer à vrai ou faux. Comme toutes les valeurs ne sont pas des booléens par nature, JavaScript va faire ce que l’on appelle un transtypage pour traduire chaque type de valeurs et indiquer si sa valeur est plutôt vraie (truthy) ou plutôt fausse (falsy).

Une condition est dite truthy tant qu’elle ne peut pas être considérée comme falsy … ! Ça, c’est de la définition n’est-ce pas ?

Qu’est-ce qu’une condition falsy ?

Sont considérées comme falsy les valeurs suivantes :

• false (ça paraît fou, mais oui, ce qui est faux est falsy)
• 0 (c’est un zéro pas un O bande de petits malins)
• une chaine de caractères vide.
• null
• undefined
• NaN

Dans le monde merveilleux du transtypage, ce sont les seules valeurs que nous pouvons estimer plutôt fausses. Tout le reste est donc truthy. Voilà qui devrait vous aider à y voir plus clair.

Enchainer les opérateurs ternaires

Il arrive souvent que votre code se doive de vérifier plusieurs conditions avant d’afficher un message. Jusqu’à maintenant vous deviez avoir l’habitude d’utiliser vos blocs if/else if / else. Sachez que j’ai une bonne nouvelle : les opérateurs ternaires vont pouvoir venir à la rescousse.

// méthode groovy des opérateurs ternaires
const message = permissionStatus === 40 ? 'admin'
       		  : permissionStatus === 30 ? 'moderator'
              : permissionStatus === 20 ? 'writer'
              : 'user';

//méthode classique un poil verbeuse
const message;
if(permissionStatus === 40) {
	message = 'admin';
} else if (permissionStatus === 30) {
	message = 'moderator';
}else if (permissionStatus === 20) {
	message = 'writer';
}else {
 message = 'user';
}

Ce code vous permet d’enchainer des vérifications simples afin d’afficher le statut de l’utilisateur dynamiquement sans avoir à vous embêter avec la verbosité classique des if / else if et else. Je ne sais pas vous, mais je trouve que faire cette vérification à l’aide des opérateurs ternaires améliore grandement la lisibilité et la fluidité du code.

Réaliser plusieurs opérations avec les opérateurs ternaires

Il est tout à fait possible de réaliser plusieurs opérations au sein des opérateurs ternaires. La seule exigence est de séparer ces opérations par une virgule. Vous pouvez également placer des parenthèses autour de votre expression afin d’améliorer la lisibilité de votre condition.

const message = isMember
  ? (`Bonjour ${member.firstName} !`, (lastLogIn = Date.now()))
  : "Bonjour inconnu"

Quand ne pas utiliser les opérateurs ternaires ?

Il serait facile de tomber littéralement amoureux des opérateurs ternaires et les utiliser à tout va. Mais il est important de rester calme. Dès que votre condition sort de la simple vérification et que l’expression qui s’en suit peut facilement s’écrire sur plusieurs lignes, vous devriez utiliser la syntaxe classique. Les opérateurs ternaires ne sont pas faits pour des situations complexes. Ils sont là pour nous faciliter la vie pour les cas les plus simples où la syntaxe de base peut s’avérer un frein à la fluidité du code.