DEV Community

Cover image for Nullish Coalescing??
Saksham
Saksham

Posted on

Nullish Coalescing??

Nullish coalescing?

what is that word. Hmm... koala...sing?
koala siningbad 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

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
Lets take an exampe to understand it much better

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
Enter fullscreen mode Exit fullscreen mode

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

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

console.log("Height is set to ", getHeight); // Height is set to 100
Enter fullscreen mode Exit fullscreen mode

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.

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

console.log("Height is set to ", getHeight); // Height is set to 0
Enter fullscreen mode Exit fullscreen mode

Chaining operators

We can add multiple statements while using nullish coalescing operator

const firstname = null
const lastname = undefined

console.log("My name is ", firstname ?? lastname ?? "Anonymous") 
//My name is Anonymous
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

And this is how ‘??’ works. That’s all about this operator.
Thank you for reading this blog ❤️
happy

Top comments (0)