javascript double question mark vs double pipe

Breiz Heurope

2 min read

·

11-03-2025

7

0

Share

Choosing between the nullish coalescing operator (??) and the logical OR operator (||) in JavaScript can be tricky. Both handle situations where a variable might be "falsy," but they behave differently, leading to unexpected results if you're not careful. This article clarifies their distinctions and guides you in selecting the appropriate operator for your needs.

Understanding Falsy Values

Before diving into the operators, let's review falsy values in JavaScript. These values evaluate to false in a Boolean context:

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

Any other value is considered truthy.

The Logical OR Operator (||)

The double pipe (||) operator returns the first truthy operand. If both operands are falsy, it returns the last operand. This means it treats 0, "", and false as falsy and will not return them.

Example:

let x = 0;
let y = 10;
let result = x || y; // result is 10 (y because x is falsy)

let a = "";
let b = "Hello";
let result2 = a || b; // result2 is "Hello" (b because a is falsy)

let c = null;
let d = "World";
let result3 = c || d; // result3 is "World" (d because c is falsy)

The Nullish Coalescing Operator (??)

Introduced in ES2020, the double question mark (??) operator returns the right-hand operand only if the left-hand operand is null or undefined. It will ignore other falsy values like 0, "", and false.

Example:

let x = 0;
let y = 10;
let result = x ?? y; // result is 0 (x is not null or undefined)

let a = "";
let b = "Hello";
let result2 = a ?? b; // result2 is "" (a is not null or undefined)

let c = null;
let d = "World";
let result3 = c ?? d; // result3 is "World" (d because c is null)

let e = undefined;
let f = "Default";
let result4 = e ?? f; // result4 is "Default" (f because e is undefined)

When to Use Which Operator

The choice depends on your desired behavior:

• Use || when you want a default value if the variable is falsy (including 0, "", and false). This is common for setting default values for optional parameters or configurations.

• Use ?? when you specifically want to avoid overriding 0, "", or false values and only provide a default if the variable is truly null or undefined. This is particularly useful when dealing with optional values that might legitimately have a falsy value.

Practical Examples

Scenario 1: Default value for a user's age:

You might use the logical OR operator because an age of 0 is a valid (albeit unusual) age.

let userAge = 0;
let defaultAge = 30;
let age = userAge || defaultAge; // age will be 0

Scenario 2: Default value for a user's name:

You would likely prefer the nullish coalescing operator, as an empty string "" represents a user who hasn't entered a name, not a necessarily invalid state:

let userName = "";
let defaultName = "Guest";
let name = userName ?? defaultName; // name will be ""

Conclusion

Understanding the subtle differences between || and ?? is crucial for writing robust and predictable JavaScript code. By carefully choosing the right operator, you can ensure that your defaults are applied correctly and avoid unexpected behavior due to falsy values. Remember, ?? offers more precise control when dealing with null or undefined specifically.