Chaînage optionnel (optional chaining)

L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit undefined ou null.

Par exemple, considérant un objet obj qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :

let nestedProp = obj.premier && obj.premier.second;

La valeur de obj.premier est confirmée comme n'étant pas null (ni undefined) avant que d'accéder à la valeur de obj.premier.second. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement obj.premier.second directement sans vérifier obj.premier.

Avec l'opérateur de chaînage optionnel (?.), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de obj.premier avant que d'accéder à obj.premier.second :

let nestedProp = obj.premier?.second;

En utilisant l'opérateur ?. au lieu de l'opérateur ., JavaScript sait implicitement qu'il doit vérifier obj.premier pour être certain qu'il ne soit null ou undefined avant que de tenter d'accéder à obj.first.second. Si obj.premier est null ou undefined, l'expression se court-circuite automatiquement et retourne undefined.

C'est équivalent à :

let temp = obj.premier;
let nestedProp = temp === null || temp === undefined ? undefined : temp.second;

Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.

Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur undefined pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :

let result = uneInterface.uneMéthode?.();

Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements

Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec une affectation par décomposition, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant ?., vous pourriez vous passer de cette vérification supplémentaire :

// ES2019
function doSomething(onContent, onError) {
  try {
    // ... faire quelque chose avec les données
  } catch (err) {
    if (onError) {
      // vérifier que onError existe réellement
      onError(err.message);
    }
  }
}

// Utiliser le chaînage optionnel avec les appels de fonctions
function doSomething(onContent, onError) {
  try {
    // ... faire quelque chose avec les données
  } catch (err) {
    onError?.(err.message); // pas d'exception si onError n'est pas défini
  }
}

Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant la notation avec crochets des accesseurs de propriétés :

let nestedProp = obj?.["propName"];

Cet exemple cherche la valeur de la propriété name dans un objet stocké comme propriété de nom bar d'un objet Map alors que cet objet bar n'existe pas. Le résultat est donc undefined.

let monMap = new Map();
monMap.set("foo", { name: "baz", desc: "inga" });

let nameBar = monMap.get("bar")?.name;

Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est null ou undefined, l'expression ne sera par évaluée. Par exemple :

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

console.log(x); // 0 car x n'a pas été incrémenté

Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :

let client = {
  nom: "Carl",
  details: {
    age: 82,
    localisation: "Paradise Falls",
    // adresse détaillée inconnue
  },
};
let villeDuClient = client.details?.adresse?.ville;

// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction
let durée = vacations.trip?.getTime?.();

L'Opérateur de coalescence des nuls (Nullish coalescing operator) peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :

let client = {
  nom: "Carl",
  details: { age: 82 },
};
const villeDuClient = client?.ville ?? "Ville Inconnue";
console.log(villeDuClient); // Ville inconnue

• Opérateur de coalescence des nuls (Nullish coalescing operator)