0 Tage Serie
javascript / beginner
Snippet

Absicherung gegen fehlende Prop-Werte mittels Nullish Coalescing

Der Nullish Coalescing Operator (??) liefert nur dann Fallback-Werte, wenn ein Wert strikt null oder undefined ist. Dies ist sicherer als logisches ODER (||), da gültige falsy Werte wie 0 oder leere Strings erhalten bleiben.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
function ScoreDisplay({ score, defaultText }) {
const resolvedScore = score ?? 0;
const resolvedText = defaultText ?? 'Points';
return (
<div>
<span>{resolvedScore}</span> {resolvedText}
</div>
);
}
react
Erklärung
1
const resolvedScore = score ?? 0;
Weist score zu, falls definiert; fällt sonst auf 0 zurück, wobei ein echter Score von 0 erhalten bleibt.
2
const resolvedText = defaultText ?? 'Points';
Nutzt 'Points' als Ersatz-String, falls defaultText null oder undefined ist.
3
<span>{resolvedScore}</span> {resolvedText}
Rendert die aufgelösten Werte sicher ohne das Risiko von undefined-Ausgaben zur Laufzeit.