Nullish Coalescing Versuz the OR operator
Published: 2021-09-27 02:59:51

---
title: Nullish Coalescing Versuz the OR operator
published: true
description: A brief explanation on when to use nullish coalescing versus the || operator
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7ygrfaj3l8roztcuyy2.png
---

The nullish coalescing operator was added to the standard ECMAScript specification in its 11th edition. I remember first seeing this operator `??` thinking what the heck is this and what problem does it solve? Is the `||` operator not good enough? Well, yes the `||` operator is great in certain use cases. But to understand why you might want to use the nullish coalescing operator instead you first have to remember how logical booleans work in Javascript. 

In Javascript we use the double pipe `||` to represent the logical `OR` operator. This operator performs boolean logic on two operands. If the first operand evaluates to `true` then that value is returned otherwise the second operand is returned. In essence it return the first *truthy* value. 

```javascript
true | true // true
true || false // true
false || true // true
false || false // false
```

Great this all makes sense but what if we aren't comparing literal boolean values? What if we are comparing non-boolean values like `strings` aka `truthy` and `falsy` values. In Javascript every type has an inherent Boolean value. And these values are commonly known as either `truthy` or `falsy`.

Truthy values include:
 - `"0"` (a string containing a single zero)
 - `"false"` (a string containing the text "false")
 - `[]` (an empty array) - this one gets me all the time
 - `{}` (an empty object) - this one also
 - `function(){})` (an empty function)

Falsy values include:
 - `false` 
 - `0` (zero)
 - `-0` (minus zero)
 - `0n` (`BigInt` zero)
 - `""`  (empty string) 
 - `null`
 - `undefined`
 - `NaN` 

**Some examples using the `||` operator with truthy/falsy values**

```javascript 
const someString = "I'm a string"
const emptyString = ""

someString || "I'm also a string" // "I'm a string"
emptyString || someString // "I'm a string"
"false" || true // "false" 
[] || someString // []
undefined || someString //"I'm a string"
"" || someString //"I'm a string"
```

Unlike the `||` operator that returns the first *truthy* value, the nullish coalescing operator returns the first *defined* value.

**For example:**

```javascript
const brandyOrMonica;

brandyOrMonica ?? "Brandy" // Brandy

# HOWEVER

const brandyOrMonica = "Brandy"

brandyOrMonica ?? "Monica" // Brandy
```

In the first example, `brandyOrMonica` is declared `undefined`. So the nullish coalescing operator will return the second operand `Brandy`. This is similar to the way the `||` operator would work also. However, You can think of the `nullish coalescing` as a way to set a default value for a value that might be either `null` or `undefined`.  In my opinion the real power of the `nullish coalescing` operator is revealed when the first operand is a `falsy` value. The `||` operator doesn't distinguish between `false`, `0`, an empty string `""` and `null/undefined` - they're all considered `falsy` values. If any of these is the first operand of `||`, then the second operand will be returned. `Nullish coalescing` allows developers to set a default value only when the first operand is `null/undefined`

```javascript
const numberOfRoundsInAVersuzBattle = 0;

numberOfRoundsInAVersuzBattle || 20; // 20
numberOfRoundsInAVersuzBattle ?? 20; // 0
```

That's it. 

Td;lr - The `||` operator returns the first *truthy* value, the `nullish coalescing` operator returns the first *defined* value.