Nullish coalescing?
what is that word. Hmm... koala...sing?
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.
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 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
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 = 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.
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 ❤️
