Nullish Coalescing??
Published: 2022-01-13 11:40:21

Nullish coalescing? 

what is that word. Hmm... koala...sing? 
![koala sining](https://media.giphy.com/media/l3vQWWQtYTr3ItcFG/giphy.gif)bad joke alert!!!

Hello everyone, I’m Saksham and I am back again with a new blog about an es6 feature which I personally found really cool and is pronounced as **Null-ish koh-uh-les-ing.**

Yeah, it took me some time too, to get the spelling right haha.
![relax](https://media.giphy.com/media/xT1XGyjDty7M0CaO2I/giphy.gif)

## What is it?

Nullish coalescing is a short circuiting operator denoted by '**??**'

Purpose of this operator is very simple. Do you know about short circuiting OR operator? Its the same but with some precision, we can say.

lets first discuss about short circuiting OR operator in short.

OR operator, other that using it in getting boolean values, can be used directly if we want to evaluate something from left to right and get the result
![image](https://media.giphy.com/media/WRQBXSCnEFJIuxktnw/giphy.gif)
Lets take an exampe to understand it much better

```jsx
const name = "Saksham";
const myName = name || "New User";

console.log("My name is: ", myName) //My name is Saksham

const anotherName = "";
const newName = anotherName || "New User";

console.log("Welcome ", newName) //Welcome New User
```

As we can see in the above example, When there was a value in the right hand side it returned that but when the string was empty it returned the left hand side value. 

That’s because OR operator check for the right hand side value and if its a *falsy* value (0, “”, [], null, undefined, NaN) then it returns the left side (no matter what value is there). 

This is how OR operator works. 

Similar is the case of nullish coalescing operator, the difference is that it will return the right hand side only when the left side give **null** or **undefined.**

## How it works

Lets take another example

```jsx
const setHeight = 0;
const getHeight = setHeight || 100;

console.log("Height is set to ", getHeight); // Height is set to 100
```

Here **setHeight** was 0 but as it is a falsy value **100** was printed. But as we know heights can be 0, This is where nullish coalescing operator is used.

In case of nullish coalescing operator, when the left hand side is **null** or **undefined,** only then it will return the right hand side.

```jsx
const setHeight = 0;
const getHeight = setHeight ?? 100;

console.log("Height is set to ", getHeight); // Height is set to 0
```

### Chaining operators

We can add multiple statements while using nullish coalescing operator

```jsx
const firstname = null
const lastname = undefined

console.log("My name is ", firstname ?? lastname ?? "Anonymous") 
//My name is Anonymous
```

Here we chained 2 operators, the first one returned null due to which it moves to the second one, but as I said that it will return it without checking and hence returns lastname (which is undefined) but we can see that there is another operator right next to it and hence it becomes a left hand side for the second operator and it is again checked and as its undefined the answer comes out to be **Anonymous.**

This is how chaining works. But you know we cannot use chaining with OR and AND operators like above, if we try, it will give an error as it is not able to decide whom to give more precedence.

So to remove that error we put one of the condition in parenthesis.

```jsx
const firstname = null
const lastname = undefined

console.log("My name is ", firstname || lastname ?? "Anonymous") 
//Uncaught SyntaxError

console.log("My name is ", (firstname || lastname) ?? "Anonymous") 
//My name is Anonymous
```

And this is how ‘**??’** works. That’s all about this operator. 
Thank you for reading this blog ❤️
![happy](https://media.giphy.com/media/9Y6n9TR7U07ew/giphy.gif)