Nullish Coalescing operator in JS "??" ?
Tags: javascript, es6, webdev
Published: 2022-05-15 15:54:44

I was intrigued about the Nullish Coalescing Operator ever since I had heard about it, primarily because it sounded very fancy X'D. 


![Gentleman Bear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a3ps8elwyyntdhsnai3.jpg)

I decided to learn more about it. Hence this blog. I'll try to keep things as simple and beginner friendly as possible.

Allright, let's get right into it then!

## What the heck is "??" ?

The nullish coalescing operator is syntactically defined as '??'
Basically, it keeps an eye open for 'null' and 'undefined' values.
Let's see how with the help of an example.

Suppose we have the following expression:
`const fruitCount = noOfApples ?? noOfOranges`
Then the value of fruit will be dependent upon the value of apples. If `noOfApples` is `null or undefined`, then the value of `fruitCount` will be equal to `noOfOranges`. Contrary to this, if the value of `noOfApples` is anything other than `null` or `undefined`, then `fruitCount` will be equal to `noOfApples`.

To summarise things:
In an expression such as `a??b`, the result is:

- `a`, if a has any value other than `null` or `undefined`.
- `b`, if a is `null` or `undefined`.

It's basically a syntactic sugar over
`result = (a !== null && a !== undefined) ? a : b;`

## Common use cases of the Nullish Coalescing Operator

### 1) Assigning a default value to a variable

The nullish coalescing operator makes it easy for you to provide a default value to a variable that has not been assigned one.

For example,
`let count;`
`const sum = count ?? 0;`

In the above example, since count it not initialized with a value hence the value of sum is provided by the second operand which is `0` in this case.

### 2) Selecting from a list of undefined/null values

Let's take into consideration a scenario where we have to display the name of a user. 

`let firstName = null;`
`let lastName = null;`
`let nickName = "Coldpigli";`

`// shows the first defined value:`

`console.log(firstName ?? lastName ?? nickName ?? "User");` 
`// Coldpigli`


In the above example the `Coldpigli` is logged since `firstName` and `lastName` are `null` and `nickName` provides a "defined" value (in the "??" sense of things). 

## Okay, but how is that different from '||' ?

The `||` can be used as `??` but there are some cases when you need to be wary of using `||`.

The important difference between them is that:

- || returns the first truthy value.
- ?? returns the first defined value.

That means, `||` cannot distinguish between `false`, `0`, an empty string `""` and `null/undefined`.
This can be a serious problems in cases when we want to treat `0` or `false` as values and not absence of it.

Let's understand this with the help of an example:

```
let count = 0;
console.log(count || 100); //100
console.log(count ?? 100); //0
```
Count 0 can be perfectly valid value for a variable that counts something.
The `count || 100` checks height for being a falsy value, and it’s `0`, which is falsy
so the result of || is the second argument, 100.
The `count ?? 100` checks count for being null/undefined, and it’s not
so the result is count “as is”, that is 0.

## Using ?? with && or || 

Javascript forbids using `??` in conjunction with `&&` or `||`.
Therefor an expression such as `a = b && c || d` will result in syntax error.

However, there is way around it. 
You can prioritize the usage explicitly by using `()` such as,
`a = (b && c) || d`. 
The above is a perfectly valid Javascript expression.


Alright, that brings me to the end of this blog. I hope the nullish coalescing operator doesn't seem as intimidating as it sounds anymore.

Until next time folks !