JavaScript: Nullish coalescing operator (??)

 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.

This can be seen as a special case of the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only 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 (e.g., '' or 0). See below for more examples.

The nullish coalescing operator has the fifth-lowest operator precedence, directly lower than || and directly higher than the conditional (ternary) operator.

const nullValue = null;

const emptyText = ""; // falsy

const someNumber = 42;

const valA = nullValue ?? "default for A";

const valB = emptyText ?? "default for B";

const valC = someNumber ?? 0;

console.log(valA); // "default for A"

console.log(valB); // "" (as the empty string is not null or undefined)

console.log(valC); // 42

 However, due to || being a boolean logical operator, the left-hand-side operand was coerced to a boolean for the evaluation and any falsy value (0, '', NaN, null, undefined) was not returned. This behavior may cause unexpected consequences if you consider 0, '', or NaN as valid values.

Relationship with the optional chaining operator (?.)

The nullish coalescing operator treats undefined and null as specific values and so does the optional chaining operator (?.) which is useful to access a property of an object which may be null or undefined.

const foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"

 

coalescing

@coalesce /,kouə'les/
* nội động từ
- liền, liền lại (xương gãy)
- hợp, hợp lại, kết lại
- hợp nhất, thống nhất (tổ chức, đảng...)