Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Opérateur de coalescence des nuls (Nullish coalescing operator)
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.
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 vautnull ouundefined et qui renvoie son opérande de gauche sinon.
Contrairement àl'opérateur logique OU (||), l'opérande de gauche sera renvoyé s'il s'agit d'unevaleur équivalente àfalse qui n'est ninull, niundefined. En d'autres termes, si vous utilisez|| pour fournir une valeur par défaut à une variablefoo, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeursfalsy comme utilisables (par exemple une chaine vide'' ou0). Voir ci-dessous pour plus d'exemples.
Exemple interactif
const foo = null ?? "default string";console.log(foo);// Expected output: "default string"const baz = 0 ?? 42;console.log(baz);// Expected output: 0Syntaxe
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 quenull ouundefined.
const valeurNulle = null;const texteVide = ""; // falsyconst 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); // 42Affectation 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 (||) :
let toto;// toto ne se voit jamais attribuer de valeur, il vaut donc undefinedlet 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 valeurfalsy (0,'',NaN,null,undefined) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer0,'' ouNaN comme des valeurs valides.
let compteur = 0;let texte = "";let qté = compteur || 42;let message = texte || "Coucou !";console.log(qté); // 42 et non 0console.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 vautnull ouundefined (mais pas d'autres valeursfalsy) :
let monTexte = ""; // Un chaine vide (qui est donc une valeur falsy)let notFalsyText = monTexte || "Hello world";console.log(notFalsyText); // Hello worldlet 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 ninull niundefined.
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éesconsole.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éePas 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 exceptionSyntaxError.
null || undefined ?? "toto"; // soulève une SyntaxErrortrue || undefined ?? "toto"; // soulève une SyntaxErrorCependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :
(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 (?.) traite les valeursnull etundefined comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut êtrenull ouundefined.
let toto = { uneProprieteToto: "coucou" };console.log(toto.uneProprieteToto?.toUpperCase()); // "COUCOU"console.log(toto.uneProprieteTiti?.toUpperCase()); // undefinedSpécifications
| Specification |
|---|
| ECMAScript® 2026 Language Specification # prod-CoalesceExpression |