nullish coalescing (??) Nullish Coalescing for JavaScript ( https://github.com/tc39/proposal-nullish-coalescing ) ¶
See also
Overview and motivation ¶
When performing property accesses, it is often desired to provide a default value if the result of that property access is null or undefined.
At present, a typical way to express this intent in JavaScript is by using the || operator.
const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: '',
showSplashScreen: false
}
};
const undefinedValue = response.settings.undefinedValue || 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue || 'some other default'; // result: 'some other default'
This works well for the common case of null and undefined values, but there are a number of falsy values that might produce surprising results:
const headerText = response.settings.headerText || 'Hello, world!'; // Potentially unintended. '' is falsy, result: 'Hello, world!'
const animationDuration = response.settings.animationDuration || 300; // Potentially unintended. 0 is falsy, result: 300
const showSplashScreen = response.settings.showSplashScreen || true; // Potentially unintended. false is falsy, result: tru
The nullary coalescing operator is intended to handle these cases better and serves as an equality check against nullary values (null or undefined).
Syntax ¶
Base case. If the expression at the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.
const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: '',
showSplashScreen: false
}
};
const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false
Prior Art ¶
Articles ¶
Mozilla ¶
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
Contrary to the logical OR (||) operator, the left operand is returned if it is a falsy value which is not null or undefined.
In other words, if you use || to provide some default value to another variable foo, you may encounter unexpected behaviors if you consider some falsy values as usable (eg. ‘’ or 0). See below for more examples.
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
https://javascript.info ¶
Slides ¶
https://www.freecodecamp.org ¶
Nullish coalescing adds the ability to truly check nullish values instead of falsey values . What is the difference between nullish and falsey values, you might ask ?
In JavaScript, a lot of values are falsey, like empty strings, the number 0, undefined, null, false, NaN, and so on .
However, a lot of times you might want to check if a variable is nullish that is if it is either undefined or null, like when it’s okay for a variable to have an empty string, or even a false value.
In that case, you’ll use the new nullish coalescing operator, ??
https://www.jesuisundev.com ¶
L’ES2020 vient également avec un nouvel opérateur logique !
Pour bien comprendre de quoi on parle, rappelons rapidement comment fonctionnent les opérateurs logiques existants.
Il existe aujourd’hui trois opérateurs logiques:
-
le OU logique (||)
-
le ET logique (&&)
-
et le NON logique (!).
On va s’intéresser aux deux premiers.
OU logique ¶
L’opérateur OU logique va tenter de transformer la première expression en true (les gens parlent de truthy ).
Si elle peut être convertie, alors cette valeur est renvoyée. Sinon c’est l’autre valeur qui est renvoyée. Examples :
1 let name = "superToto";
2 console.log(name || "Toto"); // "superToto"
3
4 let name = false;
5 console.log(name || "Toto"); // "Toto"
6
7 let name = undefined;
8 console.log(name || "Toto"); // "Toto"
9
10 let name = null;
11 console.log(name || "Toto"); // "Toto"
ET logique ¶
L’opérateur ET logique va tenter de transformer la première expression en false (les gens parlent de falsy ). Si elle peut être convertie, alors cette valeur est renvoyée.
Sinon c’est l’autre valeur qui est renvoyée. Exemples :
1 let name = "superToto";
2 console.log(name && "Toto"); // "Toto"
3
4 let name = false;
5 console.log(name && "Toto"); // false
6
7 let name = undefined;
8 console.log(name && "Toto"); // undefined
9
10 let name = null;
11 console.log(name && "Toto"); // null
Le problème que beaucoup de développeurs rencontrent avec tout ça et la manière dont est traitée undefined et null.
Par défaut, Javascript transforme ces valeurs en false alors qu’elles ne sont ni vraies ni fausses, juste vides.
Nullish coalescing vient régler ce problème .
Le nouvel opérateur Nullish coalescing ?? ¶
Le nouvel opérateur Nullish coalescing, en utilisant la syntaxe ??, va vérifier si le premier opérande est strictement vide (null ou undefined). Si oui, c’est l’autre valeur qui est renvoyée. Sinon, la première valeur est renvoyée. Exemples :
1 let name = "superToto";
2 console.log(name ?? "Toto"); // "superToto"
3
4 let name = false;
5 console.log(name ?? "Toto"); // false
6
7 let name = undefined;
8 console.log(name ?? "Toto"); // "Toto"
9
10 let name = null;
11 console.log(name ?? "Toto"); // "Toto"
Boum ! Tu peux gérer tes valeurs Nullish comme tu traites les Falsy et Truthy ! Pas mal non ?