Why the nullish coalescing operator was introduced in ES2020
Tags: javascript, codenewbie, webdev
Published: 2022-02-09 23:11:04

Hello World, in my recent post, I wrote on JavaScript operators ([Logical operators](https://dev.to/efkumah/what-you-should-know-about-the-logical-assignment-operators-in-javascript-5h13) and [Unary operators](https://dev.to/efkumah/what-you-should-know-about-unary-operators-in-javascript-57gp)). In this post, I share insight on the nullish coalescing operator which is a recent additon to the language.

One use case of the nullish coalescing operator (`??`) is to assign a default value to a variable. 

Let's see how to achieve that:

## What is nullish coalescing operator (`??`)
> The nullish coalescing operator (??) is a logical operator that returns its **right-hand side operand** when the **left-hand side operand** is `null` or `undefined`.Otherwise, returns the **left-hand side operand**.
 
`null` and `undefined` are **nullish** values (they are used to denote the absence of a meaningful value).They are actually values, but they carry no information.

Using the nullish coalescing operator (`??`), we can set a fallback value (default value) for the nullish values (`undefined` and `null`).


#### Syntax for nullish coalescing operator
Below is the syntax for nullish coalescing operator:
```
leftExpr ?? rightExpr
```
From the syntax above:
- If the `leftExpr` has a value which is either `null` or `undefined` (nullish values), then the value in the `rightExpr` is used as the **default or fallback value**. 

### Using the nullish coalescing operator (`??`)
Consider two values `value1` and `value2`, using the syntax for the nullish coalescing operator (`??`) 

```
value1 ?? value2 
```
- if `value1` is `null` or `undefined`, the `value2` will set as the default or fallback value
- if `value1` is not `null` or `undefined`, we keep the `value1`.

```
console.log(null ?? "Default value")
console.log(undefined ?? "fallback value")
console.log("firsValue" ?? "secondValue")
```
The output will be 

```
Default value
fallback value
firstValue
```
As mentioned earlier, the common usecase  of `??` is to provide a **default or fallback value** to a `nullish` value. 


### Assigning a default value to a variable.

In the code below, we want to assign a fallback or default value to a variable, if the `greetings` value is `null`. 

```
let greetings = null;

let userGreetings = greetings ?? "Hello World"
console.log("User greetings is now ", userGreetings)
```
The output will be 

```
User greetings is now  Hello World
```

-`greetings` has value of `null` hence the `??` operator will set the fallback value to be `Hello World`.
- This fallback  or default value will then be assigned to `userGreetings`

### Example 2, Assigning a default value to a property in an object

Consider a situation where you have properties in an `object`. One of the values in the key is `null`, our task is to assign a fallback or default value to that property. 
Let's see how to achieve that  

```
let user = {
    firstName: "Emmanuel",
    lastName: "Kumah",
    nickName: null
}

user.nickName = user.nickName ?? "anonymous";

console.log(user)
```
The output will be 

```
{firstName: 'Emmanuel', lastName: 'Kumah', nickName: 'anonymous'}
```
- The property `user.nickName` is `null` hence we can use the `??` operator and set the default or fallback value of `user.nickName`
- The value on the righthand side of `??` is then used as the fallback value.
- The `user.nickName` property now has a fallback value of `anonymous` instead of `null`.

#### Example 3
Let's assign some default values to some variables using the `??` operator 

```
let nullValue = null;
let firstValue = 30;
let secondValue = "someText"

let valueA = nullValue ?? "default value of A"
let valueB = firstValue ?? "default value of B"
let valueC = secondValue ?? "default value of C"

console.log("Value stored in A is the ", valueA)
console.log("Value stored in B is the ", valueB)
console.log("Value stored in C is the ", valueC)
```

The output will be 

```
Value stored in A is the  default value of A
Value stored in B is the  30
Value stored in C is the  someText
```
What is happening in the above ?
- The lefthand-side expression `nullValue` has a value of `null` hence the `??` will return the value on the right-hand side of the operand.That becomes the fallback value stored in `valueA`
- The  value in `firstValue` is 30 ( **not `null` or `undefined`**) hence the value on the left-hand side `30` is maintained
- The value in `secondValue` is someText (also **not `null` or `undefined`**) hence the value on the left-hand side `someText` is maintained

#### Differences between Logical OR operator (`||`) or nullish coalescing operator (`??`)

The nullish coalescing operator (`??`) is very similar to the logical OR operator (`||`) they both return default values. 

The major difference is the logical OR operator (`||`) will return the right-hand side operand if the left operand is **any falsy value** whiles the nullish coalescing operator (`??`) will return the right-hand side operand only if the left operand is `null` or `undefined`.


## Why the nullish coalescing operator 
Previously, when assigning a default value to a variable, we used the `||` operator. If any value on the lefthand-side of the `||` is a falsy value, then the value on the righthand-side of the `||` will be used as the default value.

```
lefthandExpr || righthandExpr
```
A `falsy` value is any of the 6 values
- false
- undefined
- null
- 0
- ""
- NaN

The challenge with the || operator is , it will not differentiate between false, 0, an empty string "", NaN, null and undefined. They are all considered falsy values. If any of these is the first argument of the `||`, then we'll use the second argument as the result.

In practice, we want to set a fallback or default value only when **the variable is null/undefined.** Meaning, the value is really unknown or not set.

> The nullish coalescing operator avoids this pitfall by only returning the second operand when the first one evaluates to either null or undefined (but no other falsy values)

Consider the code below 

```
let age = 0;
console.log(age || 32)
console.log(age ?? 32)
```
The output will be 

```
32
0
```
- The age || 32 checks the age for a falsy value, since 0 is a falsy value, it output the truthy value `32`
- The age ?? 32 checks the age for being `null` or `undefined`. Since `age` is not, it keeps the age as it is (0)
- In practice, the `0` is consider a valid value, so should not be repalced with a default value. 
- The `??` does perfect job of only setting a fallback value when the value on the lefthand-side of `??` is only `null` or `undefined`.

### Short circuting the nullish coalescing operator

Similar to the OR and AND logical operators, the nullish coalescing opearator will not evaluate the right-hand side expression, if the left-hand side expression is **neither null nor undefined**

#### Challenge
What will the output of the code below be ?
```
let result = "first value" ?? "second value"
console.log(result)

let result2 = undefined ?? "second value"
console.log(result2)
```

### Summary
The nullish coalescing operator `??` helps us set a **fallback or default** value if the value to the lefthand side of the `??` operator is either `null` or `undefined`.

Trust you have learnt useful tips from this post ? Help it reach a wider audience by sharing on your social media platforms. Do send me a feedback, would love to read your comment. 

Written with love from Ghana. Me daa se (Thank you)