When should you use || and ?? in JavaScript?

The operators || and ?? are often used interchangeably, which sometimes may lead to problematic outputs. In this article, we will understand the correct usages of the logical OR operator i.e. || and the nullish coalescing operator i.e. ?? in detail.

The Logical OR Operator (||):

The logical OR operator (||) in JavaScript returns the value of its first operand if it can be coerced into a truthy value, otherwise, it returns the value of its second operand. In simple words, the logical OR operator || uses the right value if the left is falsy.

Let’s understand this through an example.

//number
console.log(10 || "not found") // 10
console.log(0  || "not found") // "not found"

//string
console.log("John" || "not found") // "John"
console.log(""     || "not found") // "not found"

//boolean
console.log(true  || "not found") // true
console.log(false || "not found") // "not found"

//undefined, null
console.log(undefined || "not found") // "not found"
console.log(null      || "not found") // "not found"

Let’s break down each example and understand how the logical OR operator (||) behaves in JavaScript.

Number:

//number
console.log(10 || "not found") // 10
console.log(0  || "not found") // "not found"

• When the left operand (10) is truthy, the logical OR operator returns it without evaluating the right operand. Hence, the output is 10.
• When the left operand (0) is falsy, the operator evaluates the right operand (“not found”) and returns it. Hence, the output is “not found”.

String:

//string
console.log("John" || "not found") // "John"
console.log(""     || "not found") // "not found"

• Like the number example, when the left operand (“John”) is truthy, it’s returned immediately.
• When the left operand (an empty string) is falsy, the operator evaluates the right operand and returns it.

Boolean:

//boolean
console.log(true  || "not found") // true
console.log(false || "not found") // "not found"

• When the left operand (true) is truthy, it’s returned.
• When the left operand (false) is falsy, the operator evaluates and returns the right operand.

Undefined and Null:

//undefined, null
console.log(undefined || "not found") // "not found"
console.log(null      || "not found") // "not found"

• Both undefined and null are falsy values in JavaScript. So, regardless of the right operand, they cause the operator to evaluate and return the right operand.

In summary, the logical OR operator returns the first truthy operand it encounters, evaluating and returning the second operand only if the first one is falsy.

The Nullish Coalescing Operator (??):

The nullish coalescing operator (??) is a relatively new addition to JavaScript, apparently introduced in ECMAScript 2020. Unlike the logical OR operator, the nullish coalescing operator specifically checks for null or undefined values.
In many cases, you might only want the right value if the left value is null or undefined. That's what the nullish coalescing operator ?? is for.

Get Anisha Dahal’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let’s understand this through an example.

//number
console.log(10 ?? "not found") // 10
console.log(0  ?? "not found") // 0

//string
console.log("John" ?? "not found") // "John"
console.log(""     ?? "not found") // ""

//boolean
console.log(true  ?? "not found") // true
console.log(false ?? "not found") // false

//undefined, null
console.log(undefined ?? "not found") // "not found"
console.log(null      ?? "not found") // "not found"

Let’s break down each example and understand how the nullish coalescing operator (??) behaves in JavaScript.

Number:

//number
console.log(10 ?? "not found") // 10
console.log(0  ?? "not found") // 0

• When the left operand (10) is not null or undefined, it's returned immediately.
• When the left operand (0) is not null or undefined, it's returned, even though it's a falsy value.

String:

//string
console.log("John" ?? "not found") // "John"
console.log(""     ?? "not found") // ""

• Similar to the number example, when the left operand (“John”) is not null or undefined, it's returned.
• When the left operand (an empty string) is not null or undefined, it's returned.

Boolean:

//boolean
console.log(true  ?? "not found") // true
console.log(false ?? "not found") // false

• When the left operand (true) is not null or undefined, it's returned.
• When the left operand (false) is not null or undefined, it's returned.

Undefined and Null:

//undefined, null
console.log(undefined ?? "not found") // "not found"
console.log(null      ?? "not found") // "not found"

• Both undefined and null are nullish values in JavaScript. So, the nullish coalescing operator returns the right operand ("not found") when the left operand is null or undefined.

In summary, the nullish coalescing operator (??) returns the right operand only when the left operand is null or undefined, otherwise, it returns the left operand. This behavior is different from the logical OR operator (||), which considers any falsy value (including 0 and '') when evaluating the left operand.

Best Practices

To write more robust and readable code, consider the following best practices:

1. Be explicit: Use ?? when you want to handle only null or undefined values, and || when you want to handle a wider range of falsy values.
2. Keep it simple: Don't overcomplicate your code by mixing the two operators unnecessarily. Choose the operator that best fits the scenario.

Conclusion

Both the logical OR operator (||) and the nullish coalescing operator (??) are powerful tools in JavaScript for handling default values and nullish values. By following best practices and being intentional with your choice of operator, you can write more robust and readable JavaScript code. I hope that this article helped you clarify your understanding of || and ?? operators. See you in the next one. 👋