Éviter les pièges des évaluations booléennes imprécises en JS/TS

Dans le monde du développement web, nous sommes souvent confrontés à des défis qui, à première vue, semblent simples, mais qui peuvent rapidement se transformer en casse-têtes complexes. Récemment, j'ai vécu une expérience intéressante lors d'un projet Angular qui m'a rappelé l'importance de la précision dans l'évaluation des conditions booléennes en TypeScript. Je souhaite partager cette leçon avec vous, en espérant qu'elle vous aidera à éviter les mêmes écueils.

Le contexte du problème

La situation initiale

Dans un projet Angular, j'étais confronté à une condition qui impliquait quatre variables booléennes. Parmi ces quatre, deux dépendaient de données asynchrones provenant du backend via des observables. L'objectif était simple : la condition ne devait être vraie que si ces deux variables spécifiques étaient fausses.

L'approche initiale et ses limites

Initialement, j'ai opté pour une approche qui me semblait logique et concise :

if (terrainPret && arbitreArrive && 
    !equipeLocaleAbsente && !equipeVisiteuseAbsente) {
  // Commencer le match
}

Cette approche semblait élégante : l'utilisation du point d'exclamation (!) devait garantir que les variables asynchrones soient fausses. Cependant, j'ai rapidement découvert que cette méthode cachait un piège subtil.

Le piège de l'évaluation booléenne

La révélation

Le problème est apparu lorsque j'ai réalisé que mon code ne se comportait pas comme prévu. Après investigation, j'ai compris que j'avais négligé un aspect crucial de l'évaluation booléenne en TypeScript.

L'explication technique

En TypeScript, plusieurs valeurs sont considérées comme "falsy", c'est-à-dire qu'elles sont évaluées comme fausses dans un contexte booléen. Ces valeurs incluent :

• false
• 0
• "" (chaîne vide)
• null
• undefined
• NaN

Dans mon cas, les variables asynchrones pouvaient être undefined avant de recevoir une valeur du backend. Par conséquent, la condition !equipeLocaleAbsente par exemple était vraie non seulement quand la variable était false, mais aussi quand elle était undefined.

La solution : être explicite

L'approche corrigée

Pour résoudre ce problème, j'ai dû être plus explicite dans ma condition :

if (terrainPret && arbitreArrive && 
    equipeLocaleAbsente === false && equipeVisiteuseAbsente === false) {
  // Commencer le match
}

Cette approche garantit que les variables asynchrones sont spécifiquement false, et non pas simplement une valeur "falsy".

Les avantages de la précision

Cette solution présente plusieurs avantages :

1. Elle élimine l'ambiguïté dans l'évaluation des conditions.
2. Elle rend le code plus lisible et plus explicite dans ses intentions.
3. Elle prévient les comportements inattendus liés à l'évaluation de valeurs "falsy".

Conclusion

Cette expérience m'a rappelé l'importance de la précision et de la clarté dans le code, particulièrement lorsqu'on travaille avec des opérations asynchrones et des évaluations booléennes. Elle souligne également la nécessité de bien comprendre les nuances du langage que nous utilisons.