JavaScript Academy · Lektion

Optional Chaining mit dem Operator ?.

Greifen Sie sicher auf tief verschachtelte Eigenschaften zu.

Optional Chaining mit dem Operator ?. ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Problem

Das Auslesen einer Eigenschaft eines Werts, der undefined oder null ist, löst einen TypeError aus. Mit optional chaining können Sie verschachtelte Werte sicher auslesen.

const user = {};
console.log(user.profile && user.profile.name);

Der Operator ?.

Der Operator für optional chaining ?. bricht ab und gibt undefined zurück, wenn der Wert auf seiner linken Seite null oder undefined ist, anstatt einen Fehler auszulösen.

const user = {};
console.log(user.profile?.name); // undefined, no error

Tiefe Eigenschaften auslesen

Sie können mehrere ?.-Schritte miteinander verketten, um tief verschachtelte Strukturen zu durchlaufen, ohne auf jeder Ebene manuelle Prüfungen zu benötigen.

const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"

Kurzschlussauswertung

Wenn ein Glied der Kette nullish ist, wird der gesamte Ausdruck zu undefined ausgewertet und der Rest nicht mehr ausgeführt.

const data = { user: null };
console.log(data.user?.address?.city); // undefined

Nur nullish löst den Operator aus

?. führt nur bei null oder undefined zu einer vorzeitigen Rückgabe. Andere falsy-Werte wie 0 oder "" sind echte Werte und werden normal ausgelesen.

const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"

Vergleich mit &&

Vor ?. verkettete man häufig Schutzprüfungen mit &&. Optional chaining ist für dieselbe Absicht kürzer und verständlicher.

const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);

Nach einem Aufruf weiter verketten

Sie können die Verkettung nach einem Methodenaufruf fortsetzen und sicher auf Eigenschaften des zurückgegebenen Werts zugreifen.

const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080

Kurzschluss in der Mitte der Kette

Wenn ein mittleres Glied nullish ist, wird die Auswertung sofort beendet, selbst wenn spätere Glieder andernfalls Funktionen aufrufen würden.

const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/d

Nicht für Zuweisungen

Optional chaining dient zum Auslesen. Sie können keiner optionalen Kette einen Wert zuweisen; auf der linken Seite von = ist dies ein Syntaxfehler.

const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);

Mit Arrays kombinieren

Optional chaining funktioniert auch mit dem Zugriff über eckige Klammern, der später ausführlicher behandelt wird. Die gleiche Sicherheit bei nullish-Werten gilt auch dort.

const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"

Übermäßige Verwendung vermeiden

Verwenden Sie ?. nur dort, wo ein Wert tatsächlich fehlen kann. Eine übermäßige Verwendung kann Fehler verbergen, indem sie Fehler unterdrückt, die Sie eigentlich sehen möchten.

const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"

Kurztest

Sagen Sie das Ergebnis voraus.

Zusammenfassung

Der Operator ?. liest Eigenschaften sicher aus: Wenn die linke Seite null oder undefined ist, gibt er undefined zurück, anstatt einen Fehler auszulösen, und beendet die restliche Kette vorzeitig. Nur nullish-Werte lösen dieses Verhalten aus (nicht 0 oder ""), und der Operator kann nicht als Ziel einer Zuweisung verwendet werden.

Häufig gestellte Fragen

Ist die Lektion „Optional Chaining mit dem Operator ?. “ kostenlos?

Ja — der vollständige Text von „Optional Chaining mit dem Operator ?. “ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Optional Chaining mit dem Operator ?. “?

Greifen Sie sicher auf tief verschachtelte Eigenschaften zu. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Optional Chaining mit dem Operator ?. “?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy