JavaScript Academy · Leçon

Chaînage optionnel avec l’opérateur ?.

Accédez en toute sécurité à des propriétés profondément imbriquées.

Chaînage optionnel avec l’opérateur ?. est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Le problème

Lire une propriété sur quelque chose qui vaut undefined ou null déclenche une erreur TypeError. L’enchaînement optionnel permet de lire des valeurs imbriquées en toute sécurité.

const user = {};
console.log(user.profile && user.profile.name);

L’opérateur ?.

L’opérateur d’enchaînement optionnel ?. s’arrête et renvoie undefined si la valeur située à sa gauche vaut null ou undefined, au lieu de déclencher une erreur.

const user = {};
console.log(user.profile?.name); // undefined, no error

Lire des propriétés imbriquées

Vous pouvez enchaîner plusieurs étapes ?. pour parcourir des structures profondément imbriquées sans ajouter de vérifications manuelles à chaque niveau.

const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"

Court-circuit

Si un maillon de l’enchaînement est nullish, toute l’expression se court-circuite et renvoie undefined ; le reste n’est pas évalué.

const data = { user: null };
console.log(data.user?.address?.city); // undefined

Seules les valeurs nullish le déclenchent

?. ne se court-circuite que pour null ou undefined. Les autres valeurs fausses, comme 0 ou "", sont de vraies valeurs et sont accessibles normalement.

const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"

Comparaison avec &&

Avant ?., on enchaînait des vérifications avec &&. L’enchaînement optionnel est plus court et plus clair pour exprimer la même intention.

const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);

Enchaînement après un appel

Vous pouvez poursuivre l’enchaînement après l’appel d’une méthode et accéder en toute sécurité aux propriétés de la valeur renvoyée.

const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080

Court-circuit au milieu de l’enchaînement

Si un maillon intermédiaire est nullish, l’évaluation s’arrête immédiatement, même si les maillons suivants auraient normalement appelé des fonctions.

const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/d

Pas pour une affectation

L’enchaînement optionnel sert à lire des valeurs. Vous ne pouvez pas affecter une valeur à un enchaînement optionnel : cela constitue une erreur de syntaxe à gauche de =.

const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);

Combiner avec des tableaux

Il fonctionne également avec l’accès entre crochets, qui sera abordé plus loin. La même protection contre les valeurs nullish s’applique.

const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"

Éviter les excès

Utilisez ?. uniquement lorsqu’une valeur peut légitimement être absente. Une utilisation excessive peut masquer des bogues en réduisant au silence des erreurs que vous devriez réellement voir.

const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"

Vérification rapide

Prévoyez le résultat.

Récapitulatif

L’opérateur ?. lit les propriétés en toute sécurité : si le côté gauche vaut null ou undefined, il renvoie undefined au lieu de déclencher une erreur et court-circuite le reste de l’enchaînement. Seules les valeurs nullish le déclenchent, et non 0 ou "" ; il ne peut pas être utilisé comme cible d’une affectation.

Questions Fréquemment Posées

La leçon « Chaînage optionnel avec l’opérateur ?. » est-elle gratuite ?

Oui — le texte complet de « Chaînage optionnel avec l’opérateur ?. » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Chaînage optionnel avec l’opérateur ?. » ?

Accédez en toute sécurité à des propriétés profondément imbriquées. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Chaînage optionnel avec l’opérateur ?. » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy