So, Here we will discuss the Nullish Coalescing operator. First of all, learn its spelling and pronunciation which is very tough for me also😉🤦‍♂️😁.

So, let's discuss, It's an operator used for getting the value out of null and undefined. In general terms, it helps you in getting the first defined value of the two. Let's understand the syntax

const result = null ?? "HashNode";
// Here it will return HashNode because the first one is null. If there is undefined then also the output will be HashNode.

So, the nullish coalescing operator is represented with ??. The whole summary for this code is it will return the first argument if it's not null or undefined. If we explain the code in the more brief way then it can be like this:

const result = (a!==null && a!==undefined)? a:b;

Here this code is doing the same work as the ?? operator does. In this code compiler first, check the "a" should not be null and undefined so that it will return "a" as an output otherwise it will return "b" as output.

Let's see more examples for a better understanding:

let x;
console.log(x??10) // Here you will get the output is 10. Because the x is undefined here. So that you will get the 10 as output.

let x=23;
console.log(x??20)// here you will get 23 as output which is the actual value of x while declaring. Because x is defined here so that you will get the actual value.

You can also use this operator to get the first defined value in the array or the list of objects or variables. You can see the example:

var name=null;
var address=undefined;
var pincode=null;
var landmark = "HashNode";
const result = (name ?? address ?? pincode ?? landmark ?? "India") //landmark = HashNode

In this code, you will get the first defined value which is the landmark because all of them are undefined, and if the landmark is also undefined then it will return the INDIA. You can also compare it with or(||) operator. Let see.

Comparison with || operator

It is working the same as the ?? operator but there is also some drawback to using the || operator instead of ??. So First See the Code:

var name=null;
var address=undefined;
var pincode=null;
var landmark = "HashNode";
const result = (name || address || pincode || landmark || "India") // landMark = HashNode

Here you will get the same result again. Before the ?? operator, the || operator is used for a long time. People who are using this || operator earlier were not happy so JavaScript introduces the?? operator. The main difference between || and ?? is this :
a. the || operator returns the first true value.
b. Whereas, the ?? operator returns the first defined value.

Because the || operator treats the null/undefined, "", false, and 0 as FALSE values. So that if they are the first argument of the || operator you will get the second argument by default. This is the major drawback of using the || operator. It may result in the wrong output. So, to overcome this problem we can use the ?? operator. Let's see this by example.

let x=0;
console.log(x||10); // 10 here you will get 10 as output because 0 will treat as false value so that it will result in wrong output.
console.log(x??10) // 0, here you will get the exact value of x because it will not treat as null or undefined.

use with || and && operator

null||undefined ?? "HashNode" // raise an Error
true ?? undefined ?? "Hashnode" // raise an Error

Here you will get the Syntax error. So to overcome this problem you can use these like:

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

Precedence

The precedence of this operator is not high. It is the same as the || operator. So you have to use this before the = and ? operator but make sure after the +,*. To use this before + or * use parenthesis so to make it more precedence.

Summary

1. The Nullish Coalescing operator ?? helps you to get the defined value out of null and undefined values. It's also used to assign the default values for the variable.

2. You can use the?? operator instead of the || operator to get original values for the original output.

3. The precedence of this operator is low than + or * but higher than? and =.

Thanks For Reading. Comment guys if you have any doubt.