Backbencher.dev

Nullish Coalescing Operator in JavaScript

Last updated on 1 Feb, 2021

Nullish coalescing is an operator in JavaScript just like +, * and so on. The operator is written using two question marks(??). It take two operands. It returns second operand if first operand is undefined or null.

undefined ?? "I am returned"; // "I am returned"
null ?? "I am returned"; // "I am returned"
false ?? "I am NOT returned"; // false

Set Default

We usually assign default value to variables using OR(||) operator.

var name = name || "Guest";

In this case, if name is any falsy value like "" or 0, "Guest" is set as the value. But we need to set "Guest" only if name is either undefined or null. In that case we can use ?? operator.

var name = name ?? "Guest";

Short-Circuiting

Like OR and AND operator, in case of Nullish Coalescing operator, the right hand side operand is only evaluated if left hand side is undefined or null.

false ?? undefined(); // false
undefined ?? undefined(); // TypeError

Chaining with AND or OR

Logical AND(&&) and OR(||) can be combined and used. But Nullish coalescing operator(??) cannot be chained with && or ||.

null || undefined ?? "Hello"

Above line will throw SyntaxError. If there is such a case, we can modify the code like below to remove the error.

(null || undefined) ?? "Hello";

Here we explicitly set the operator precedence using parenthesis.

--- ○ ---
Joby Joseph
Web Architect