Understanding ?? vs || in JavaScript: Choosing the Right Default Operator

When writing JavaScript, it’s common to assign default values to variables in case they are null, undefined, or another falsy value. Two operators that help us do this are the nullish coalescing operator (??) and the logical OR operator (||). While they might look similar, each behaves differently and is suited for different scenarios.

In this post, we’ll break down what each operator does, show examples of when to use them, and summarize their differences to help you choose the right one in your code.

---

The Nullish Coalescing Operator (??)

The nullish coalescing operator (??) provides a default value only when the left-hand operand is null or undefined. This is especially useful when you want to allow other "falsy" values, like 0, false, or "", without triggering the fallback.

Syntax:

let result = leftValue ?? rightValue;
Copy code

Here, result will be assigned leftValue if it’s not null or undefined. Otherwise, it will use rightValue.

Example:

let age = 0;
let displayAge = age ?? 18; // Result: 0, because 0 is not null or undefined

let userName = null;
let displayName = userName ?? "Guest"; // Result: "Guest", because userName is null
Copy code

In the first example, we don’t replace age with 18 because 0 is a valid number, not null or undefined. In the second example, however, userName is null, so we assign "Guest" as the fallback.

The Logical OR Operator (||)

The logical OR operator (||) assigns a default value if the left-hand operand is any falsy value. Falsy values in JavaScript include 0, NaN, false, "" (an empty string), null, and undefined.

Syntax:

let result = leftValue || rightValue;
Copy code

Here, result will be assigned leftValue if it’s truthy (not a falsy value). Otherwise, it will use rightValue.

Example:

let age = 0;
let displayAge = age || 18; // Result: 18, because 0 is falsy

let userName = "";
let displayName = userName || "Guest"; // Result: "Guest", because an empty string is falsy
Copy code

In both examples, || replaces the falsy values 0 and "" with the provided defaults. Unlike ??, which only checks for null or undefined, || will trigger the fallback for any falsy value.

---

Key Differences Between ?? and ||

Operator	Returns Right Operand When Left Operand Is	Allows Left Operand If It’s
??	null or undefined	Falsy values like 0, "", false, NaN
`		`

Summary:

• Use ?? if you only want to check for null or undefined, allowing other falsy values like 0, false, and "".
• Use || if you want to check for any falsy value and provide a fallback for all of them.

Choosing the Right Operator

Knowing which operator to use depends on the behavior you want:

• If you’re setting a default number, like 0, or a boolean like false, prefer ?? to avoid unintended fallbacks.

  let count = 0;
  let displayCount = count ?? 10; // Keeps 0, rather than using 10
  Copy code

• If you want a default for cases where any falsy value should fall back, such as an optional input that might be empty, use ||.

  let username = "";
  let displayUsername = username || "Anonymous"; // Uses "Anonymous" since username is empty
  Copy code

Final Thoughts

Both ?? and || are powerful tools for providing default values, but they serve different purposes. ?? is best for cases where only null or undefined should be replaced, preserving other values. || works for broader checks, making it great for generic fallback cases.

Using the right operator can make your code clearer and prevent unexpected behavior—understanding when to use ?? versus || is a simple yet effective way to keep your code efficient and reliable.