Understanding JavaScript: The Battle of Nullish coalescing vs Logical OR

Introduction

Have you ever been coding in JavaScript and stopped dead in your tracks, pondering whether to use ?? or ||? You're not alone!

Get Srinivasan Ayyasamy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

These two operators might seem like distant cousins at first glance, but they’re more like siblings with distinct personalities. In this post, we’ll dive into the quirky world of ?? (nullish coalescing operator) and || (logical OR operator) and figure out when to invite each one to our coding party.

Section 1: What is ?? and When to Use It

So, let’s talk about ??, the new kid on the block. Introduced in ES2020, the nullish coalescing operator is like a selective gatekeeper. It only reacts to null or undefined. Think of it as a picky eater who only dislikes two vegetables.

The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Example:

let userName = user.inputName ?? 'Guest';

In this case, if user.inputName is null or undefined, userName becomes 'Guest'. But if user.inputName is 0 or an empty string, it stays as it is. Ideal for situations where you want to respect all values except for the absence of a value.

Section 2: What is || and When to Use It

On the other hand, || is the extrovert in the JavaScript family. It's been around for ages and isn't picky. It jumps at any falsy value (null, undefined, 0, false, NaN, '') and replaces it with something else.

The logical OR (||) (logical disjunction) operator for a set of operands is true if and only if one or more of its operands is true. It is typically used with boolean (logical) values. When it is, it returns a Boolean value. However, the || operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value.

Example:

let userAge = userInput.age || 'Unknown';

Here, if userInput.age is any falsy value (like 0 which could be a legitimate age!), it defaults to 'Unknown'. It's great for catching any "falsy slip-ups" but can be overzealous at times.

Section 3: Side-by-Side Comparison

Here’s a quick comparison to help you decide which operator to use in different scenarios:

Side by Side comparison of `??` and `||`

Section 4: Best Practices and Tips

Choosing the right operator is like picking the right tool for a job. If you’re dealing with inputs where 0, false, or '' are meaningful, ?? is your go-to. But if you're okay with overriding any falsy value, reach for ||.

Remember, understanding your data is key. It’s like knowing whether you’re allergic to cats or dogs before pet-sitting.

Conclusion

Both ?? and || have their unique charms and pitfalls. Like Yin and Yang, they balance each other out in the JavaScript universe. Experiment with both in your code, and see how they behave. And hey, if you've got any fun stories or tips about using these operators, drop them in the comments below. Let's learn together!