Optional Chaining (?.) und Nullish Coalescing (??) in JavaScript

Kaum ein Fehler nervt im Frontend so oft wie Cannot read properties of undefined. Er passiert, wenn du auf ein Feld eines Objekts zugreifst, das gar nicht da ist. Zwei kleine Operatoren räumen damit auf.

Optional Chaining: ?.

const daten = await res.json();

// Ohne ?. kracht es, wenn "user" oder "adresse" fehlt:
const stadt = daten.user.adresse.stadt;   // 💥

// Mit ?. bricht die Kette sauber ab und liefert undefined:
const stadt = daten?.user?.adresse?.stadt;   // undefined statt Absturz

?. prüft bei jedem Schritt: Ist der Wert null oder undefined, stoppt die Kette und gibt undefined zurück, statt zu werfen. Funktioniert auch bei Methoden (obj.fn?.()) und Arrays (liste?.[0]).

Nullish Coalescing: ??

const anzahl = daten?.count ?? 10;   // 10 nur, wenn count null/undefined ist

?? liefert den rechten Wert nur, wenn links null oder undefined steht. Das ist der wichtige Unterschied zu ||:

const menge = eingabe.wert || 10;   // ⚠️ bei wert = 0 kommt 10 heraus!
const menge = eingabe.wert ?? 10;   // ✅ 0 bleibt 0

|| betrachtet auch 0, "" und false als „leer" und ersetzt sie. Wenn 0 oder ein leerer String gültige Werte sind, ist ?? die richtige Wahl.

Zusammen die Alltagszeile

const titel = seite?.meta?.title ?? "Ohne Titel";

Diese beiden Operatoren ersparen mir defensive if-Kaskaden und eine ganze Sorte Laufzeitfehler. Mehr JavaScript-Snippets auf code.bymw.de.

Quellen

• Optional chaining (?.) — MDN
• Nullish coalescing (??) — MDN