In the world of web development, we are often faced with challenges that at first glance seem simple, but which can quickly turn into complex puzzles. Recently, I had an interesting experience during an Angular project that reminded me of the importance of precision in evaluating Boolean conditions in TypeScript. I want to share this lesson with you, hoping it will help you avoid the same pitfalls.

The context of the problem

The initial situation

In my Angular project, I was faced with a condition that involved four Boolean variables. Of these four, two depended on asynchronous data coming from the backend via observables. The goal was simple: the condition should only be true if these two specific variables were false.

The initial approach and its limits

Initially, I opted for an approach that seemed logical and concise to me:

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

This approach seemed elegant: using the exclamation mark (!) was to ensure that asynchronous variables were false. However, I quickly discovered that this method hid a subtle trap.

The boolean evaluation trap

The revelation

The problem appeared when I realized that my code was not behaving as expected. After further investigation, I realized that I had overlooked a crucial aspect of Boolean evaluation in TypeScript.

The technical explanation

In TypeScript, several values ​​are considered "falsy", that is, they are evaluated as false in a Boolean context. These values ​​include:

• false
• 0
• "" (empty string)
• null
• undefined
• Nope

In my case, asynchronous variables could be undefined before receiving a value from the backend. Consequently, the condition !equipeLocaleAbsente for example was true not only when the variable was false, but also when it was undefined.

The solution: be explicit

The corrected approach

To resolve this problem, I had to be more explicit in my condition:

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

This approach ensures that asynchronous variables are specifically false, not simply a "falsy" value.

The benefits of precision

This solution has several advantages:

1. It eliminates ambiguity in the evaluation of conditions.
2. It makes the code more readable and more explicit in its intentions.
3. It prevents unexpected behavior linked to the evaluation of "falsy" values.

Conclusion

This experience reminded me of the importance of precision and clarity in code, especially when working with asynchronous operations and Boolean evaluations. It also highlights the need to understand the nuances of the language we use.