References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript Logical Or || operator

Operator JavaScript All modern browsers Updated
Quick answer

The logical OR operator || returns the first truthy value it finds, or the last value if all are falsy. It short-circuits on the first truthy operand. It was the classic way to set a default — name || "Guest" — but note it overrides valid falsy values like 0 and "", which is why ?? often replaces it.

Overview

|| is the mirror of logical AND &&. In a condition it means "at least one is true," but like && it returns an operand, not a boolean: it scans left to right and returns the first truthy value, or the last value if every operand is falsy. It short-circuits, so once it finds a truthy value the rest aren't evaluated.

For years this powered the default-value pattern: const name = input || "Guest" uses input when it's truthy, otherwise "Guest". It's clean and you'll see it everywhere. But it has a well-known trap — it falls back on any falsy value, including 0, "" and false, which are often perfectly valid inputs. count || 10 wrongly turns a real 0 into 10.

That trap is exactly why the nullish coalescing operator ?? was added — it only falls back on null or undefined, leaving 0 and "" intact. The guidance now: use ?? for defaults where falsy values are valid, and keep || for genuine boolean logic or when any falsy value really should trigger the fallback. As with &&, you can't mix || with ?? without parentheses.

Syntax

a || b

false || "yes"    // "yes" (first truthy)
"hi" || "yes"     // "hi"  (stops at first truthy)
0 || 10           // 10    (0 is falsy - overridden!)
0 ?? 10           // 0     (?? keeps 0)

Example

Live example 
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  function greet(name) {
    return 'Hello, ' + (name || 'Guest');
  }

  document.getElementById('out').textContent =
    greet('Ada') + '\n' +
    greet('') + '\n' +
    '0 || 5 = ' + (0 || 5) + ' vs 0 ?? 5 = ' + (0 ?? 5);
  // Hello, Ada / Hello, Guest / 0 || 5 = 5 vs 0 ?? 5 = 0
</script>

Best practices

  • Remember || returns the first truthy operand (or the last), not a boolean.
  • Use ?? for defaults when 0, "" or false are valid values.
  • Keep || for boolean logic or when any falsy value should trigger the fallback.
  • Add parentheses when mixing || with ??.

Frequently asked questions

What does || return in JavaScript?
The first truthy operand, or the last operand if all are falsy. It returns a value, not necessarily a boolean.
What is the difference between || and ?? ?
|| falls back on any falsy value (0, "", false); ?? falls back only on null or undefined. Use ?? when falsy values are valid.
How do I set a default value with ||?
const x = value || fallback uses value when truthy, otherwise fallback — but consider ?? to avoid overriding valid falsy values.
What is the difference between || and && ?
|| returns the first truthy value; && returns the first falsy value.
! ==