Nullish Coalescing Versuz the OR operator

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.

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

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:

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

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.