1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: Opérateur de coalescence des nuls (Nullish coalescing operator)
slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
tags:
- Coalescence
- JavaScript
- Opérateur
- Reference
- falsy
- nullish
translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
original_slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator
---
{{JSSidebar("Operators")}}
L'**opérateur de coalescence des nuls** (`??`), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut `{{jsxref("null")}}` ou `{{jsxref("undefined")}}` et qui renvoie son opérande de gauche sinon.
Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques), l'opérande de gauche sera renvoyé s'il s'agit d'une [valeur équivalente à `false`](/fr/docs/Glossaire/Falsy) **qui n'est ni** `null`**, ni** `undefined`. En d'autres termes, si vous utilisez `||` pour fournir une valeur par défaut à une variable `foo`, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs _falsy_ comme utilisables (par exemple une chaine vide `''` ou `0`). Voir ci-dessous pour plus d'exemples.
{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}
## Syntaxe
leftExpr ?? rightExpr
## Exemples
### Utilisation de l'opérateur de coalescence des nuls
Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que `null` ou `undefined`.
```js
const valeurNulle = null;
const texteVide = ""; // falsy
const unNombre = 42;
const valA = valeurNulle ?? "valeur par défaut pour A";
const valB = texteVide ?? "valeur par défaut pour B";
const valC = unNombre ?? 0;
console.log(valA); // "valeur par défaut pour A"
console.log(valB); // "" (car la chaine vide n'est ni `null` ni `undefined`)
console.log(valC); // 42
```
### Affectation d'une valeur par défaut à une variable
Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (`||`) :
```js
let toto;
// toto ne se voit jamais attribuer de valeur, il vaut donc undefined
let unTexteBateau = toto || 'Coucou !';
```
Cependant, parce que `||` est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur _falsy_ (`0`, `''`, `NaN`, `null`, `undefined`) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer `0`, `''` ou `NaN` comme des valeurs valides.
```js
let compteur = 0;
let texte = "";
let qté = compteur || 42;
let message = texte || "Coucou !";
console.log(qté); // 42 et non 0
console.log(message); // "Coucou !" et non ""
```
L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut `null` ou `undefined` (mais pas d'autres valeurs _falsy_) :
```js
let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy)
let notFalsyText = monTexte || 'Hello world';
console.log(notFalsyText); // Hello world
let preservingFalsy = monTexte ?? 'Salut le voisin';
console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined)
```
### Court-circuitage
À l'instar des opérateurs logiques OR (`||`) et AND (`&&`), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni `null` ni `undefined`.
```js
function A() { console.log('A a été appelée'); return undefined; }
function B() { console.log('B a été appelée'); return false; }
function C() { console.log('C a été appelée'); return "toto"; }
console.log( A() ?? C() );
// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto"
// puisque : A() retourne undefined, les deux expressions sont donc évaluées
console.log( B() ?? C() );
// Inscrit "B a été appelée" puis false
// puisque : B() retourne false (et non null ou undefined) et
// l'opérande de droite n'est pas évaluée
```
### Pas de chaînage possible avec les opérateurs AND ou OR
Il n'est pas possible de combiner les opérateurs AND (`&&`) ou OR (`||`) directement avec l'opérateur de coalescence des nuls (`??`). Un tel cas lèverait une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError).
```js example-bad
null || undefined ?? "toto"; // soulève une SyntaxError
true || undefined ?? "toto"; // soulève une SyntaxError
```
Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :
```js example-good
(null || undefined) ?? "toto"; // Renvoie "toto"
```
### Relation avec l'opérateur de chaînage optionnel (`?.`)
Tout comme l'opérateur de coalescence des nuls, l'[opérateur de chaînage optionnel (?.)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) traite les valeurs `null` et `undefined` comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être `null` ou `undefined`.
```js
let toto = { uneProprieteToto: "coucou" };
console.log(toto.uneProprieteToto?.toUpperCase()); // "COUCOU"
console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined
```
## Spécifications
| Spécification |
| ------------------------------------------------------------------------------------------------ |
| {{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}} |
## Compatibilité des navigateurs
{{Compat("javascript.operators.nullish_coalescing")}}
## Voir aussi
- [_Falsy values_ (Valeurs équivalentes à `false` dans un contexte booléen)](/fr/docs/Glossaire/Falsy)
- [Opérateur de chaînage optionnel (_optional chaining_)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining)
- [Opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR)
- [Valeurs par défaut des arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments)
|
