What is a nullish coalescing operator (??) in JavaScript?
Published: 2022-07-04 11:18:39

The _**nullish coalescing operator**_ is a logical operator that can be extremely powerful that could make our lives lot easier in some cases. And with this, we can write the most efficient logic.

![nullish coalescing operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38ax6nhb6tv7eloxdk6y.jpg)

ES11 introduced the nullish coalescing operator denoted by the double question marks (??).

###Syntax:

The operator is written as two question marks `??`.

The syntax of the Nullish coalescing operator is,

```javascript
leftExpr ?? rightExpr
```
Here are the examples of how operator works,

```javascript
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
```

```javascript
null ?? 'test' // returns 'test'
undefined ?? 56 // returns 56
null ?? 0 // returns 0
45 ?? 25 // returns 45
```
###How it works?
Consider the below example of the operator. The nullish coalescing operator is a logical operator that accepts two values:

```javascript
const result = value1 ?? value2
```

The above statement returns the second value (`value2`) if the first value (`value1`) is `null` or `undefined`. Or else, it will return the first value (`value1`).

Technically, the above logic is equivalent to the following block:
```javascript
const result = value1;
if(result === null || result === undefined) {
   result = value2;
}
```
In other words,

Let’s assume `null` and `undefined` as similar in this context and assume ‘defined’ as something that is not null or undefined

We can define our example as something like this,

The result of `value1 ?? value2` is,

If `value1` is defined, then return `value1`
If `value1` is not defined, then return `value2`

Let’s look at more examples of _Nullish coalescing operator_.

In the below example, we have null in the first value and the string in the second value. Since we have null in the first value, the second value (‘default string’)is returned.

```javascript
const nullValue = null;
const foo = nullValue ?? ‘default string’;
console.log(foo);
// expected output: “default string”
```


Let’s look at one more example where the first value is returned.

```javascript
const someNumber = 42;
const valC = someNumber ?? 0;
console.log(valC);
// expected output: “42”
```

Since we have a number in the first string, the first value(`someNumber` or `42`) is returned.

Consider the below example, Note that the first value needs to be null or undefined for the ??operator to return the second value. `Empty string` or `0` is not considered.

```javascript
const emptyText = ""; // falsy
const valB = emptyText ?? "default for B";
console.log(valB); // "" (as the empty string is not null or undefined)
```
###How is it different from logical OR (`||`) operator?
The OR (`||`) operator can be used in the same way as `??` . We can get the same results for the above examples.

But,

there is one difference between `||` and `??`.

`||` returns the first truthy value.
`??` returns the first defined value.
In other words, `||` doesn’t distinguish between the below values (`falsy`)

* `false`
* `0`
* an empty string (`“”`)
* `null`
* `undefined`

They are called – [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values. If any of these is the first argument of ||, then we’ll get the second argument as the result.

```javascript
0 || 2 // returns 2
0 ?? 2 // returns 0
```
where as `??` considers only `null` and `undefined` unlike `||`.

###Conclusion:
And that’s how `?? `operator works. Comment below if you have used this operator in your code. Thank you.