The Double Question Mark (Nullish Coalescing Operator) in JavaScript
Tags: javascript, typescript, beginners, coding
Published: 2023-06-14 03:31:16

## Introduction

In JavaScript, the Double Question Mark `??` is known as **Nullish Coalescing Operator**. It is introduced in the ECMAScript 2020 specification.

Simply, the Nullish Coalescing Operator is a logical operator that returns the right expression if only the left expression was `null` or `undefined`, else returns the left expression.

## What is the Difference Between Double Pipe and Double Question Mark in JavaScript?

To know the difference between `||` and `??` operators in JavaScript, firstly, let's remember what are the falsy values in JavaScript.

As we know, the falsy values in JavaScript are:

*   `false`
    
*   `null`
    
*   `undefined`
    
*   Not a Number keyword `NaN`
    
*   Empty string `""`
    
*   Number zero `0`
    

Great, look at this example:

```javascript
const value = leftSide || rightSide;
```


By using the `||` in this example, `value` will equal the `rightSide` if the `leftSide` was **ANY** false value.

```javascript
const value = leftSide ?? rightSide;
```


However, if you used the `??` operator, `value` would equal the `rightSide` if the `leftSide` was **ONLY** `null` or `undefined` false values.

Having said that, the `??` will return the same value as `||` in two cases:

*   If the `leftSide` was a true value, both would return `leftSide`.
    
*   If the `leftSide` equaled either `null` or `undefined`, both would return `rightSide`.
    

Having said that, you can consider the Nullish Coalescing Operator `??` a special case from the OR Logical Operator `||`.

## Use Cases of Nullish Coalescing Operator in JavaScript

After introducing the difference between the Nullish Coalescing Operator and OR Logical Operator, _you might end up thinking that one of them is redundant_.

Let me argue with you by introducing the following use case of the Nullish Coalescing Operator.

**1- Defining a default value for a variable**

```javascript
const userInput1 = 4,
    userInput2 = "",
    userInput3 = 0,
    userInput4 = false;

const value1 = userInput1 || 5, 
    value2 = userInput2 || "Default", 
    value22 = userInput2 ?? "Default", 
    value3 = userInput3 || 20, 
    value33 = userInput3 ?? 20, 
    value4 = userInput4 || true, 
    value44 = userInput4 ?? true; 
```


As you see, you can use both operators to provide a default value, however, based on your situation, you should determine which operator is more fit in your code.

For example, look at `userInput2`, it might be acceptable for you if your client provides you with an empty string `""`, in such a case, you should use the `??` operator.

On the other hand, it is not acceptable for you if your client provided you with `0` number in the `userInupt3`, in such a case, you should use the `||` operator.

And the same for `userInput4`. It depends on your situation.

**2- Defining a default value for a function argument**

Like the previous use case, you can define a default value for a function argument. Have a look at the following example:

```javascript
function sum(num1, num2) {
    num1 = num1 ?? 10;
    num2 = num2 ?? 10;
    return num1 + num2;
}

sum(); 
sum(1); 
sum(null, 1); 
sum(1, 1); 
sum(1, 0); 
sum(0, 1); 
```


Here, we don't use the `||` to define the default value, because `0` value is acceptable.

**3- Using it as a short circuit**

```javascript
function fun1() {
    console.log('fun1');
    return true;
}
function fun2() {
    console.log('fun2');
    return true;
}

fun1() ?? fun2();
```


As you see, by using the `??` operator, the `fun2()` will not be invoked at all because `fun1()` doesn't return `null` or `undefined`, however if so, both functions will be invoked.

**4- Using it in combination with the** [**Optional Chaining Operator (?.)**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)

```javascript
const parent = {
    child: {
        name: 'Hello'
    }
};

const value1 = parent.child?.name ?? 'Defaul 1', 
    value2 = parent.otherChild?.name ?? 'Default 2'; 
```


It is a perfect combination between the Optional Chaining Operator and the Nullish Coalescing Operator.

As you see, `value2` is evaluated to be `'Default 2'` as the left expression returns `undefined` as `otherChild` is not defined in the `parent` object.

## Conclusion

In this article, we knew that the Double Question Mark (Nullish Coalescing Operator) returns the right expression if the left expression was **ONLY** `null` or `undefined`.

After then, we knew that it is a special case of the OR Logical Operator, as it considers `0`, `false`, or `""` as true values.

Finally, we introduced some use cases of the Nullish Coalescing Operator.

## Before you leave

If you found this article useful, check out these articles as well:

*   [4 Ways To Handle Asynchronous JavaScript](https://mayallo.com/asynchronous-javascript/)
    
*   [Liskov Substitution Principle Isn’t Complex. Just Give It A Try](https://mayallo.com/solid-liskov-substitution-principle/)
    
*   [Isolation Levels In SQL Server With Examples](https://mayallo.com/isolation-levels-sql-server/)
    

Thanks a lot for staying with me up till this point. I hope you enjoy reading this article.