Difference between ?? and || in Typescript or Javascript?

In TypeScript (and JavaScript), the ?? (nullish coalescing operator) and || (logical OR operator) are both used to provide default values, but they behave differently in terms of the conditions under which they return the right-hand operand.

Nullish Coalescing Operator (??)

The ?? operator returns the right-hand operand when the left-hand operand is null or undefined. If the left-hand operand is any other value (including falsy values like 0, NaN, ''), it returns the left-hand operand.

Example:

const value = null ?? 'default';
console.log(value); // Output: 'default'

const value2 = undefined ?? 'default';
console.log(value2); // Output: 'default'

const value3 = 0 ?? 'default';
console.log(value3); // Output: 0

const value4 = '' ?? 'default';
console.log(value4); // Output: ''

const value5 = false ?? 'default';
console.log(value5); // Output: false

Logical OR Operator (||)

The || operator returns the right-hand operand when the left-hand operand is falsy. Falsy values include false, 0, -0, 0n, "", null, undefined, and NaN. If the left-hand operand is any truthy value, it returns the left-hand operand.

Example:

const value = null || 'default';
console.log(value); // Output: 'default'

const value2 = undefined || 'default';
console.log(value2); // Output: 'default'

const value3 = 0 || 'default';
console.log(value3); // Output: 'default'

const value4 = '' || 'default';
console.log(value4); // Output: 'default'

const value5 = false || 'default';
console.log(value5); // Output: 'default'

Key Differences

• Falsy Values: || considers many values (like 0, '', false, NaN) to be falsy and returns the right-hand operand for these values. ??, on the other hand, only considers null and undefined to be nullish and returns the right-hand operand only for these values.
• Use Case: Use ?? when you specifically want to handle null and undefined cases. Use || when you want to provide a default value for any falsy value.

Summary

• Use ?? (nullish coalescing) when you want to provide a default value only if the left-hand side is null or undefined.
• Use || (logical OR) when you want to provide a default value for any falsy value (including null, undefined, 0, false, '', NaN).

Choosing between ?? and || depends on the specific behavior you need for handling default values in your code.