js double question mark vs double pipe

Project Fab

4 min read

·

18-03-2025

1

0

Share

JavaScript's Double Question Mark (Nullish Coalescing) vs. Double Pipe (Logical OR): A Deep Dive

JavaScript offers several ways to handle potentially undefined or null values, preventing errors and enhancing code robustness. Two prominent operators often used for this purpose are the double question mark (??) – the nullish coalescing operator – and the double pipe (||) – the logical OR operator. While both can provide default values, they differ significantly in their behavior and applications. Understanding these differences is crucial for writing clean, efficient, and error-free JavaScript code.

The Logical OR Operator (||)

The logical OR operator (||) evaluates its operands from left to right. It returns the first truthy value it encounters or the last value if all operands are falsy. In the context of handling potential null or undefined values, this means it will use a default value if the first operand is "falsy." However, the definition of "falsy" is broader than just null and undefined.

Falsy Values in JavaScript:

JavaScript considers the following values as falsy:

• false
• 0 (zero)
• -0 (negative zero)
• 0n (BigInt zero)
• "" (empty string)
• null
• undefined
• NaN (Not a Number)

This broad definition of falsy is the key distinction between || and ??. Let's illustrate with examples:

let myValue = null;
let defaultValue = 10;

// Using logical OR
let resultOR = myValue || defaultValue;  // resultOR will be 10

myValue = 0;
resultOR = myValue || defaultValue; // resultOR will be 10 (0 is falsy)

myValue = "";
resultOR = myValue || defaultValue; // resultOR will be 10 (empty string is falsy)

myValue = false;
resultOR = myValue || defaultValue; // resultOR will be 10 (false is falsy)

myValue = 15;
resultOR = myValue || defaultValue; // resultOR will be 15 (15 is truthy)

As you can see, || considers 0, "", and false as falsy, resulting in the default value being used even if the original value is not strictly null or undefined. This behavior might not always be desired, leading to unexpected results.

The Nullish Coalescing Operator (??)

Introduced in ES2020, the nullish coalescing operator (??) is designed to address the limitations of ||. It only returns the right-hand operand if the left-hand operand is explicitly null or undefined. Any other falsy value will be treated as truthy.

Let's repeat the examples using ??:

let myValue = null;
let defaultValue = 10;

// Using nullish coalescing
let resultNullish = myValue ?? defaultValue; // resultNullish will be 10

myValue = 0;
resultNullish = myValue ?? defaultValue; // resultNullish will be 0 (0 is not null or undefined)

myValue = "";
resultNullish = myValue ?? defaultValue; // resultNullish will be "" (empty string is not null or undefined)

myValue = false;
resultNullish = myValue ?? defaultValue; // resultNullish will be false (false is not null or undefined)

myValue = 15;
resultNullish = myValue ?? defaultValue; // resultNullish will be 15

Notice the crucial difference: ?? only uses the default value when myValue is null or undefined. Other falsy values like 0, "", and false are preserved. This behavior makes ?? more predictable and less prone to unintended consequences when dealing with values that might be legitimately 0, "", or false.

Practical Applications and Choosing the Right Operator

The choice between || and ?? depends on the specific context and desired behavior.

• Use || when: You want a default value if the variable is falsy in the broader sense (including 0, "", and false). This is suitable for situations where 0, "", or false are genuinely invalid values and should be replaced with a default. For instance, setting a default user role if the user hasn't selected one.

• Use ?? when: You only want to provide a default value if the variable is explicitly null or undefined. This is preferable when 0, "", or false might be legitimate values and shouldn't be overridden. For example, setting a default quantity of items in a shopping cart if the user hasn't added any items yet. The cart could legitimately contain zero items.

Chaining Operators:

Both || and ?? can be chained together for more complex scenarios. However, be mindful of the order of operations. ?? has higher precedence than ||, meaning it will be evaluated first.

let value = null || 0 ?? 10; // value will be 0 (0 is truthy for ||)

let value2 = null ?? 0 || 10; // value2 will be 0 (0 is the result of ?? and is falsy for ||)

let value3 = null ?? 0 ?? 10; // value3 will be 0

let value4 = null || 0 || 10; // value4 will be 0

Performance Considerations:

While both operators are highly optimized in modern JavaScript engines, there is generally negligible performance difference between them for most use cases. The choice should be driven by the logic of your code rather than performance concerns.

Conclusion:

The double question mark (??) and double pipe (||) are valuable tools in a JavaScript developer's arsenal for handling potential null or undefined values. However, their distinct behaviors necessitate careful consideration when selecting the appropriate operator. Understanding the nuances of falsy values and the specific needs of your application will determine whether ?? (for strictly nullish checks) or || (for broader falsy checks) is the better fit. Choosing the correct operator improves code readability, reduces potential bugs, and ensures the intended logic is accurately implemented. Remember to thoroughly test your code to ensure it handles all edge cases correctly.