Nullish vs. Or

So whats really the difference between those two powerful operators?
I am writing this article as I encountered the following error with Sonarcloud:

Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator.

To better understand the error, I must first understand the difference between both operators.

Nullish operator

This operator is looking for the first not null and not undefined.
In plain english, the ?? operator will ignore any value that is either null or undefined, it will consider anything else good to return (even falsy values)
Ex:

• If a value is null ❌ → skip it
• If a value is undefined ❌ → skip it
• If a value is anything else (even false, 0, '') ✅ → use it!

const a  = null
const b  = false

a ?? b // will return `false` as there was a "match" with b

const a  = null
const b  = "stuff"

a ?? b // will return `stuff` as there was a "match" with b

const a  = null
const b  = true

a ?? b // will return `true` as there was a "match" with b

Or operator

This operator is looking for the first truthy value.
In plain english, the ||operator will ignore any falsy value (undefined, 0, false, ect)

• If a value is null ❌ → skip it
• If a value is false ❌ → skip it
• If a value is 0 ❌ → skip it
• If a value is NaN❌ → skip it
• If a value is true ✅ → use it
• If a value is "stuff" ✅ → use it

const a = 0;
const b = 42;

a || b // will return `42` as there was a "match" with b

const a = '';
const b = true;

a || b // will return `true` as there was a "match" with b

const a = '';
const b = 'stuff';
const c = true;

a || b || c // will return `stuff` as there was a "match" with b
// its always the first match

Sonarcloud error

Now, the sonarcloud error:

Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator.

It is context dependent.
Typically, ?? is considered safer since it only skips null or undefined .
Therefore, if you are trying to keep the default value (even if its falsy) it can work.
Ex: You are asked to enter the users age

const age = 0;  // falsy value but valid

const result = age ?? 'default';
console.log(result); // output: 0

vs

const age = 0;  // falsy value but valid

const result = age || 'default';
console.log(result);  // output: 'default'

Here we want the output to be 0, as the user can be under 1 year old.

Get Lara Mo’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Hence, the sonarcloud error is context depndant, but if you understand the differance between both oeprators, you will be able to analyze each case easily. :)

Recall:

?? → "I don’t care if you’re false or 0, you’re good with me."
|| → "I skip everything I don’t like."