shraddhaaa

Understanding Nullish Coalescing (??)

Understanding Nullish Coalescing (??)

Shraddha Muley's photo
Shraddha Muley
·

3 min read

Table of contents

Introduction

Working with promises, request-response, and API calls is a daily task for developers. While working with these, we might catch some undefined or null responses from the server. And in that case, we want to show something other than that null response.

In ES11(Javascript 2020), an improvement is added to the Javascript
Short Circuit Operators i.e Nullish Coalescing.

First, let's understand,

What is the Short Circuit Operators?

In JavaScript, short-circuiting is the evaluation of the expression from left to right with || (OR) and && (AND) operators.

|| (OR)

The || (OR) operator returns the first truthy value.

true || false

This returns true as an output

Example 1

const a = 10;
const b = 20;

const answer = a || b;
console.log(answer); //10

The || operator returns the first truthy value 10, which is stored in the variable a. But in case, the value of a is any falsy value then it returns the second value.

Example 2

const a = " ";
const b = 20;
const c = "Hello World";

const answer = a || b || c;
console.log(answer); //20

In example 2, it returns 20 because it first checks the value of a which is an empty string. In JavaScript empty string is a falsy value. So after that, it checks the second value which is 20 then it returns 20 as an output.

null, undefined, false, " "(empty string), 0, NaN these are the falsy values

The problem with the || (OR) operator is that it doesn't know the difference between null, undefined, false, " "(empty string), 0, NaN.

&& (AND)

The && (AND) operator returns the second value if the first value is truthy.

Example 3

const response = fetch(URL);

return response && <h1>Got the Data</h1>

In the above example, while fetching data from the URL, if we get a response then it will print Got the Data, otherwise, it will print nothing.

Then Why do we need Nullish Coalescing (??) operator?

The Nullish Coalescing Operator returns the right-side value if the left-side value is null or undefined, otherwise, it will return the left-side value.

Nullish Coalescing (??)

In Javascript (ES11) ?? known as Nullish Coalescing Operator.

Example 4

a ?? b
  • If a is undefined or null, then it will return b.
  • But if a is not undefined or null, then it returns a.

Let's understand better with more examples,

const a = null;
const b = "hello js"
console.log(a ?? b); // hello js

const a = "I love Reactjs";
const b = "hello js";
console.log(a ?? b); //I love Reactjs

const a = false;
const b = true;
console.log(a ?? b); //false

const a = 999;
const b = true;
console.log(a ?? b); //999

const a = NaN;
const b = true;
console.log(a ?? b); //NaN

Therefore, we can use the?? operator when the first value can be null or undefined

Conclusion

Nullish Coalescing (??) Operator is the new addition to the JavaScript and the existing short-circuiting operators.

Nullish Coalescing allows you to always return some kind of default value, in case of returning a value that gives null or undefined.

Resources

JavaScript