Nullish Coalescing Operator

ยท

3 min read

The nullish coalescing operator, though spelling the name is quite difficult but it is very easy to understand. ES2020 introduced the nullish coalescing operator which is a logical operator and accepts two values:

leftExpr ?? rightExpr
  • Nullish Coalescing Operator is denoted using ??.

How Nullish Coalescing Operator Works

The nullish coalescing operator returns the right-hand side operand if the left-hand side operand is null or undefined. Let us see the below code:

const name = "Priyanka"
const age = null;

console.log(age ?? name) // output: Priyanka
console.log(undefined ?? 0)  //output: 0

In the above example, both the outputs are same.

  • In first statement, left-hand side operand is null so the output should be right-hand side operand i.e. Priyanka.

  • In second statement, left-hand side operand is undefined so the output should be right-hand side operand i.e. 0.

Why Nullish Coalescing Operator

This working of this logical operator is very simple. This can seen as a special case of short circuiting OR operator.

Let us briefly discuss short circuiting OR operator:

OR operator is evaluated from left to right and returns the right-hand side operand if the left-hand side operand is any falsy value (0, โ€œโ€, [], null, undefined, NaN) , not only null or undefined. Let us understand OR operator with the help of below code:

const name = "Priyanka";
const otherName = "New User";

console.log("My name is ", name || otherName) // output: My name is Priyanka

const newName = "";
console.log("Hello", newName || otherName ) // output: Hello, New User

In the above example:

  • There was truthy value (name) in the left-hand side so it returned that value and right-hand side is not even evaluated.

  • There was falsy value ('') in the left-hand side so it evaluated right-hand side and returned that value.

However, the logical OR operator sometimes confuses if you consider 0 or empty strings '' as a valid value. Consider below example:

let counter = 0;
let result = console.log(counter || 1);  // output: 1

Here, counter value is a valid value not a falsy value but still we get 1 as an output. To avoid this pitfall, nullish coalescing operator comes into picture. It only returns the second value when the first one is either null or undefined.

let counter = 0;
let result = console.log(counter ?? 1);  // output: 0

Chaining with nullish coalescing operator.

Multiple statements can be chained using nullish coalescing operator.

const printFullName = null ?? undefined ?? "Priyanka Prajapati"
 console.log(printFullName)  // output: Priyanka Prajapati

In the above code, we have chained two operators.Let's understand what happened in the above code:

  • Considering the first operator, left-hand side operand is null, so it will return the right-hand side value which is undefined.

  • For the second operator, the result of first operator becomes the left-hand side operand, which is undefined, so it will return the right-hand side value which is Priyanka Prajapati.

Chaining with the AND or OR operator

We cannot combine AND or OR operator directly with the nullish coalescing operator, it will give SyntaxError

const printFullName = null || undefined ?? "Priyanka Prajapati"
 console.log(printFullName)  // output: SyntaxError: missing ) after argument list

But this error can be avoided by wrapping the expression on the left of the ?? operator in parentheses to explicitly specify the operator precedences:

const printFullName = (null || undefined) ?? "Priyanka Prajapati"
 console.log(printFullName)  // output: Priyanka Prajapati

Conclusion

This was all about the Nullish Coalescing Operator. If you've reached this point, Thanks for taking your time and reading this article, hope you've enjoyed reading it and found it helpful. Do not hesitate to share your feedback.

Happy Learning !! ๐Ÿ’—

ย