Nullish Coalescing (??)

1. Introduction

In early JavaScript versions, setting default values was handled using the logical OR operator (||). ES2020 introduced the Nullish Coalescing operator (??) to handle default values more precisely, checking only for nullish values (null or undefined) instead of any falsy value.

2. Why It Matters

The logical OR operator (||) checks for any falsy value (such as false, 0, or empty strings ""). Using it to set configuration defaults can overwrite valid falsy values (like setting a custom count of 0 or turning off a toggle using false), resulting in subtle bugs. The nullish coalescing operator (??) solves this issue.

3. Real-World Analogy

Think of a Warehouse Shipping Inspector:

• Logical OR (Over-reactive inspector): An inspector checks a shipping box. If the box is completely empty (nullish), has an empty envelope inside (empty string), or contains a box marked with the number 0 (zero count), the inspector discards it and replaces it with a default box. Valid packages are overwritten.
• Nullish Coalescing (Precise inspector): The inspector only replaces the box if it is completely empty (nullish: null or undefined). If the box contains a box marked with 0 or an empty envelope, the inspector allows it to proceed, respecting the contents.

4. Operator Behavior Comparison

Let's contrast the behavior of the logical OR and nullish coalescing operators:

1. Logical OR Operator (||):

Returns the right-hand value if the left-hand value is any falsy value (false, 0, "", NaN, null, undefined).

2. Nullish Coalescing Operator (??):

Returns the right-hand value only if the left-hand value is nullish (null or undefined).

5. Practical Example

This script demonstrates setting configuration defaults for an API client using the nullish coalescing operator:

6. Common Mistakes

• Mixing logical AND/OR with ?? without parentheses: The engine cannot determine operator precedence when mixing logical operators (&& or ||) with the nullish coalescing operator (??). Writing a && b ?? c throws a SyntaxError. Always group expressions using parentheses explicitly: (a && b) ?? c.

7. Quick Quiz

8. Scenario-Based Challenge

9. Debugging Exercise

const active = true;
const val = 0;
// Objective: set default parameter
const setup = active && val ?? 10; // SyntaxError! Why?

const setup = (active && val) ?? 10; // Works! (Evaluates to 0)

10. Interview Questions

11. Production Considerations

• • Clean Default Configurations: When parsing configurations or API responses, combine the optional chaining operator (?.) and the nullish coalescing operator (??) to navigate objects and set fallback values safely: const val = response.data?.user?.settings?.theme ?? 'light'.