Setting a Default Value in JavaScript: The Battle of '||' vs '??'

JavaScript, the world's most popular programming language, is known for its flexibility and versatility. However, this flexibility can sometimes lead to confusion, especially when it comes to setting default values. Two operators often come into play here: the OR operator || and the nullish coalescing operator ??. Let's dive into the differences between these two and see which one comes out on top.

The OR Operator ||

The OR operator || is a logical operator that returns the first "truthy" value it encounters. If it doesn't find any, it returns the last value. Here's how it works: if the value on the left is falsy (i.e., evaluates to false when converted to a Boolean), it will use the value on the right.

For example, let's say we have let result = value || 'default';. If value is falsy (like 0, '', null, undefined, NaN, or false), result will be 'default'. However, this can lead to unexpected results. If value is 0 or '', which are valid and often used values, they will be ignored and 'default' will be used instead.

The Nullish Coalescing Operator ??

Enter the nullish coalescing operator ??. This operator also checks the value on the left, but it only falls back to the value on the right if the left value is null or undefined. In other words, ?? returns the first "defined" value it encounters, or the last value if no defined value exists.

So, if we have let result = value ?? 'default';, result will be 'default' only if value is null or undefined. This means that if value is 0 or '', result will be 0 or '', not 'default'. This makes ?? a safer choice when you want to set a default value.

The Verdict

While both || and ?? have their uses, I recommend using ?? when you want to set a default value. The main reason is that it only uses the default value if the original value is null or undefined. This means that valid values like 0 or '' won't be mistakenly replaced with the default.

In conclusion, understanding the nuances of these operators can help you write cleaner, more predictable code.