Türchen 07

Optional Chaining – Sicherer auf verschachtelte Objekte zugreifen

Im Alltag eines JavaScript-Entwicklers ist der Zugriff auf tief verschachtelte Objekte und Arrays eine häufige Aufgabe. Doch was passiert, wenn bestimmte Ebenen dieser Strukturen nicht definiert sind? Ohne entsprechende Überprüfungen kann der Code schnell in Fehler laufen. Mit der Einführung des Optional Chaining Operators (?.) in ES2020 bietet JavaScript nun eine elegante Lösung für dieses Problem.

Das Problem mit verschachtelten Strukturen

Betrachten wir ein Beispiel:

const user = {
  name: 'Alex',
  address: {
    city: 'Berlin',
    postalCode: '10115'
  }
};

console.log(user.address.city); // 'Berlin'

Das funktioniert einwandfrei, solange user und address definiert sind. Aber was passiert, wenn address fehlt?

const user = {
  name: 'Alex'
};

console.log(user.address.city); // TypeError: Cannot read property 'city' of undefined

Um diesen Fehler zu vermeiden, mussten wir bisher umfangreiche Überprüfungen einbauen:

const user = {
  name: 'Alex'
};

if (user && user.address && user.address.city) {
  console.log(user.address.city);
} else {
  console.log('Stadt nicht verfügbar');
}

Einführung in das Optional Chaining

Der Optional Chaining Operator ?. vereinfacht diese Überprüfungen erheblich. Er ermöglicht es, den Zugriff auf verschachtelte Eigenschaften sicher zu gestalten, ohne jedes Mal prüfen zu müssen, ob jede Ebene definiert ist.

Syntax:

object?.property
object?.[expression]
object?.method()

Wenn der Teil vor ?. null oder undefined ist, wird der Ausdruck sofort mit undefined ausgewertet, ohne einen Fehler auszulösen.

Beispiele für die Anwendung

1. Zugriff auf Eigenschaften:

const user = {
  name: 'Alex'
};

console.log(user.address?.city); // undefined

Anstatt einen Fehler zu werfen, wenn address nicht definiert ist, gibt der Ausdruck einfach undefined zurück.

2. Zugriff auf Array-Elemente:

const users = null;

console.log(users?.[0]); // undefined

Wenn users null oder undefined ist, wird der Zugriff auf das erste Element nicht ausgeführt und undefined zurückgegeben.

3. Aufruf von Methoden:

const user = {
  name: 'Alex',
  greet() {
    return 'Hallo';
  }
};

console.log(user.greet?.()); // 'Hallo'

const userWithoutGreet = {
  name: 'Ben'
};

console.log(userWithoutGreet.greet?.()); // undefined

Wenn die Methode greet nicht existiert, wird der Aufruf nicht ausgeführt und undefined zurückgegeben.

Kombination mit dem Nullish Coalescing Operator

Häufig möchte man einen Standardwert verwenden, wenn der Zugriff undefined ergibt. Hier kommt der Nullish Coalescing Operator ?? ins Spiel.

Beispiel:

const user = {};

const city = user.address?.city ?? 'Stadt nicht verfügbar';

console.log(city); // 'Stadt nicht verfügbar'

Wenn user.address?.city undefined ist, wird 'Stadt nicht verfügbar' als Standardwert verwendet.

Vorsicht bei der Verwendung

• Nur bei null oder undefined: Der Optional Chaining Operator überprüft nur auf null oder undefined. Wenn die Eigenschaft existiert, aber einen anderen falsy Wert wie false, 0 oder '' hat, wird der Zugriff dennoch ausgeführt.

  const data = { value: 0 };
  
  console.log(data?.value); // 0
  

• Nicht überstrapazieren: Obwohl Optional Chaining den Code vereinfacht, sollte es nicht dazu führen, dass man die Datenstruktur nicht mehr kennt. Ein zu häufiger Gebrauch kann den Code schwerer lesbar machen.

Praktische Anwendungsfälle

1. Arbeiten mit API-Daten:

Bei Daten, die von externen APIs stammen, ist es oft unklar, ob bestimmte Felder vorhanden sind.

fetch('https://api.example.com/user/123')
  .then(response => response.json())
  .then(data => {
    console.log(data.profile?.email ?? 'E-Mail nicht verfügbar');
  });

2. Ereignishandling im Browser:

element.addEventListener('click', (event) => {
  const button = event.target?.dataset?.button;
  if (button) {
    // Aktion basierend auf dem Button-Datensatz
  }
});

Vergleich mit traditionellen Methoden

Im Vergleich mit der traditionellen Methode ist diese Schreibweise jedoch wesentlich leichter zu lesen und zu schreiben. Am Ende schreiben wir den Code ja für uns und nicht für die Maschine.

Ohne Optional Chaining:

if (object && object.property && object.property.subProperty) {
  // Zugriff auf subProperty
}

Mit Optional Chaining:

if (object?.property?.subProperty) {
  // Zugriff auf subProperty
}

Der Code wird nicht nur kürzer, sondern auch besser lesbar.

Fazit

Der Optional Chaining Operator ?. ist ein wertvolles Werkzeug in modernen JavaScript-Anwendungen. Er reduziert den Aufwand für Null- und Undefined-Prüfungen und macht den Code sauberer und wartbarer. Insbesondere beim Umgang mit komplexen oder unsicheren Datenstrukturen bietet er eine elegante Lösung, um Fehler zu vermeiden.

Nutze Optional Chaining in deinem nächsten Projekt und erlebe, wie es die Arbeit mit verschachtelten Objekten erleichtert!