JavaScript if else en une ligne (et autres conditions)

En JavaScript, on peut utilise les expressions if-else en une seule ligne.

On peut tester nos conditions avec l’opérateur ternaires ou d’autres opérateurs ES6+.

condition ? expression_si_vrai : expression_si_faux

Prenons un exemples concret :

const age = 42

const groupe = age < 18 ? "Mineur" : "Majeur"

L’opérateur ternaire conditionnel - condition en une ligne

Prenons un bout de code simple avec l’instruction if…else de base :

const age = 42

if (age < 18) {
  console.log("Mineur")
} else {
  console.log("Majeur")
}

Dans notre code, on a une variable age qui contient l’age d’une personne.

On test la valeur de notre variable contre la valeur 18, puis on affiche "Mineur" ou "Majeur" en fonction.

Dans notre exemple, c’est la valeur "Majeur" qui sera affichée dans la console, comme 42 est plus grand que 18.

Ce code fonctionne très bien, mais on peut le rendre plus court et plus lisible avec un l’opérateur conditionnel (ternaire) :

const age = 42

console.log(age < 18 ? "Mineur" : "Majeur")

La suite de symboles ? : s’appelle l’opérateur conditionnel.

La structure condition ? expression_si_vrai : expression_si_faux est communément appelée une ternaire pas les développeurs.

Imbriquer if else en une ligne

Il n’y a pas de limites d’imbrication dans l’utilisation des ternaires avec l’opérateur conditionnel.

Prenons une suite de conditions if…else if…else pour obtenir la mention d’un élève à partir d’une moyenne :

const note_moyenne = 14

if (moyenne >= 16.0) {
  console.log("Mention Très Bien")
} else if (moyenne >= 14.0) {
  console.log("Mention Bien")
} else if (moyenne >= 12.0) {
  console.log("Mention Assez Bien")
} else {
  console.log("Pas de mention")
}

On peut choisir de prendre toutes ces conditions et de les mettre en une seule ligne, dans plusieurs ternaires imbriquées :

const note_moyenne = 14

console.log(moyenne >= 16.0 ? "Mention Très Bien" : moyenne >= 14.0 ? "Mention Bien" : moyenne >= 12.0 ? "Mention Assez Bien" : "Pas de mention")

Le résultat est très difficile à lire 🤮

Ok, on a économisé 9 lignes par rapport à notre ancien bloc de code, mais c’est complètement illisible.

Quand on code, on doit toujours penser aux autres personnes qui vont lire notre code, ou à notre “nous du futur” qui aura oublié ce qu’on a codé dans le passé.

On préférera pratiquement toujours la lisibilité à un code court.

Ternaire en plusieurs lignes

On peut aussi écrire une série de ternaires sur plusieurs lignes.

Ce sera plus lisible que toutes les avoir en une seule ligne.

Et si c’est 2-3 conditions maximum, ça peut même simplifier le code.

condition
  ? expression_si_vrai
  : autre_condition_si_faux
  ? expression_si_vrai
  : expression_si_faux

Par exemple, gardons notre exemple de mentions à partir de note moyenne :

const note_moyenne = 14

console.log(
  moyenne >= 16.0
    ? "Mention Très Bien"
    : moyenne >= 14.0
    ? "Mention Bien"
    : moyenne >= 12.0
    ? "Mention Assez Bien"
    : "Pas de mention"
)

On voir qu’on a 3 ternaires imbriquées et c’est relativement lisible.

Mais je préfère quand même la version plus verbose avec les instructions if else de base. 🤷‍♂️

Bonus : L’opérateur &&

Parfois, on n’a pas besoin d’expression si la condition est fausse.

L’opérateur “et logique” && en une ligne permet de tester la valeur d’une condition. Si la condition est true, elle renverra l’expression qui suit &&, sinon elle renverra le résultat de l’evaluation de ce qui précède &&.

On utilise l’opérateur && dans ces cas là .

condition && expression

Renverra le résultat de expression si condition est vraie (Truthy).

Ou condition sans exécuter expression si consition est fausse (Falsy).

💡 Falsy est tout ce que JavaScript évalue comme faux : 0, null, undefined, '', false etc

Truthy c’est tout ce qui est évalué vrai.

Pour tester si une valeur est Truthy ou Falsy, vous pouvez la faire suivre des opérateurs !!

console.log(!!ma_variable)

Sans l’opérateur &&, on pourrait avoir un code qui ressemble à ceci :

const ma_variable = true

const res = ma_variable ? "C'est vrai !" : null

Le double opérateur && nous permet de laisser tomber l’expression fausse de notre ternaire, ici null :

const ma_variable = true

const res = ma_variable && "C'est vrai !"

Dans les deux cas, console.log(res) affichera "C'est vrai !" dans notre cas.

Si ma_variable était false, on aurait null dans le premier cas et false dans le deuxième.

On utilise souvent cet opérateur en ReactJS quand on test le contenu d’une variable dans une expression :

{ma_variable && <div>{ma_variable}</div>}

Cette structure permet de n’afficher la div avec ma_variable que cette dernière n’est pas vide.

⚠️ Attention cependant, il ne faut pas oublier que 0 est évalué à false et des fois, en React, on veut afficher les 0.

Dans les cas où on peut recevoir des 0, on préféra la ternaire avec une bonne condition, ou un meilleur test pour ma_variable.

Conclusion

On a vu ensemble comment utiliser l’opérateur conditionnel ? : pour faire des conditions ternaires en une ligne.

On a aussi vu comment faire plusieurs ternaires imbriquées.

Et même comment utiliser l’opérateur && en une ligne pour simplifier nos conditions ternaires en une seule ligne !

a ? b : c

a ? b : c ? d : e

a && b

Même si utiliser && en une ligne peut avoir l’air plus lisible, n’oubliez pas de favoriser la lisibilité plutôt qu’un code plus court.