[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing [Back]  [Original]

Oprateur de coalescence des nuls (Nullish coalescing operator) - JavaScript | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Oprateur de coalescence des nuls (Nullish coalescing operator)

Baseline
Large disponibilit

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'oprateur de coalescence des nuls (??), est un oprateur logique qui renvoie son oprande de droite lorsque son oprande de gauche vaut null ou undefined et qui renvoie son oprande de gauche sinon.

Contrairement l'oprateur logique OU (||), l'oprande de gauche sera renvoy s'il s'agit d'une valeur quivalente false qui n'est ni null, ni undefined. En d'autres termes, si vous utilisez || pour fournir une valeur par dfaut une variable foo, vous pourriez rencontrer des comportements inattendus si vous considrez certaines valeurs falsy comme utilisables (par exemple une chaine vide '' ou 0). Voir ci-dessous pour plus d'exemples.

Dans cet article

Exemple interactif

const foo = null ?? "default string";
console.log(foo);
// Expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

Syntaxe

js
leftExpr ?? rightExpr;

Exemples

Utilisation de l'oprateur de coalescence des nuls

Dans cet exemple, nous fournirons des valeurs par dfaut mais conserverons des valeurs autres que null ou undefined.

js
const valeurNulle = null;
const texteVide = ""; // falsy
const unNombre = 42;

const valA = valeurNulle ?? "valeur par dfaut pour A";
const valB = texteVide ?? "valeur par dfaut pour B";
const valC = unNombre ?? 0;

console.log(valA); // "valeur par dfaut pour A"
console.log(valB); // "" (car la chaine vide n'est ni `null` ni `undefined`)
console.log(valC); // 42

Affectation d'une valeur par dfaut une variable

Auparavant, lorsque l'on voulait attribuer une valeur par dfaut une variable, une solution frquente consistait utiliser l'oprateur 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 oprateur logique boolen, l'oprande de gauche a t converti en un boolen pour l'valuation et aucune valeur falsy (0, '', NaN, null, undefined) n'a t renvoye. Ce comportement peut entraner des consquences inattendues si on souhaite considrer 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'oprateur de coalescence des nuls vite ce risque en ne renvoyant le deuxime oprande 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 oprateurs logiques OR (||) et AND (&&), l'expression de droite n'est pas value si celle de gauche ne vaut ni null ni undefined.

js
function A() {
  console.log("A a t appele");
  return undefined;
}
function B() {
  console.log("B a t appele");
  return false;
}
function C() {
  console.log("C a t appele");
  return "toto";
}

console.log(A() ?? C());
// Inscrit "A a t appele" puis "C a t appele" et enfin "toto"
// puisque : A() retourne undefined, les deux expressions sont donc values

console.log(B() ?? C());
// Inscrit "B a t appele" puis false
// puisque : B() retourne false (et non null ou undefined) et
// l'oprande de droite n'est pas value

Pas de chanage possible avec les oprateurs AND ou OR

Il n'est pas possible de combiner les oprateurs AND (&&) ou OR (||) directement avec l'oprateur de coalescence des nuls (??). Un tel cas lverait une exception SyntaxError.

js
null || undefined ?? "toto"; // soulve une SyntaxError
true || undefined ?? "toto"; // soulve une SyntaxError

Cependant, fournir des parenthses pour indiquer explicitement la priorit est correct :

js
(null || undefined) ?? "toto"; // Renvoie "toto"

Relation avec l'oprateur de chanage optionnel (?.)

Tout comme l'oprateur de coalescence des nuls, l'oprateur de chanage optionnel (?.) traite les valeurs null et undefined comme des valeurs spcifiques. Ce qui permet d'accder une proprit 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

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification
# prod-CoalesceExpression

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page