Ein schlauerer Defaultwert
Für Defaultwerte gab es in JavaScript schon immer eine schnelle Abkürzung: value || fallback. Funktioniert meistens – hat aber einen eingebauten Haken: Jeder falsy-Wert löst den Fallback aus. 0, '' und false springen auf den Ersatzwert, auch wenn sie eigentlich die richtige Antwort wären.
Der Nullish-Coalescing-Operator ?? räumt damit auf. Er greift nur bei null oder undefined auf den Fallback zurück:
0 und '' überleben. null und undefined nicht. Mehr macht der Operator nicht.
Warum || hier nicht reicht
Hier ist der klassische Bug, den ?? verhindern soll:
Der Nutzer wollte Lautstärke 0 (also Stille) und einen leeren Nickname. Beides wurde stillschweigend überschrieben, weil || nicht zwischen "nicht vorhanden" und "falsy" unterscheiden kann.
Lösung: einfach ?? verwenden:
Jetzt werden 0 und '' unverändert durchgereicht, und nur tatsächlich fehlende Felder bekommen den Defaultwert. Genau das willst du in fast allen Fällen.
Das mentale Modell
?? stellt genau eine Frage: Ist der Wert links null oder undefined? Alles andere zählt nicht.
| Wert links | left || right liefert | left ?? right liefert |
|---|---|---|
null | right | right |
undefined | right | right |
0 | right | left (0) |
'' | right | left ('') |
false | right | left (false) |
NaN | right | left (NaN) |
| beliebiges Objekt | left | left |
Nimm ??, wenn deine Daten sinnvolle falsy-Werte enthalten können. Nimm ||, wenn du wirklich jeden falsy-Wert aussortieren willst (leere Strings, Null-Zählerstände usw.) — den Fall gibt es, aber er ist seltener, als viele denken.
Kurzschluss-Auswertung
Wie || und && wertet auch ?? per Kurzschluss aus. Ist der linke Wert nicht nullish, wird die rechte Seite gar nicht erst ausgeführt:
expensiveDefault() wird nur einmal ausgeführt – nämlich für b. Praktisch wird das immer dann, wenn dein Fallback ein Funktionsaufruf, ein Netzwerk-Request oder sonst irgendetwas ist, das du dir sparen möchtest, wenn es nicht gebraucht wird.
Optional Chaining und Nullish Coalescing kombinieren
?? und ?. wurden in ES2020 gemeinsam eingeführt und sind als Team gedacht. Optional Chaining hangelt sich durch einen möglicherweise nicht existierenden Pfad und liefert undefined, sobald ein Zwischenschritt fehlt. Der Nullish-Coalescing-Operator setzt dann einen sinnvollen Standardwert ein:
Ohne dieses Duo wird aus demselben Code entweder eine hässliche Kette von &&-Prüfungen oder ein try/catch-Block. Mit den beiden passen sicherer Zugriff und sinnvolle Defaultwerte in eine einzige Zeile.
Nullish Assignment mit ??=
a ??= b weist a nur dann den Wert b zu, wenn a entweder null oder undefined ist. Das ist der sogenannte Nullish Coalescing Assignment Operator, und er arbeitet mit Short-Circuit-Auswertung: Hat a bereits einen Wert, wird die rechte Seite gar nicht erst ausgewertet.
Beachte, dass verbose: false und retries: 0 erhalten bleiben – ??= füllt wirklich nur das auf, was fehlt. Im Gegensatz dazu würde ||= beide Werte überschreiben.
Operatorrangfolge und die Klammerregel
?? weigert sich bewusst, ohne Klammern mit || oder && kombiniert zu werden. Folgendes wirft einen SyntaxError:
const x = a || b ?? c; // SyntaxError
Die Sprachdesigner fanden die Vorrangregeln hier uneindeutig genug, um dich zur Klarstellung zu zwingen. Mit Klammern funktioniert's dann problemlos:
Unterschiedliche Klammerung, unterschiedliches Ergebnis. Die Klammern sind nicht nur Deko – sie zeigen späteren Lesern (und dem Parser) unmissverständlich, was du eigentlich gemeint hast.
Nicht dasselbe wie ein Default-Parameter
Default-Parameter in Funktionssignaturen folgen ihrer eigenen Regel: Sie greifen nur, wenn das Argument undefined ist – bei null nicht. Das ist ein feiner, aber wichtiger Unterschied zum ??-Operator, der beide Fälle gleich behandelt.
Wenn auch null den Fallback auslösen soll, nutze ?? innerhalb des Funktionsrumpfs:
Kleiner Unterschied, aber leicht zu übersehen – vor allem, wenn eine API dir null für „kein Wert gesetzt" zurückgibt.
Wann du zu ?? greifen solltest
Nimm ?? als Standard, solange du keinen konkreten Grund für etwas anderes hast. Dieser Operator passt am besten zu dem, wie Daten in der Praxis aussehen: 0, '' und false sind meistens echte, gewollte Werte – und nur wirklich fehlende Daten sollen durch einen Fallback ersetzt werden. || hebst du dir für die Fälle auf, in denen du tatsächlich jeden falsy-Wert austauschen willst.
Weiter geht's: Klassen
Damit ist das Thema Objekte und Arrays abgeschlossen – du hast jetzt das Handwerkszeug, um Datenstrukturen sauber aufzubauen und sicher durch sie zu navigieren. Im nächsten Kapitel dreht sich alles darum, Verhalten zu strukturieren: Klassen, Vererbung und das Prototypensystem, das im Hintergrund die Arbeit macht.
Häufig gestellte Fragen
Was macht der Nullish-Coalescing-Operator in JavaScript?
?? gibt die rechte Seite nur dann zurück, wenn die linke Seite null oder undefined ist. In allen anderen Fällen bleibt der linke Wert stehen. wert ?? fallback ist also der saubere Weg, einen Default zu setzen, ohne dass gültige „falsy" Werte wie 0 oder '' versehentlich überschrieben werden.
Wo liegt der Unterschied zwischen ?? und || in JavaScript?
|| springt bei jedem falsy-Wert an – also bei 0, '', false, NaN, null und undefined. ?? reagiert dagegen ausschließlich auf null und undefined. Wenn 0 oder ein leerer String in deinen Daten legitime Werte sind, nimm ??. Willst du bewusst alle falsy-Werte rausfiltern, ist || weiterhin die richtige Wahl.
Lässt sich Nullish Coalescing mit Optional Chaining kombinieren?
Ja, und genau dafür ist die Kombi gedacht. user?.settings?.theme ?? 'light' hangelt sich sicher durch die Kette, liefert undefined, falls unterwegs etwas fehlt, und setzt dann 'light' ein. Beide Operatoren kamen nicht umsonst zusammen in ES2020 – sie ergänzen sich perfekt.
Was bewirkt der ??=-Operator?
a ??= b weist a nur dann den Wert b zu, wenn a gerade null oder undefined ist. Es ist die logische Nullish-Zuweisung – praktisch eine Kurzform für a = a ?? b, allerdings mit Short-Circuit: Hat a bereits einen Wert, wird die rechte Seite gar nicht erst ausgewertet. Super praktisch, um fehlende Defaults in einem Options-Objekt aufzufüllen.
