Que sont les short-circuit evaluations ?

Comme vous l’avez lu dans mon précédent article , vous pouvez utiliser les opérateurs ternaires pour faciliter l’écriture de conditions basiques (cliquez-ici).

Je vous propose aujourd’hui d’aller encore plus loin dans la simplification avec ce que nous appelons communément : les short-circuit evaluations. C’est parti !

Que sont les short-circuit evaluations ?

Ce sont littéralement des conditions qui viennent court-circuiter une partie de votre code en fonction des opérandes que vous lui avez indiqué. Ce type de conditions peut s’avérer utile dans quelques circonstances pour éviter un sempiternel if / else et permettre de garder une fluidité dans votre code. Je vous exposerai quelques cas d’usages précis à la fin de cet article, une fois que je vous aurai expliqué la base.

Le short-circuit && (AND)

L’opérateur logique && permet de retourner vrai lorsque tous les opérandes sont vrais. S’il y a le moindre grain de sable dans l’engrenage et qu’une valeur est de type falsy (voir ma définition des valeurs truthy et falsy dans mon article sur les opérateurs ternaires cliquez-ici) l’ensemble sera considéré comme faux. Donc en résumé cela vous permet de coder un principe de tout ou rien.

truthy && truthy
// true
truthy && falsy
// false
fasly && falsy
// false

Prenons un exemple tout bête pour comprendre à quoi cela peut ressembler dans les faits si l’on met cette syntaxe en parallèle d’une condition classique.

//version classique
if (condition) {
  aRetournerSiVrai()
}
//version raccourci
if (condition) aRetournerSiVrai()

//version short-circuit
condition && aRetournerSiVrai()

Ces 3 versions produisent le même résultat. Si la condition est vraie, on affiche le résultat. Si la condition n’est pas vraie, il ne se passe rien, car l’ensemble est considéré comme faux.

Le short-circuit || (OR)

L’orde des expressions est capital

L’ordre dans lequel vous rédigez les expressions est d’une importance capitale. Si vous écrivez vos short-circuit sans réfléchir, vous n’obtiendrez certainement pas le résultat attendu. Ces expressions sont considérées comme des courts-circuits pour une bonne raison.

Cette expression est lue par JavaScript de gauche à droite. Dès que l’interpréteur va rencontrer une valeur truthy (si OR) ou falsy (si AND), il arrêtera de lire la ligne et ne passera pas aux expressions suivantes.

Voici un petit exercice qui tourne sur stackoverflow pour tester si vous avez compris le principe, pouvez-vous prédire la valeur de f ?

let a
let b = null
let c = undefined
let d = 4
let e = "five"
let f = a || b || c || d || e
console.log(f)

Alors, vous avez trouvé la réponse ? Je vous laisse un peu de temps.

…

….

…..

Que va afficher f ? La solution est 4 ! Si vous avez découvert la bonne réponse, toutes mes félicitations. Si tel n’est pas le cas, voici l’explication qui devrait vous aider à comprendre le principe.

let a // undefined  (falsy value)
let b = null // null       (falsy value)
let c = undefined // undefined  (falsy value)
let d = 4 // number     (truthy value) => l'intepréteur s'arrête
let e = "five" // a été court-circuité par l'interpréteur
let f = a || b || c || d || e

Si l’on revient maintenant au premier exemple avec l’opérateur &&.

condition && aRetournerSiVrai()

Ce qu’il est important de retenir c’est que si ce qui est placé dans « condition » est faux, l’interpréteur va s’arrêter et ne retournera pas la fonction pour la bonne et simple raison qu’il ne l’aura pas lu.

Enchainer les short-circuit evaluation

Maintenant que vous avez compris le principe, vous pouvez tout à fait enchainer les short-circuit evaluation. Si vous souhaitez les enchainer, il y a une règle d’or que vous devez retenir : && est prioritaire sur ||. Un peu comme en maths ou la multiplication est prioritaire sur l’addition. Et, comme en maths, les parenthèses permettent de s’affranchir de cette contrainte.

expr1 || (expre2 && expre3)
//cela correspond à
expr1 || (expre2 && expre3)

Prenez garde à l’abus de short-circuit evaluation, tout comme l’abus d’alcool cela peut s’avérer dangereux pour la santé. Il faut les utiliser avec parcimonie. Ce que vous devez toujours garder à l’esprit c’est la compréhension et la lisibilité de votre code. Vous devez faire en sorte que votre code soit limpide pour vous-même et pour les autres si vous travaillez en équipe.

Pour quels cas d’usage ?

Utiliser || pour initialiser des variables

|| est très pratique pour initialiser des variables lorsque vous voulez afficher des données personnalisées pour vos utilisateurs ou afficher des données par défaut s’il ne s’agit que d’un visiteur.

const user = "Carlito"
//version classique
let name
if (user) {
  name = user
} else {
  name = "Personne"
}
console.log(name) //affiche Carlito

//version short-circuit
const name = user || "Personne"
console.log(name) //affiche Carlito

Non seulement votre code est plus court, mais aussi plus clair à mon sens, car vous ne « cassez » pas le rythme de votre code avec une condition qui fait trois pieds de long. Voilà qui est redoutablement efficace.

Utiliser && pour afficher un menu dynamique avec React

En se servant des short-circuit evaluations, il est possible de coder un menu qui s’adapte en fonction du statut de l’utilisateur. Est-il connecté ou non ? S’il l’est, on montre des éléments en plus dans le menu. S’il ne l’est pas, on en affiche d’autres. Plutôt pratique vous ne trouvez pas ?

Si vous n’avez jamais utilisé React, ce code peut vous sembler bien étrange, mais ce n’est pas important. L’objectif de cet article est que vous puissiez comprendre cette syntaxe et réaliser qu’elle est tout à fait utilisable dans le monde réel. Ce n’est pas qu’un délire pour des développeurs fous de minimalisme.

<User>
  {({ data: { user } }) => (
    <Navbar>
      <Link href="/accueil">
        <a>Accueil</a>
      </Link>
      {user && (
        <>
          <Link href="/vendre">
            <a>Vendre</a>
          </Link>
          <Link href="/commandes">
            <a>Commandes</a>
          </Link>
          <Link href="/compte">
            <a>Mon Compte</a>
          </Link>
        </>
      )}
      {!user && (
        <Link href="/connexion">
          <a>Se connecter</a>
        </Link>
      )}
    </Navbar>
  )}
</User>

Le mot de la fin

Pour terminer cet article, j’aimerais insister sur le fait que ce type de syntaxe peut s’avérer peu compréhensible par rapport à la version classique de if/else pour les personnes non initiées. L’idée n’est pas de vous dire d’utiliser les short-circuit evaluation à tort et à travers. Un usage modéré et surtout réfléchi ne pourra qu’être bénéfique pour la lisibilité de votre code.