Nullish Coalescing??

Nullish coalescing?

what is that word. Hmm... koala...sing?
bad joke alert!!!

Hello everyone, Im 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.

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

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 Sakshamconst 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.

Thats 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

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

Chaining operators

We can add multiple statements while using nullish coalescing operator

const firstname = nullconst lastname = undefinedconsole.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.

const firstname = nullconst lastname = undefinedconsole.log("My name is ", firstname || lastname ?? "Anonymous") //Uncaught SyntaxErrorconsole.log("My name is ", (firstname || lastname) ?? "Anonymous") //My name is Anonymous

And this is how ?? works. Thats all about this operator.
Thank you for reading this blog