The nullish coalescing operator (`??`) supplies a fallback only when its left operand is `null` or `undefined`. Otherwise, it returns the left operand. Use it when a value such as `0` is valid and should not be replaced. section 3.4.7
Preserving zero
With `let price: number | undefined = 0`, `price || 100` produces `100` because `0` is falsy. `price ?? 100` produces `0`. If `price` is `undefined`, both expressions produce `100`. section 3.4.7
Listing 3.41. Using the nullish-coalescing operator in the main.ts file in the src folder
let val1: string | undefined;
let val2: string | undefined = "London";
let val3: number | undefined = 0;
let coalesced1 = val1 ?? "fallback value";
let coalesced2 = val2 ?? "fallback value";
let coalesced3 = val3 ?? 100;
console.log(`Result 1: ${coalesced1}`);
console.log(`Result 2: ${coalesced2}`);
console.log(`Result 3: ${coalesced3}`);
The complete TypeScript listing tests an undefined value, a string, and zero with `??`; its console results are a fallback, the string, and zero. section 3.4.7
Parenthesize a coalesced value before comparing it. The expression `price ?? 0 < 50` groups as `price ?? (0 < 50)`, not `(price ?? 0) < 50`. In a ternary expression choosing CSS classes, that mistake can select the same class regardless of the price. section 11.4.1
Choosing an Angular class
A class-binding expression such as `[class.bg-success]="(product.price ?? 0) < 50"` first substitutes zero for a missing price, then compares the result with 50. The parentheses make that order explicit. section 11.4.1
