JavaScript Academy · Lektion

Optionale Aufrufe und Indexzugriff

Verwenden Sie Optional Chaining mit Aufrufen und eckigen Klammern.

Optionale Aufrufe und Indexzugriff ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Mehr als das Auslesen von Eigenschaften

Optional Chaining bietet auch Formen zum Aufrufen von Funktionen und zum sicheren Zugriff auf Arrayelemente oder Elemente mit dynamischen Schlüsseln.

const obj = { greet: () => "hi" };
console.log(obj.greet?.()); // "hi"

Optionale Methodenaufrufe

Die Form ?.() ruft eine Funktion nur auf, wenn sie vorhanden ist. Ist die Methode nullish, wird stattdessen undefined zurückgegeben, ohne einen Fehler auszulösen.

const obj = {};
console.log(obj.greet?.()); // undefined, no error

Warum das wichtig ist

Ohne diesen Operator führt der Aufruf einer fehlenden Methode zu einem Fehler. Die Form für optionale Aufrufe schützt sauber vor optionalen Callbacks.

function run(onDone) {
  onDone?.(); // safe whether or not onDone is provided
}
run();
run(() => console.log("done"));

Nur nullish überspringt den Aufruf

?.() überspringt den Aufruf nur, wenn der Wert null oder undefined ist. Bei einem Wert, der keine Funktion ist, tritt beim Aufruf weiterhin ein TypeError auf.

const obj = { greet: 42 };
try {
  obj.greet?.();
} catch (e) {
  console.log("not a function");
}

Optionaler Indexzugriff

Die Form ?.[ ] liest ein Element nur aus, wenn die Basis nicht nullish ist. Das ist für Arrays und berechnete Schlüssel nützlich.

const arr = ["a", "b"];
console.log(arr?.[1]); // "b"
const none = null;
console.log(none?.[0]); // undefined

Dynamische Schlüssel

Der Klammerzugriff mit ?. verarbeitet dynamische Eigenschaftsnamen sicher.

const data = { user: { name: "Mia" } };
const key = "name";
console.log(data.user?.[key]); // "Mia"

Verschachtelte Arrays

Sie können den optionalen Indexzugriff durch verschachtelte Arrays oder Objekte hindurch verketten.

const grid = [[1, 2], [3, 4]];
console.log(grid?.[1]?.[0]); // 3
console.log(grid?.[5]?.[0]); // undefined

Optionaler Aufruf des zurückgegebenen Werts

Sie können die Formen kombinieren: Lesen Sie einen Wert optional aus und rufen Sie ihn anschließend optional auf.

const handlers = { click: () => "clicked" };
console.log(handlers.click?.()); // "clicked"
console.log(handlers.hover?.()); // undefined

Mit Standardwerten kombinieren

Kombinieren Sie diese Formen mit ??, um dem Ergebnis einen Fallback zu geben.

const config = {};
const port = config.get?.() ?? 3000;
console.log(port); // 3000

Arraymethoden sicher aufrufen

Mit Optional Chaining können Sie eine Methode eines möglicherweise fehlenden Arrays aufrufen, ohne den Bestand des Arrays separat prüfen zu müssen.

const state = { tags: null };
console.log(state.tags?.join(", ") ?? "none"); // "none"

Verwenden, wenn Optionalität tatsächlich gegeben ist

Diese Formen sind besonders nützlich für optionale Callbacks und unsichere Datenstrukturen. Vermeiden Sie sie dort, wo ein Wert immer vorhanden sein sollte, damit echte Fehler weiterhin sichtbar werden.

const events = { onSave: null };
events.onSave?.("payload"); // silently does nothing
console.log("continued");

Kurze Überprüfung

Wählen Sie die sichere Aufrufform.

Zusammenfassung

Optional Chaining umfasst ?.() für sichere Methodenaufrufe und ?.[ ] für den sicheren Zugriff über Indizes oder dynamische Schlüssel. Beide Formen geben undefined zurück, wenn die Basis nullish ist, lösen aber weiterhin einen Fehler aus, wenn ein Nicht-Funktionswert aufgerufen wird. Kombinieren Sie sie für Standardwerte mit ?? und verwenden Sie sie nur für tatsächlich optionale Werte.

Häufig gestellte Fragen

Ist die Lektion „Optionale Aufrufe und Indexzugriff“ kostenlos?

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

Verwenden Sie Optional Chaining mit Aufrufen und eckigen Klammern. 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 4 von 4.

Wie lange dauert die Lektion „Optionale Aufrufe und Indexzugriff“?

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