Simplifiez les conditions avec les opérateurs logiques et opérateurs ternaires

Lorsque nous codons, nous devons souvent écrire des conditions.

Or, des fois que notre code devienne difficile à relire à cause de celles-ci. C’est pourquoi, nous pouvons dans ces cas-là, utiliser la magie des opérateurs logiques et les opérateurs ternaires.

Alternative à la syntaxe “if”

Nous utilisons souvent les conditions de cette manière:

if (condition) {
  maFonction();
}

Grâce aux opérateurs, nous pouvons effectuer des conditions sans if ! Comment ? Voici la syntaxe:

condition && maFonction();

La fonction est lancée uniquement si condition == true.

Comment est-ce possible ?

L’opération a && b renvoie vrai uniquement si a ET b sont vrais.

Voici les cas de figures:

• Si a est faux, l’opérateur renvoie faux et il n’y a pas besoin de lire b.
• Si a est vrai, l’opérateur ne sait pas encore quoi renvoyer et doit lire la valeur de b. Et c’est en lisant cette valeur que l’opérateur va déclencher la fonction.

Alternative à la syntaxe if (!condition)

Bien entendu, nous pouvons inverser cette condition avec l’une des deux syntaxes:

// (si la condition n'est pas remplie, alors lance la fonction)
!condition && maFonction();

condition || maFonction();

Ces deux syntaxes sont équivalentes.

L’opérateur a || b réagi de la façon opposée que a && b décrit ci-dessus.

Il renvoie faux uniquement si a ET b sont faux.

• Si a est vrai, l’opérateur renvoie vrai et il n’y a pas besoin de lire b.
• Si a est faux, l’opérateur ne sait pas encore quoi renvoyer et doit lire la valeur de b. Et c’est en lisant cette valeur que l’opérateur va déclencher la fonction.

Alternative à la syntaxe “if - else”

Et bien-sûr, nous pouvons utiliser classiquement l’opérateur ternaire pour ajouter un else.

if (condition) {
  maFonction();
} else {
  maFonction2();
}

Voici la syntaxe:

condition ? maFonction() : maFonction2();

L’opérateur ternaire est plus courant en développement et est plus facile à comprendre.

Exemples concrets

Passons maintenant aux exemples concrets.

Voici un premier exemple où l’on souhaite afficher le nombre de messages non lu uniquement s’il y en a.

function Mailbox({ messagesNonLus }) {
  return (
    <div>
      <h1>Bonjour !</h1>
      {messagesNonLus.length > 0 && (
        <h2>Vous avez {messagesNonLus.length} message(s) non-lu(s).</h2>
      )}
    </div>
  );
}

Grâce à cette syntaxe, pas besoin de if, nous allons droit au but, et le code est très simple à lire.

Voici un second exemple qui affiche si un utilisateur est connecté ou non.

function Status({ estConnecte }) {
  return (
    <div>
      L utilisateur {estConnecte ? "est actuellement" : "n'est pas"}
      connecté.
    </div>
  );
}

Le code est plus court et facile à relire.