The Nullish Coalescing Operator ?? in JavaScript
The nullish coalescing operator provides a concise syntax for setting a default value if the given value is nullish.
null and undefined are the only nullish values in JavaScript.
function getAnswer(answer) {
// Return `42` if `answer` is null or undefined, otherwise return `answer`
return answer ?? 42;
}
getAnswer('hello'); // 'hello'
getAnswer(''); // ''
getAnswer(0); // 0
getAnswer(null); // 42
getAnswer(undefined); // 42Nullish coalescing is typically used for assigning default values.
Older JavaScript code often used || for assigning default values, but || is error prone because it captures all falsy values, like 0, empty string, and false.
function format(options) {
// Good: `uppercase` will be `true` if `options` is not specified,
// or if `options.uppercase` is `null` or `undefined`.
const uppercase = options?.uppercase ?? true;
// Bad! `uppercase` will be `true` if `options.uppercase === false`
const uppercase = options?.uppercase || true;
}Nullish Coalescing Assignment
The nullish coalescing assignment operator is similar to the nullish coalescing operator, just for assignments.
Nullish coalescing assignment only assigns the value if the left hand side is nullish.
x ??= y is equivalent to x = x ?? y.
function setDefaultOptions(options) {
// If `options.uppercase` is `null` or `undefined`, set to `true`.
// Otherwise, no-op
options.uppercase ??= true;
// The following is equivalent
options.uppercase = options.uppercase ?? true;
}Pre-ES2020 Alternative
The nullish coalescing operator was introduced in ES2020, which makes it a relatively new addition to the JavaScript language. For example, the nullish coalescing operator isn't supported in Node.js 12. However, there is a concise alternative with the ternary operator that works in any version of JavaScript.
function getAnswer(answer) {
// Equivalent to `return answer ?? 42;`
return answer == null ? 42 : answer;
}