Why does (false || null) return null, while (null || false) returns false?

Question

Why does false || null return a different result than null || false?

Can I safely rely on return myVar || false returning false if myVar is either null or false, but true otherwise?

All Combinations:

false || null

null

null || false

false

true || null

true

null || true

true

Answer 1

The || operator in JavaScript doesn't necessarily return true or false. It's exact behavior is this:

If the first operand is truthy, it evaluates to the first operand. Otherwise, it evaluates to the second.

This works as expected given two boolean values, but as you have noticed, you can also use it with any other value. In both of your examples, the first operand is falsey. Thus, both expressions evaluate to the second operand.

---

Note about one way this is used: The behavior of || is often used to create default arguments:

function foo(optionalArg) {
  optionalArg = optionalArg || "default!";
  console.log(optionalArg);
}

foo("test");
foo();

If optionalArg is omitted, its values implicitly becomes undefined. Because undefined is falsey, undefined || "default!" evaluates to "default!". Note that this style of default args can backfire if you pass a falsey value, like 0 or "". It's more robust to explicitly check for undefined. In ECMAScript 6, you can do this with a default value within the parameter list to be more readable:

function foo(optionalArg = "default!") {
  console.log(optionalArg);
}

foo("test");
foo(false);
foo(undefined);
foo();

Answer 2

When you have || between two variables the following happens.

Example: a || b

1. It checks if the a is truthy. If it is then it returns it. If it is not then it checks the next value.
2. If it hasn't returned a value yet then it returns the next value no matter what.

Another way to write this is:

if (a) {
    return a;
}
return b;

Or:

a ? a : b;