Nullish Coalescing vs OR - JavaScript operators (?? vs ||)

Nullish coalescing vs OR (?? vs ||), these two operators can be a little confusing to understand the difference at first, but in this post we are going to cover what they are, what they do, how they are different and which one you should use.

Just a quick note, even though they both use the ? symbol, Nullish Coalescing and Optional Chaining are two different things with different uses.

It sounds pretty intimidating, right? Although it isn’t and it is actually pretty straightforward to understand.

To start with, let’s look at what the Nullish Coalescing Operator is.

What is the Nullish Coalescing Operator?

The Nullish Coalescing Operator is written as two question marks in JavaScript (??) and it looks at whatever value is on the left side of it (a ?? b), and will check to see if it is undefined or null, if the value is one of these two then the Nullish Coalescing Operator will then move onto the value to the right of the operator and return it.

Alternatively, if the value on the left is not undefined or null then the operator will just return the left hand value instead.

Here is an example of the Nullish coalescing operator in use:

null ?? "Hello World" // “Hello World”
false ?? "Hello World" // false
0 ?? "Hello World" // 0
undefined ?? "Hello World" // “Hello World”

If you are still not 100% sure what this means at this point, that is okay, it will become more obvious when we compare the Nullish Coalescing Operator to the logical OR operator.

What is the Logical OR operator?

The Logical OR Operator is written as two pipe symbols in JavaScript (||) and it looks at the left hand value (a || b) to see it is a falsy value.

If the value is falsy the logical OR operator will then return the value to the right hand side of it and if the value is not falsy (or in other words truthy) then it will return the left hand value instead.

Here is an example of the Logical OR operator in use:

null || "Hello World" // “Hello World”
false || "Hello World" // “Hello World”
0 || "Hello World" // “Hello World”
undefined || "Hello World" // “Hello World”
10 || "Hello World" // 10
true || "Hello World" // true

You will see the logical OR operator used a lot in conditions such as if statements, but it will do the same thing no matter where it is being used.

Here is how it looks in an if statement:

if (myVar === "test-1" || myVar === "test-2") {
  return demo()
}

All this is doing is checking if myVar === 'test-1' is truthy, and if it is then it will return the value to the if statement to run the if block, otherwise it will move on and return the second condition to the if statement.

If the second condition is evaluated to be truthy by the if statement, then it will run the if block, otherwise it will skip it.

In a sentence it would read something like: If “myVar === 'test-1'” is truthy, return it straight to the if statement to evaluate, otherwise return “myVar === 'test-2'” to the if statement to evaluate.

You can also chain as many Logical OR Operators as you like in a conditional statement.

What is the difference between the Nullish Coalescing Operator vs OR Operator in JS?

The difference between the Nullish Coalescing Operator vs OR Operator is that the Nullish Coalescing Operator checks the left hand argument for undefined or null (nullish), whereas the Logical OR Operator just checks the left hand argument to see if it is “falsy” or not.

This means if that if you are using the Nullish Coalescing Operator and the left hand operator is falsy, but not null or undefined then it will return the left hand argument whereas the Logical OR operator would continue onto the right hand argument because it checks for falsy values and not nullish values.

For example here is the same condition but applied with both the Nullish Coalescing Operator and the Logical OR Operator:

// Nullish Coalescing Operator
0 ?? "Hello World" // 0;

// Logical OR operator
0 || "Hello World" // 'Hello World'

Now, because null and undefined are both falsy, using the Nullish Coalescing Operator or the Logical OR Operator would provide the same result.

// Nullish Coalescing Operator
null ?? "Hello World" // 'Hello World'

// Logical OR operator
null || "Hello World" // 'Hello World'

But the other way around is not true, if you have a value that is falsy but not null or undefined this is where the Nullish Coalescing Operator will differ from the Logical OR Operator.

So if you use an empty string ', which is falsy but not nullish, it would continue to the right hand argument for the Logical OR Operator, but it would return the left hand argument if using the Nullish Coalescing Operator.

// Nullish Coalescing Operator
"" ?? "Hello World" // ''

// Logical OR operator
"" || "Hello World" // 'Hello World'

What is falsy vs nullish?

Now, I have spoken a little bit about falsy and nullish, but what are they exactly?

Falsy is any value that is considered as false but it does not necessarily have to be a boolean.

This means that false is falsy, or an empty string is falsy, or 0 in JavaScript is falsy and so on, you can see a full list of falsy values here.

Nullish on the other hand is values that are nullish, so this would be undefined or null.

When should you use the Nullish Coalescing Operator (??) in JS

Using the Nullish Coalescing Operator can actually be a huge time saver in JavaScript for a few reasons.

Imagine you have a variable that can either be a string, null or undefined and the string can be empty.

In this situation you only want to use the variable if it is a string (empty strings included).

Now you can’t directly use a falsy check here because an empty string would be falsy, instead you could use the Nullish Coalescing Operator to specifically check to make sure it is not null or undefined.

That is one example, but generally speaking, any time you know that a value can be undefined or null, and you only want to check that the value is there (and not falsy) then it would be best to make use of the Nullish Coalescing Operator.

If you need a more general condition for ensuring that something is just not falsy, then go with the Logical OR Operator.

Summary

So, to summarize Nullish Coalescing Operator vs OR Operator, the Nullish Coalescing Operator checks for null or undefined values and the logical OR operator checks for falsy values.

Will you be using the Nullish Coalescing Operator more now?