??
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.
- Renvoie
- La valeur de gauche si elle n’est ni
nullniundefined, sinon celle de droite.
Exemple
#const savedVolume = 0
const savedName = null
console.log(savedVolume ?? 50)
console.log(savedVolume || 50)
console.log(savedName ?? 'Invité')Définition et utilisation
#L’opérateur ?? vérifie le côté gauche. S’il est null ou undefined, il renvoie le côté droit. Dans tous les autres cas, il renvoie le côté gauche, même si c’est 0, une chaîne vide "" ou false.
C’est là la différence avec ||, qui rejette toutes les valeurs fausses. Pour les nombres et les réglages, c’est important : volume || 50 remplacera un 0 défini intentionnellement par 50, alors que volume ?? 50 laissera le 0.
Le côté droit n’est évalué que s’il est nécessaire. L’opérateur d’affectation ??= ne définit la valeur que si la variable ou la propriété est vide : settings.lang ??= "fr". En combinant ?? avec || ou &&, vous devez ajouter des parenthèses, sinon vous obtenez une erreur de syntaxe.
Syntaxe
#leftExpr ?? rightExpr
target ??= valuePlus d’exemples
#function createGame(options) {
return {
lives: options.lives ?? 3,
hints: options.hints ?? true,
level: options.level ?? 1
}
}
console.log(createGame({ lives: 0, hints: false }))const profile = { name: 'Lucas', avatar: null }
profile.avatar ??= 'default.png'
profile.name ??= 'Anonyme'
console.log(profile)const nickname = ''
const fallback = null
const label = (nickname || fallback) ?? 'Anonyme'
console.log(label)L’écriture nickname || fallback ?? "Anonyme" sans parenthèses est une erreur de syntaxe. Les parenthèses montrent clairement ce qui doit s’exécuter en premier.
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
#- Pour les nombres, les drapeaux et les réglages où
0,falseou""sont des valeurs valides, choisissez??plutôt que||. - Les valeurs par défaut des paramètres (
function fn(x = 5)) et de la déstructuration ne fonctionnent que pourundefined, alors que??fonctionne aussi pournull. Choisissez l’outil adapté aux données que vous recevez.
Entrées associées
#- ?.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.
- &&, ||, !Les opérateurs logiques ET (&&), OU (||) et NON (!). Ils combinent des conditions, et && et || renvoient l’un de leurs côtés.
- ? :L’opérateur conditionnel (ternaire) renvoie l’une de deux valeurs selon une condition, en une seule expression courte.
- DéstructurationLa déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.