Chaînage optionnel JavaScript (?.)

L'opérateur de chaînage optionnel ?. est un moyen court et sûr de lire une valeur profondément imbriquée dans une chaîne d'objects connectés, lorsqu'un des maillons de cette chaîne peut ne pas exister. Au lieu de lever une erreur, il s'arrête simplement et retourne undefined. Ce chapitre explique le problème qu'il résout, les trois formes qu'il prend et les quelques règles à respecter pour l'utiliser correctement.

Le problème : lire des propriétés manquantes

Imaginez que vous avez un object user et que vous souhaitez lire la ville depuis un object address imbriqué. Si address est absent, accéder à une propriété dessus lève une erreur :

let user = {}; // a user without an address

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

La raison est que user.address est undefined, et tenter de lire .city depuis undefined n'est pas autorisé. C'est une situation courante quand les données proviennent d'une API, d'un formulaire ou d'une base de données où certains champs sont optionnels.

Avant l'existence de ?., les développeurs contournaient ce problème avec des chaînes && ou des vérifications imbriquées. Ces approches fonctionnent, mais elles sont verbeuses et répètent les noms de propriétés :

let user = {};

// The old way with the && operator
let city = user && user.address && user.address.city;
console.log(city); // undefined

// Or with an even longer ternary
let city2 = user ? (user.address ? user.address.city : undefined) : undefined;
console.log(city2); // undefined

Comment fonctionne le chaînage optionnel

L'opérateur de chaînage optionnel ?. arrête l'évaluation si la valeur qui le précède est null ou undefined, et retourne undefined au lieu de lever une erreur. Ce comportement s'appelle le court-circuit.

Voici la même recherche, désormais sûre et lisible :

Quand user.address est undefined, l'expression user?.address?.city retourne silencieusement undefined. Quand les données sont présentes, la chaîne lit jusqu'à city.

Il ne protège que la valeur à sa gauche

C'est la règle la plus importante, et celle que les débutants comprennent souvent mal. Le ?. vérifie uniquement la valeur immédiatement à sa gauche, pas toute la chaîne.

Considérez a?.b.c :

• Si a est null ou undefined, toute l'expression fait un court-circuit et retourne undefined.
• Mais si a existe et que b est null ou undefined, alors .c reste un accès ordinaire — et il lève une erreur.

let a = { b: null };

console.log(a?.b);    // null — fine, a exists
console.log(a?.b.c);  // TypeError: Cannot read properties of null (reading 'c')

La correction consiste à placer ?. à chaque endroit où une valeur peut légitimement être absente :

let a = { b: null };

console.log(a?.b?.c); // undefined — no error

La règle est donc simple : placez ?. directement après chaque valeur qui pourrait ne pas être là, pas seulement au début de la chaîne.

Le court-circuit arrête toute la chaîne

Quand la partie avant ?. est null ou undefined, le reste de l'expression n'est pas évalué du tout. Cela inclut les appels de fonctions et les accès aux propriétés qui suivent.

C'est une garantie utile : rien après un maillon manquant n'a la chance de s'exécuter ou de provoquer des effets de bord.

Les trois formes du chaînage optionnel

?. n'est pas un opérateur en lui-même — c'est une construction syntaxique qui prend trois formes, une pour chaque façon d'accéder à une valeur.

?. pour l'accès aux propriétés

Utilisez obj?.prop pour lire une propriété quand obj pourrait être null ou undefined.

let user = { name: 'John' };

console.log(user?.name);    // John
console.log(user?.surname); // undefined (key missing, but no error)

?.() pour appeler des méthodes

Utilisez obj.method?.() pour appeler une méthode uniquement si elle existe. Cela est pratique quand un object peut ou non implémenter une méthode donnée.

Si greet n'est pas une fonction (parce qu'elle est absente), ?.() ignore l'appel et retourne undefined au lieu de lever TypeError: greet is not a function.

?.[] pour les clés dynamiques

Utilisez obj?.[key] quand vous lisez une propriété avec la notation entre crochets — par exemple, une clé dynamique stockée dans une variable.

let user = { name: 'Alice' };
let key = 'name';

console.log(user?.[key]); // Alice

let nobody = null;
console.log(nobody?.[key]); // undefined (no error)

Le chaînage optionnel est pour la lecture, pas l'écriture

Vous pouvez utiliser ?. pour lire une valeur, et même pour delete une propriété en toute sécurité. Mais vous ne pouvez pas l'utiliser du côté gauche d'une affectation.

let user = null;

// Reading is fine
console.log(user?.name); // undefined

// Deleting is fine — delete is skipped if user is null
delete user?.name; // no error

// Assignment does NOT work — this is a syntax error
// user?.name = 'John'; // SyntaxError

La raison est qu'il n'y a rien de significatif à affecter quand la partie gauche est absente, donc le langage ne le permet pas.

Ne pas abuser du chaînage optionnel

?. est un outil précis : utilisez-le uniquement là où la valeur à sa gauche est véritablement optionnelle. L'utiliser partout est une erreur, car cela peut masquer de vrais bugs.

Par exemple, si vous faites une faute de frappe dans un nom de propriété, ?. retournera silencieusement undefined au lieu de vous permettre de remarquer le problème :

let user = { name: 'John' };

console.log(user?.nmae); // undefined — typo hidden, no error to alert you

Association avec la coalescence des nuls

Le chaînage optionnel retourne undefined quand un maillon est manquant, ce qui se combine parfaitement avec l'opérateur de coalescence des nuls ?? pour fournir une valeur par défaut.

Ici, user?.name est évalué à undefined, et ?? intervient pour fournir la valeur de repli 'Anonymous'. Cette combinaison est l'une des utilisations les plus courantes de ?. dans la pratique.

Compatibilité navigateur

Le chaînage optionnel fait partie de la spécification ES2020. Il est pris en charge dans tous les navigateurs modernes (Chrome, Firefox, Safari et Edge) et dans Node.js 14 et les versions ultérieures, vous pouvez donc l'utiliser sans transpileur dans les environnements actuels. Pour approfondir les valeurs contre lesquelles il effectue ses vérifications, consultez les types de données JavaScript et les méthodes d'object et this.

Testez vos connaissances