JavaScript Academy · Lektion

?. und ?? kombinieren

Kombinieren Sie sicheren Zugriff mit sinnvollen Standardwerten.

?. und ?? kombinieren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Zwei Werkzeuge gemeinsam verwenden

Optional Chaining ?. liest möglicherweise fehlende Werte sicher aus, während Nullish Coalescing ?? einen Standardwert bereitstellt. Gemeinsam ermöglichen sie das Auslesen tief verschachtelter Daten mit einem sauberen Fallback.

const user = {};
console.log(user.profile?.name ?? "Anonymous");

Das gängige Muster

Das Idiom a?.b ?? fallback liest sicher aus und verwendet einen Standardwert, wenn das Ergebnis nullish ist. Dadurch werden ausführliche Prüfketten ersetzt.

const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"

Ersatzwert bei fehlenden Werten

Wenn ein beliebiges Glied nullish ist, liefert ?. den Wert undefined, den ?? anschließend durch den Standardwert ersetzt.

const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"

Tiefe Verschachtelung

Das Muster lässt sich auf tief verschachtelte Strukturen übertragen und bewahrt dabei einen einzigen Fallback am Ende.

const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"

Gültige falsy-Werte erhalten

Da ?? nur bei nullish-Werten einen Standardwert verwendet, bleiben echte 0-Werte aus der Kette erhalten.

const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0

Im Vergleich zur &&- und ||-Falle

a && a.b || fallback würde einen legitimen Wert 0 oder "" fälschlicherweise ersetzen. Die Kombination aus ?. und ?? vermeidet das.

const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50);      // 0, correct

Mit Funktionsergebnissen

Sie können auch das Ergebnis eines optionalen Aufrufs mit einem Standardwert versehen, indem Sie beide Operatoren um einen Methodenaufruf kombinieren.

const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"

Arrayzugriff mit Standardwert

Das Muster funktioniert mit dem Klammerzugriff auf Arrays oder dynamische Schlüssel.

const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"

Anzeigetexte erstellen

Eine praktische Anwendung ist das Erzeugen eines sicheren Anzeigetexts aus unsicheren Daten.

function label(order) {
  return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"

Hinweis zur Operatorrangfolge

?. bindet stärker als ??. Daher wird a?.b ?? c als (a?.b) ?? c gelesen – genau wie gewünscht.

const u = { age: null };
console.log(u?.age ?? 18); // 18

Ein übersichtliches Idiom

Zusammen ersetzen diese Operatoren langen defensiven Code durch eine lesbare Zeile und machen die Absicht unmittelbar verständlich.

const profile = null;
console.log(profile?.bio?.length ?? 0); // 0

Kurze Überprüfung

Sagen Sie die Ausgabe voraus.

Zusammenfassung

Das Idiom obj?.deep?.prop ?? fallback liest möglicherweise fehlende verschachtelte Werte aus und verwendet nur dann einen Standardwert, wenn das Ergebnis null oder undefined ist. Gültige falsy-Werte wie 0 und "" bleiben erhalten – anders als beim Ansatz mit &&/||. ?. bindet stärker als ??, daher ist die Gruppierung automatisch korrekt.

Häufig gestellte Fragen

Ist die Lektion „?. und ?? kombinieren“ kostenlos?

Ja — der vollständige Text von „?. und ?? kombinieren“ 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 „?. und ?? kombinieren“?

Kombinieren Sie sicheren Zugriff mit sinnvollen Standardwerten. 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 3 von 4.

Wie lange dauert die Lektion „?. und ?? kombinieren“?

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