We often use the or operator || in JavaScript to create a fallback value. However, this comes with risks, and you should try to use nullish coalescing operator instead ??. When we use the or operator, it will default to the value provided if the value is falsy, like so:

const user = {_id: 1, name: null}

const name = user?.name || "John Doe"
console.log(name) // "John Doe"

Here we safely unwrap the name in case it is null or undefined if the value is falsy, we fallback to the string John Doe. However, think about what we are doing here. Other values register as falsy not just null or undefined. Let's compare the two operators on a few different values to see the difference.

console.log(false || "Error") // 'Error'
console.log(false ?? "Error") // ??

console.log("" || "No value given") // 'No value given'
console.log("" ?? "No value given") // ''

console.log(0 || "Number missing") // 'Number missing'
console.log(0 ?? "Number missing") // 0

Here you can see the or operator will fall back to the given value for an empty string, the number zero and a false boolean. When you want to provide fallback values when accessing something that might be null or undefined it would be best if you reached for the ?? first, unless, for example, you want to create a fallback for an empty string.

Let's look at a real example of where it can cause problems. Say you have a setting where a user can set the volume, but if it has not, you fall back to default. If the user has set the volume to zero and you use the or operator, you will fall back to the default.

const userSetVolume = 0
const defaultVolume = 5

const volume = userSetVolume || defaultVolume
console.log(volume) // 5

const volume = userSetVolume ?? defaultVolume
console.log(volume) // 0

The nullish coalescing operator is a great way to provide a default value when safely unwrapping or accessing values in JavaScript. Give it a try.

Want to read more on the Nullish Coalescing Operator? My friend Mike put a deep dive blog post on the operator that covers it in more detail and its usage in React, Deno and Node.