Everything you need to know about nullish coalescing
Tags: beginners, javascript, webdev, tutorial
Published: 2021-05-23 11:25:30

Nullish coalescing is new Javascript feature of ES11 (aka ECMA Script 2020).The nullish coalescing operator looks like this `??`

## Truthy and Falsy values
Before proceeding further,, you need to know about **truthy** and **falsy** values in Javascript to understand better. Basically, `false`, `0`, `-0`, `BigInt(0n)`, `empty string('' or "" )`, `NaN`, `null`, `undefined` are considered as **falsy** values in Javascript.
Other than this, as you guessed, is **truthy**.
It's important to remember this , not only for **_nullish coalescing_** but also it will be very useful as you dive more deeper in Javascript. To prove you that these are treated as **falsy** values, try to `console.log` every **falsy** values mentioned above. Like this 👇,
  ```javascript
  console.log(Boolean(0)) // would return false
  ```
### The Traditional || operator

Have you ever used logical OR (`||`) operator for setting a default value if the varible doesn't exist? Let me give an quick example,
```javascript

const obj = {
  name : undefined
  age : 45
}

console.log(obj.name || 'default name') // default name

```
From the above example, it is pretty straightforward that we set a default value if the name doesn't exist. This technique is called as **fallback mechanism**, and it is often used by developers out there.
But it is important to know how `||` operator works. Its simple.

**The || operator checks for  first truthy value**. Take a close look at the example below
```javascript
let firstName = undefined
let secondName = null
let age = 0
let nickName = ''
let orignalName = 'Miller'

console.log(firstName || secondName || age || nickName || orignalName || true) // Miller

```
Now, you might think, why does it return `Miller` instead of `0`? 🤔🤔
It is because, except `orignalName` variable and Boolean `true`, every other variable is considered as falsy value as i said before. 
> **Think** 💡
>  `originalName` is returned eventhough `true` is also a truthy value  

But, if u try to replace the `||` operator with `??` operator, it would return `0`. 

```javascript
console.log(firstName ?? secondName ?? age ?? nickName ?? orignalName) // 0
```
## What does `??` do ?
According to MDN docs, **nullish coalescing** is "a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand". 

For example,
```javascript
const result = x ?? y ;
 // In the above code,
 // -> y is returned , only if x has null or undefined (not '').
 // -> x is returned if it has values other than null or undefined (including '').
```
The syntax looks confusing at first. the above example is same as below :
```javascript
const result = (x!== undefined && x!== null) ? x : y;
```
This should make sense if you are familiar with ternary operator in Javascript. If not, refer this [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
The most common usecase of `??` is to set or provide a default value for a potentially undefined varibles. What do u mean by that ? Lets look at some more examples ,

> **Note** 🧐
> There are only two nullish values (null and undefined)

```javascript
console.log(0 ?? 10) // 0  since neither of them is a nullish value
console.log(2 ?? 3) // 2 , since neither of them is a nullish value
console.log( null ?? 'john') // john , since null is a nullish value
console.log( undefined ?? 'john') // john , since undefined is also a nullish value
```
However, here is the case where it differs from `||`
```javascript
console.log(0 || 10) // 10 since, || operator looks for first truthy value, `0` being a falsy value is ignored and so 10 is printed
```
Ok, then , why does the code below (from one of the previous example) returns  `0` ? 
```javascript 
console.log(firstName ?? secondName ?? age ?? nickName ?? orignalName) // 0
```
Let me breakdown ,
`firstName` is `undefined` , a nullish value ,so it moves to `secondName`
`secondName` is null , a nullish value , so it moves to `age`
`age` is 0 , which is not a nullish value , so it returns `age`.

Make sense ? I know it looks confusing at first, it will make more sense as you get used to it.

### `||` vs `??`
The main difference is,
  - `||` returns the first `truthy` value
  - `??` returns the first `defined` value

### Challenge 😎
To test your understanding , try to guess the correct answer for the below exercise before scrolling down to see the solution

```javascript
let groceries = {
  item1: {
    name: 'apple'
    color: 'red',
    quantity: 5
  },
  item2 : {
    name: ''
    color: undefined
    quantity: null
  }
}

console.log((groceries.item2.color ?? groceries.item1.price ?? groceries.item1.name) || groceries.item1.color) 
```

### Solution ✔️
If your answer is **_apple_**, congrats 🥳, You are correct. Don't worry if you guessed it wrong. This will make more sense when you get used to it. Also, I will provide some additional resources to learn more about **Nullish coalescing** if this tutorial confuses you.(hopefully not 😅😅 , ig)
Thanks for reading my post 🙌🙌

## Additional Resources 👉
- [Nullish Coalescing](https://daily.dev/blog/nullish-coalescing-operator-in-javascript-what-is-it-and-how-to-use-it)
- [Nullish Coalescing Operator Explained](https://jinoantony.com/blog/nullish-coalescing-operator-explained)
- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
- [Nullish Coalescing by Flavio](https://flaviocopes.com/javascript-nullish-coalescing/)