JavaScript - Optional Chaining

Hallo zusammen, zukünftige JavaScript-Zauberer! ? Heute machen wir uns auf eine aufregende Reise in die Welt der Optional Chaining. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein, und wir werden dies Schritt für Schritt durchgehen. Am Ende dieser Lektion werden Sie wie ein Profi ketten! Lassen Sie uns eintauchen!

Das Problem der nicht-existenten Eigenschaft

Stellen Sie sich vor, Sie versuchen, ein Buch in einer riesigen Bibliothek zu finden. Sie wissen, es sollte im Abschnitt "Science Fiction" auf dem dritten Stock, in der hinteren Ecke sein. Aber was ist, wenn die Bibliothek gar keinen dritten Stock hat? Oder was ist, wenn es keinen "Science Fiction"-Abschnitt gibt? Das ist das Art von Problem, das wir oft in JavaScript bei der Handhabung von verschachtelten Objekten haben.

Schauen wir uns ein Beispiel an:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

Wenn Sie diesen Code ausführen, erhalten Sie einen Fehler: "Cannot read property 'books' of undefined". Warum? Weil library.fiction.sciFi nicht existiert! Hier kommt Optional Chaining zur Rettung.

Was ist Optional Chaining in JavaScript?

Optional Chaining ist wie ein Sicherheitsnetz für Ihren Code. Es ermöglicht Ihnen den Zugriff auf verschachtelte Objekteigenschaften, ohne sich Sorgen machen zu müssen, ob die Zwischeneigenschaften existieren. Es wird durch den Operator ?. dargestellt.

Lassen Sie uns unser vorheriges Beispiel mit Optional Chaining neu schreiben:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

Jetzt wirft dies keinen Fehler mehr, sondern gibt einfach undefined zurück. Es ist, als ob Sie fragen: "Wenn sciFi existiert, können Sie mir bitte seine books geben? Wenn nicht, keine Sorge!"

Optional Chaining bei Funktionsaufrufen

Optional Chaining ist nicht nur für Objekteigenschaften, sondern kann auch bei Funktionsaufrufen verwendet werden! Stellen wir uns ein Bibliothekssystem vor, bei dem Bücher ausgeliehen werden können:

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`Checking out ${book}`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

In diesem Beispiel wird 'The Hobbit' ausgeliehen, aber nichts mit 'Dune' passiert, weil sciFi nicht existiert. Keine Fehler, nur ruhiges Segeln!

Optional Chaining mit Ausdrücken

Sie können Optional Chaining auch mit eckiger Klammernotation verwenden. Dies ist nützlich, wenn Ihre Eigenschaftsnamen dynamisch oder special characters enthalten:

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

Dies gibt undefined zurück, weil es keinen Benutzer mit der ID '789' gibt, aber es wirft keinen Fehler.

Optional Chaining mit dem "delete"-Operator

Der delete-Operator kann auch mit Optional Chaining verwendet werden. Dies ist praktisch, wenn Sie eine Eigenschaft löschen möchten, die möglicherweise nicht existiert:

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

Der erste delete wird wie erwartet funktionieren und innerProp entfernen. Der zweite wird nichts tun, aber keinen Fehler werfen.

Kurzschließen mit Optional Chaining

Optional Chaining hat eine nette Funktion namens Kurzschließen. Wenn die linke Seite des ?. null oder undefined ist, wird die Auswertung gestoppt und undefined zurückgegeben:

const obj = null;
console.log(obj?.prop?.subProp);  // Gibt undefined zurück

Dies ist super hilfreich, um die lästigen "Cannot read property of null" Fehler zu vermeiden!

Nullish Coalescing Operator mit Optional Chaining

Der Nullish Coalescing Operator (??) funktioniert großartig mit Optional Chaining. Er ermöglicht es Ihnen, einen Standardwert bereitzustellen, wenn das Ergebnis der Optional Chaining null oder undefined ist:

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? 'arbeitslos');  // Gibt 'arbeitslos' zurück
console.log(user.details?.age ?? 'unbekannt');     // Gibt 30 zurück

Dies ist perfekt, um Standardwerte bereitzustellen, wenn Eigenschaften möglicherweise nicht existieren.

Hier ist eine Tabelle, die die Methoden zusammenfasst, die wir behandelt haben:

Methode	Syntax	Beschreibung
Eigenschaftszugriff	obj?.prop	Sicherer Zugriff auf verschachtelte Objekteigenschaften
Funktionsaufruf	func?.()	Sicherer Aufruf einer Funktion, die möglicherweise nicht existiert
Ausdruck	obj?.[expr]	Sicherer Zugriff auf Eigenschaften mit dynamischen oder besonderen Namen
Delete-Operator	delete obj?.prop	Sicheres Löschen einer Eigenschaft, die möglicherweise nicht existiert
Kurzschließen	obj?.prop?.subProp	Stoppt die Auswertung, wenn ein Teil null oder undefined ist
Mit Nullish Coalescing	obj?.prop ?? defaultValue	Bereitstellung eines Standardwerts für null oder undefined Ergebnisse

Und das war's, Leute! Sie haben gerade Ihre JavaScript-Fähigkeiten mit Optional Chaining aufgestockt. Denken Sie daran, dass Programmieren wie das Bauen mit LEGO ist – beginnen Sie mit den Grundlagen, und bevor Sie es wissen, werden Sie Meisterwerke erschaffen. Weiter üben, neugierig bleiben und viel Spaß beim Programmieren! ??‍??‍?

Credits: Image by storyset