?. et ?? : travailler avec des données qui peuvent manquer

Ce que vous saurez faire

Protéger un appel de méthode et un accès indexé, prévoir jusqu’où ?. court-circuite une expression, et écrire un mélange ?? et || que le moteur accepte. Sauf mention contraire, les exemples s’exécutent tels quels dans la console d’un navigateur récent ou dans Node.js 18 ou plus, sans aucune dépendance.

1. Trois formes, pas une seule

L’original ne montre que l’accès à une propriété. Le chaînage optionnel s’écrit en réalité de trois manières.

const config = {
  nom: 'atelier',
  etiquettes: ['neuf'],
  decrire() {
    return 'atelier pret';
  },
};

console.log(config.reglages?.theme); // undefined
console.log(config.decrire?.());     // "atelier pret"
console.log(config.formater?.());    // undefined
console.log(config.etiquettes?.[0]); // "neuf"
console.log(config.avis?.[0]);       // undefined

Résultat attendu dans la console, dans l’ordre : undefined, atelier pret, undefined, neuf, undefined.

• objet.propriete?.suite protège un accès.
• objet.methode?.() n’appelle la fonction que si methode existe. Attention : si methode existe mais n’est pas une fonction, par exemple un nombre, l’appel échoue quand même avec une TypeError. ?.() teste l’absence, pas le type.
• tableau?.[0] protège un accès indexé, y compris avec une clé calculée.

Référence : chaînage optionnel.

2. Le court-circuit va plus loin que l’accès suivant

Quand la valeur testée vaut null ou undefined, le moteur abandonne toute la suite de la chaîne, pas seulement la propriété qui suit immédiatement.

function trace(valeur) {
  console.log('trace appelée');
  return valeur;
}

const vide = null;
console.log(vide?.liste[trace(0)].nom);
// undefined, et « trace appelée » ne s’affiche jamais

Une parenthèse met fin à la chaîne. Le court-circuit ne franchit pas cette limite :

const donnees = { liste: null };
console.log(donnees.liste?.[0]);       // undefined
console.log((donnees.liste?.[0]).nom); // TypeError

Dans la seconde ligne, la parenthèse produit d’abord undefined, puis .nom est évalué normalement sur cette valeur : l’erreur revient.

3. ?? refuse de cohabiter avec && et ||

Écrire a ?? b || c est une erreur de syntaxe, refusée à l’analyse du fichier. Ce n’est pas une préférence de style : le fichier entier ne s’exécute pas, avant même que la première ligne ne tourne.

const a = null;
const b = 0;
const c = 'repli';

// const valeur = a ?? b || c;  // SyntaxError si vous décommentez cette ligne

console.log((a ?? b) || c); // "repli"
console.log(a ?? (b || c)); // "repli"
console.log((a ?? b) ?? c); // 0

Les parenthèses sont obligatoires parce que les deux lectures possibles ne donnent pas le même résultat dans le cas général. Le langage préfère vous obliger à choisir plutôt que d’imposer une priorité que personne ne retiendrait.

Référence : coalescement nul.

Pièges et limites

• ?. ne valide pas les données. Il évite une exception, il ne garantit pas que la réponse d’une API a la forme attendue. Un champ renommé côté serveur produira des undefined silencieux au lieu d’une erreur visible. Sur une frontière réseau, vérifiez la structure reçue avant de l’utiliser.
• Trop de ?. masque un vrai défaut. Si un champ ne devrait jamais manquer, une erreur bruyante est plus utile qu’un affichage vide.
• ?? ne traite pas la chaîne vide. '' ?? 'défaut' vaut la chaîne vide. Lorsque votre règle métier considère qu’une chaîne vide équivaut à une absence, || est le bon opérateur : le choix dépend du sens, pas de la mode.
• ?. ne s’utilise pas à gauche d’une affectation. objet.a?.b = 1 est refusé. Le chaînage optionnel sert à lire, pas à écrire.

À vous de jouer

À partir de cette réponse, produisez quatre valeurs sans provoquer d’erreur.

const reponse = {
  produit: { nom: 'Clavier', remise: 0, etiquette: '' },
  fabricant: null,
};

1. Le nom du fabricant, ou 'Fabricant inconnu' s’il est absent.
2. La remise, ou 5 si elle est absente. Une remise de 0 doit rester 0.
3. L’étiquette, ou 'Sans étiquette'. Ici, une chaîne vide compte comme une absence d’étiquette.
4. Le premier avis, sachant que la propriété avis n’existe pas.

Correction commentée

const fabricant = reponse.fabricant?.nom ?? 'Fabricant inconnu';
const remise = reponse.produit?.remise ?? 5;
const etiquette = reponse.produit?.etiquette || 'Sans étiquette';
const premierAvis = reponse.avis?.[0];

console.log(fabricant, remise, etiquette, premierAvis);
// Fabricant inconnu 0 Sans étiquette undefined

Ligne 1 : fabricant vaut null, donc ?.nom court-circuite et renvoie undefined, que ?? remplace par le texte de repli.

Ligne 2 : c’est le cas décisif. remise vaut 0, une valeur réelle. ?? ne déclenche le repli que sur null et undefined : le 0 est conservé. Avec || 5, la remise nulle serait devenue cinq pour cent, sans le moindre message d’erreur.

Ligne 3 : ici || est volontaire et correct. La règle énoncée dit qu’une chaîne vide vaut absence d’étiquette ; ?? aurait laissé passer la chaîne vide et affiché un espace blanc. L’opérateur juste est celui qui correspond à la règle, pas celui qui est le plus récent.

Ligne 4 : avis n’existe pas, mais ?.[0] protège l’accès indexé et renvoie undefined au lieu de lever une TypeError.

Dernier point : si vous aviez voulu écrire ces règles en une seule expression mélangeant ?? et ||, il aurait fallu des parenthèses explicites, faute de quoi le fichier n’aurait pas été analysé.