?.
L’opérateur ?. (optional chaining) lit une propriété de façon sûre. Quand l’objet est null ou undefined, il renvoie undefined au lieu d’une erreur.
- Renvoie
- La valeur de la propriété ou le résultat de l’appel, ou
undefinedquand la valeur avant?.estnullouundefined.
Exemple
#const léa = { name: 'Léa', address: { city: 'Paris' } }
const guest = { name: 'Invité' }
console.log(léa.address?.city)
console.log(guest.address?.city)Définition et utilisation
#L’opérateur ?. vérifie la valeur à sa gauche. Si c’est null ou undefined, toute l’expression donne immédiatement le résultat undefined. Sinon, il fonctionne comme un point normal.
Il résout un problème fréquent avec des données qui peuvent être incomplètes, par ex. une réponse d’API. Au lieu de user && user.address && user.address.city, il suffit d’écrire user?.address?.city. Il fonctionne aussi avec les crochets obj?.[key] et avec l’appel de fonction callback?.(), qui n’exécute la fonction que si elle existe.
L’opérateur interrompt l’évaluation de toute la chaîne : si user est null, la suite de l’expression user?.profile.name ne s’exécute pas du tout. Vous ne pouvez pas l’utiliser à gauche d’une affectation, et lire une variable non déclarée lèvera toujours une ReferenceError.
Syntaxe
#object?.property
object?.[expression]
function?.(args)Plus d’exemples
#function finishLesson(onFinish) {
console.log('Leçon terminée')
onFinish?.('15 EXP obtenus')
}
finishLesson((message) => console.log(message))
finishLesson()const response = { data: { students: [] } }
const firstName = response.data?.students?.[0]?.name ?? 'Aucun élève'
console.log(firstName)const user = null
console.log(user?.profile.nickname.toUpperCase())Quand user est null, le reste de la chaîne n’est pas évalué, donc l’absence de ?. devant profile ne cause pas d’erreur. Mais si user était un objet sans profile, lire .nickname lèverait une TypeError.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne mettez pas
?.partout « au cas où ». Utilisez-le là où l’absence de valeur est normale. Si un objet devrait toujours exister, une erreur aidera à trouver le problème plus vite. - Combinez
?.avec??pour fournir immédiatement une valeur de repli :user?.nickname ?? "Anonyme". ?.ne réagit qu’ànulletundefined. Une chaîne vide,0oufalsesont traités comme des valeurs normales.
Entrées associées
#- ??L’opérateur ?? (nullish coalescing) renvoie le côté droit seulement quand le côté gauche est null ou undefined. Idéal pour les valeurs par défaut.
- &&, ||, !Les opérateurs logiques ET (&&), OU (||) et NON (!). Ils combinent des conditions, et && et || renvoient l’un de leurs côtés.
- DéstructurationLa déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
- typeofRenvoie une chaîne avec le nom du type d’une valeur, par ex. "number", "string" ou "object".
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.