Optional Chaining (?.)

Probieren Sie es aus

const adventurer = {
  name: "Alice",
  cat: {
    name: "Dinah",
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined

Syntax

obj?.prop
obj?.[expr]
func?.(args)

Beschreibung

Der ?.-Operator hnelt dem .-Chaining-Operator, auer dass er anstelle eines Fehlers, wenn eine Referenz nullish (null oder undefined) ist, den Ausdruck mit einem Rckgabewert von undefined abbricht. Beim Einsatz bei Funktionsaufrufen gibt er undefined zurck, wenn die gegebene Funktion nicht existiert.

Dies fhrt zu krzeren und einfacheren Ausdrcken beim Zugriff auf verkettete Eigenschaften, wenn die Mglichkeit besteht, dass eine Referenz fehlt. Es kann auch hilfreich sein, den Inhalt eines Objekts zu erkunden, wenn nicht garantiert werden kann, welche Eigenschaften erforderlich sind.

Betrachten Sie zum Beispiel ein Objekt obj, das eine verschachtelte Struktur hat. Ohne Optional Chaining erfordert das Aufsuchen einer tief verschachtelten Untereigenschaft die Validierung der dazwischenliegenden Referenzen, wie etwa:

const nestedProp = obj.first && obj.first.second;

Der Wert von obj.first wird auf nicht-null (und nicht-undefined) berprft, bevor der Wert von obj.first.second aufgerufen wird. Dies verhindert den Fehler, der auftritt, wenn Sie obj.first.second direkt ohne berprfung von obj.first aufrufen wrden.

Dies ist ein idiomatisches Muster in JavaScript, aber bei langen Ketten wird es umstndlich und es ist nicht sicher. Zum Beispiel, wenn obj.first ein Falsy Wert ist, der nicht null oder undefined ist, wie 0, wrde es trotzdem abbrechen und nestedProp zu 0 machen, was mglicherweise nicht erwnscht ist.

Mit dem Optional Chaining-Operator (?.) mssen Sie jedoch nicht explizit testen und basierend auf dem Zustand von obj.first abkrzen, bevor Sie versuchen, auf obj.first.second zuzugreifen:

const nestedProp = obj.first?.second;

Durch die Verwendung des ?.-Operators anstelle von nur ., wei JavaScript, dass es implizit berprfen muss, ob obj.first nicht null oder undefined ist, bevor es versucht, obj.first.second zuzugreifen. Wenn obj.first null oder undefined ist, bricht der Ausdruck automatisch ab und gibt undefined zurck.

Dies entspricht dem Folgenden, auer dass die temporre Variable tatschlich nicht erstellt wird:

const temp = obj.first;
const nestedProp =
  temp === null || temp === undefined ? undefined : temp.second;

Optional Chaining kann nicht auf ein nicht deklariertes Wurzelobjekt angewendet werden, kann aber auf ein Wurzelobjekt mit dem Wert undefined angewendet werden.

undeclaredVar?.prop; // ReferenceError: undeclaredVar is not defined

Optional Chaining bei Funktionsaufrufen

Sie knnen Optional Chaining verwenden, wenn Sie versuchen, eine Methode aufzurufen, die mglicherweise nicht existiert. Dies kann hilfreich sein, zum Beispiel bei der Verwendung einer API, bei der eine Methode entweder aufgrund des Alters der Implementierung oder wegen einer Funktion, die auf dem Gert des Benutzers nicht verfgbar ist, nicht verfgbar sein knnte.

Die Verwendung von Optional Chaining bei Funktionsaufrufen fhrt dazu, dass der Ausdruck automatisch undefined zurckgibt, anstatt eine Ausnahme zu werfen, wenn die Methode nicht gefunden wird:

const result = someInterface.customMethod?.();

Wenn jedoch eine Eigenschaft mit einem solchen Namen existiert, die keine Funktion ist, wird die Verwendung von ?. dennoch eine TypeError-Ausnahme auslsen: "someInterface.customMethod is not a function".

eval?.() ist der krzeste Weg, um in den indirect eval Modus zu gelangen.

Optional Chaining mit Ausdrcken

Sie knnen den Optional Chaining-Operator auch mit Bracket-Notation verwenden, die das bergeben eines Ausdrucks als Eigenschaftsname ermglicht:

const propName = "x";
const nestedProp = obj?.[propName];

Dies ist besonders ntzlich fr Arrays, da auf Array-Indizes mit eckigen Klammern zugegriffen werden muss.

function printMagicIndex(arr) {
  console.log(arr?.[42]);
}

printMagicIndex([0, 1, 2, 3, 4, 5]); // undefined
printMagicIndex(); // undefined; if not using ?., this would throw an error: "Cannot read properties of undefined (reading '42')"

Ungltiges Optional Chaining

Es ist ungltig, dem Ergebnis eines Optional Chaining-Ausdrucks einen Wert zuzuweisen:

const object = {};
object?.property = 1; // SyntaxError: Invalid left-hand side in assignment

Template Literal-Tags knnen keine optionale Kette sein (siehe SyntaxError: tagged template cannot be used with optional chain):

String?.raw`Hello, world!`;
String.raw?.`Hello, world!`; // SyntaxError: Invalid tagged template on optional chain

Der Konstruktor von new-Ausdrcken kann keine optionale Kette sein (siehe SyntaxError: new keyword cannot be used with an optional chain):

new Intl?.DateTimeFormat(); // SyntaxError: Invalid optional chain from new expression
new Map?.();

Short-Circuiting

Wenn das optionale Chaining mit Ausdrcken verwendet wird und der linke Operand null oder undefined ist, wird der Ausdruck nicht ausgewertet. Zum Beispiel:

const potentiallyNullObj = null;
let x = 0;
const prop = potentiallyNullObj?.[x++];

console.log(x); // 0 as x was not incremented

Nachfolgende Eigenschaftszugriffe werden ebenfalls nicht ausgewertet.

const potentiallyNullObj = null;
const prop = potentiallyNullObj?.a.b;
// This does not throw, because evaluation has already stopped at
// the first optional chain

Dies ist gleichwertig mit:

const potentiallyNullObj = null;
const prop =
  potentiallyNullObj === null || potentiallyNullObj === undefined
    ? undefined
    : potentiallyNullObj.a.b;

Dieses Short-Circuiting-Verhalten tritt jedoch nur entlang einer kontinuierlichen "Kette" von Eigenschaftszugriffen auf. Wenn Sie einen Teil der Kette gruppieren, werden nachfolgende Eigenschaftszugriffe dennoch ausgewertet.

const potentiallyNullObj = null;
const prop = (potentiallyNullObj?.a).b;
// TypeError: Cannot read properties of undefined (reading 'b')

Dies entspricht:

const potentiallyNullObj = null;
const temp = potentiallyNullObj?.a;
const prop = temp.b;

Auer, dass die temp-Variable nicht erstellt wird.

Beispiele

Einfaches Beispiel

Dieses Beispiel sucht nach dem Wert der name-Eigenschaft fr das Mitglied CSS in einer Map, wenn es kein solches Mitglied gibt. Daher ist das Ergebnis undefined.

const myMap = new Map();
myMap.set("JS", { name: "Josh", desc: "I maintain things" });

const nameBar = myMap.get("CSS")?.name;

Umgang mit optionalen Rckrufen oder Ereignis-Handlern

Wenn Sie Rckrufe verwenden oder Methoden aus einem Objekt mit einem Destructuring Muster abrufen, haben Sie mglicherweise nicht vorhandene Werte, die Sie nicht als Funktionen aufrufen knnen, es sei denn, Sie haben deren Existenz berprft. Mit ?. knnen Sie diesen zustzlichen Test vermeiden:

// Code written without optional chaining
function doSomething(onContent, onError) {
  try {
    // Do something with the data
  } catch (err) {
    // Testing if onError really exists
    if (onError) {
      onError(err.message);
    }
  }
}

// Using optional chaining with function calls
function doSomething(onContent, onError) {
  try {
    // Do something with the data
  } catch (err) {
    onError?.(err.message); // No exception if onError is undefined
  }
}

Stapeln des Optional Chaining-Operators

Bei verschachtelten Strukturen ist es mglich, Optional Chaining mehrfach zu verwenden:

const customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls", // Detailed address is unknown
  },
};
const customerCity = customer.details?.address?.city;

// This also works with optional chaining function call
const customerName = customer.name?.getName?.(); // Method does not exist, customerName is undefined

Kombination mit dem Nullish Coalescing-Operator

Der Nullish Coalescing-Operator kann nach dem Optional Chaining verwendet werden, um einen Standardwert zu erstellen, wenn keiner gefunden wurde:

function printCustomerCity(customer) {
  const customerCity = customer?.city ?? "Unknown city";
  console.log(customerCity);
}

printCustomerCity({
  name: "Nathan",
  city: "Paris",
}); // "Paris"
printCustomerCity({
  name: "Carl",
  details: { age: 82 },
}); // "Unknown city"

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Nullish Coalescing-Operator (??)