Maîtriser ?? et ?. en JavaScript moderne

JavaScript moderne propose deux opérateurs particulièrement utiles pour écrire du code plus sûr et plus lisible : la coalescence nulle avec ?? et le chaînage optionnel avec ?.. Ils répondent à deux besoins différents : choisir une valeur de remplacement lorsqu’une donnée est absente, puis accéder à une propriété ou appeler une méthode sans provoquer d’exception.

Ces syntaxes sont devenues courantes dans les applications React, Node.js et TypeScript. Elles réduisent les vérifications répétitives, clarifient l’intention du développeur et facilitent la manipulation de données provenant d’une API, d’un fichier de configuration ou d’une base de données. Les tutoriels de DéveloppeurWeb.com permettent de replacer ces fonctionnalités dans un écosystème JavaScript plus large.

Comprendre la valeur nulle en JavaScript

JavaScript distingue plusieurs valeurs dites falsy : false, 0, NaN, une chaîne vide "", null et undefined. Pourtant, toutes ne signifient pas qu’une donnée est absente. Un compteur à zéro, un prix nul ou un libellé vide peuvent être des informations parfaitement valides.

L’opérateur ??, appelé opérateur de coalescence nulle, vérifie uniquement si l’expression placée à gauche vaut null ou undefined. Dans ce cas, il renvoie l’expression de droite :

const nomAffiche = utilisateur.nom ?? "Anonyme";
const limite = options.limite ?? 20;

Si utilisateur.nom est une chaîne vide, cette chaîne est conservée. De même, une limite fixée à 0 ne sera pas remplacée par 20. Ce comportement le distingue de l’opérateur logique ||, qui considère toutes les valeurs falsy comme absentes.

Choisir entre ?? et ||

Avant l’arrivée de ??, les développeurs écrivaient souvent une expression comme const taille = valeur || 10. Cette solution reste adaptée lorsque toute valeur falsy doit déclencher une valeur par défaut. Elle devient toutefois dangereuse lorsqu’un zéro ou une chaîne vide possède une signification métier.

const score = 0;

console.log(score || 100); // 100
console.log(score ?? 100); // 0

Le choix dépend donc de la règle fonctionnelle. Utilisez ?? pour exprimer « si la donnée n’existe pas » et || pour exprimer « si la donnée est inutilisable ou vide ». Cette nuance apparaît fréquemment dans les paramètres d’URL, les résultats de requêtes et les variables d’environnement.

Il faut aussi connaître une restriction de syntaxe : JavaScript interdit de mélanger directement ?? avec || ou && sans parenthèses. Écrivez par exemple (a || b) ?? c ou a ?? (b || c). Cette contrainte évite des expressions ambiguës et rend la priorité des opérations explicite.

Parcourir des objets avec le chaînage optionnel

Le chaînage optionnel, écrit ?., permet d’accéder à une propriété uniquement si la valeur précédente n’est ni null ni undefined. Au lieu de lever une erreur lorsqu’un objet intermédiaire manque, JavaScript renvoie undefined.

const ville = profil?.adresse?.ville;

Sans ?., il faudrait vérifier chaque niveau de l’objet avant de lire ville. La syntaxe fonctionne également avec les tableaux et les propriétés calculées :

const premierArticle = panier?.articles?.[0];
const cle = "telephone";
const numero = contact?.[cle];

L’opérateur peut aussi sécuriser l’appel d’une fonction facultative. La forme fonction?.() exécute la fonction si elle existe et renvoie undefined dans le cas contraire.

Expression	Comportement si la donnée manque	Usage courant
objet.propriete	Lève une erreur	Donnée obligatoire
objet?.propriete	Renvoie undefined	Objet ou propriété facultatif
objet?.[cle]	Renvoie undefined	Clé calculée ou tableau
fonction?.()	N’exécute rien	Callback optionnel
valeur ?? secours	Utilise secours pour null ou undefined	Valeur par défaut
`valeur		secours`

Le chaînage optionnel ne masque cependant pas toutes les erreurs. Si profil existe, mais que profil.adresse est une chaîne au lieu d’un objet attendu, le résultat peut être surprenant selon l’accès effectué. Il protège contre l’absence d’une valeur, pas contre une structure de données incorrecte.

Combiner ?. et ?? dans du code réel

Les deux opérateurs se complètent naturellement. Le chaînage optionnel récupère une valeur profondément imbriquée, tandis que la coalescence fournit une valeur de remplacement lorsque le résultat vaut undefined ou null.

const langue = configuration?.interface?.langue ?? "fr";
const avatar = compte?.profil?.avatarUrl ?? "/images/avatar-par-defaut.png";

Cette combinaison est pratique pour traiter la réponse partielle d’une API. Elle permet de définir un comportement stable lorsque certains champs ne sont pas renvoyés, sans interrompre le rendu de l’interface.

Dans une application connectée à une base de données, la même logique peut s’appliquer aux objets issus d’un modèle. Le choix de la structure de stockage reste indépendant de cette syntaxe : une comparaison entre SQL ou NoSQL aide à décider comment organiser les données, tandis que ?. et ?? facilitent leur consommation côté JavaScript.

Évitez toutefois de remplacer toutes les validations par un accès optionnel. Si une adresse électronique est indispensable pour envoyer une notification, obtenir simplement undefined peut repousser le problème jusqu’à une étape moins lisible. Dans ce cas, vérifiez explicitement la donnée et produisez une erreur métier claire.

Éviter les pièges de cette syntaxe

Un résultat undefined peut provenir d’une propriété inexistante, d’un objet absent ou d’une fonction qui ne renvoie rien. Avec ?., ces situations sont regroupées. Pour diagnostiquer un problème, il peut donc être nécessaire d’inspecter les différentes étapes plutôt que de chaîner de nombreux accès sur une seule ligne.

Le chaînage optionnel ne peut pas être utilisé partout. Il n’est pas prévu pour le côté gauche d’une affectation :

// Incorrect
utilisateur?.nom = "Léa";

Pour modifier une valeur, il faut d’abord vérifier l’objet ou initialiser sa structure. De même, ?. ne remplace pas une validation de type. Une propriété présente mais incorrecte, comme une méthode qui contient une chaîne, provoquera encore une erreur lors d’un appel inadapté.

La coalescence possède aussi une limite importante : elle ne distingue pas null de undefined. Si l’application doit traiter ces valeurs différemment, utilisez une condition explicite. Cette précision peut être utile avec des formulaires, où null représente parfois une suppression volontaire alors que undefined signale l’absence du champ.

Appliquer ces opérateurs dans une architecture fiable

Dans un serveur Node.js, ?? peut fournir des paramètres par défaut sans écraser une valeur numérique valide. Il convient aux options de pagination, aux délais d’expiration ou aux niveaux de journalisation. Pour une configuration centralisée, il reste utile de documenter la source de chaque valeur et sa priorité.

Les variables d’environnement, un fichier local et un service distant peuvent être combinés avec une règle claire. Les différences entre gestion de configuration montrent pourquoi l’opérateur ne doit pas devenir un substitut à une stratégie de configuration. Il sélectionne une valeur ; il ne garantit ni sa sécurité ni sa cohérence.

Dans React, ces opérateurs sont adaptés au rendu de données asynchrones :

function Profil({ utilisateur }) {
  const nom = utilisateur?.profil?.nom ?? "Utilisateur";
  const message = utilisateur?.notifications?.[0]?.texte ?? "Aucune notification";

  return <p>{nom} : {message}</p>;
}

Pour préserver la qualité du code, utilisez des noms explicites, limitez la profondeur des chaînes et ajoutez des tests pour les cas null, undefined, 0 et chaîne vide. Une courte expression bien choisie améliore la lisibilité ; une expression trop compacte peut cacher une règle métier essentielle.

Adoptez ?. lorsque l’absence d’une donnée est normale et ?? lorsque vous devez définir un repli uniquement pour null ou undefined. Intégrez ces opérateurs dans vos prochains modules JavaScript, testez leurs cas limites et consultez les ressources de DéveloppeurWeb.Com pour approfondir les pratiques modernes du développement web.