Why don't logical operators (&& and ||) always return a boolean result?

Question

Why do these logical operators return an object and not a boolean?

var _ = (obj.fn && obj.fn() ) || obj._ || ( obj._ = {} );  var _ = obj && obj._; 

I want to understand why it returns result of obj.fn() (if it is defined) OR obj._ but not boolean result.

Answer 1

In JavaScript, both || and && are logical short-circuit operators that return the first fully-determined “logical value” when evaluated from left to right.

In expression X || Y, X is first evaluated, and interpreted as a boolean value. If this boolean value is “true”, then it is returned. And Y is not evaluated. (Because it doesn’t matter whether Y is true or Y is false, X || Y has been fully determined.) That is the short-circuit part.

If this boolean value is “false”, then we still don’t know if X || Y is true or false until we evaluate Y, and interpret it as a boolean value as well. So then Y gets returned.

And && does the same, except it stops evaluating if the first argument is false.

The first tricky part is that when an expression is evaluated as “true”, then the expression itself is returned. Which counts as "true" in logical expressions, but you can also use it. So this is why you are seeing actual values being returned.

The second tricky part is that when an expression is evaluated as “false”, then in JS 1.0 and 1.1 the system would return a boolean value of “false”; whereas in JS 1.2 on it returns the actual value of the expression.

In JS false, 0, -0, "", null, undefined, NaN and document.all all count as false.

Here I am of course quoting logical values for discussion’s sake. Of course, the literal string "false" is not the same as the value false, and is therefore true.

Answer 2

In the simplest terms:

The || operator returns the first truthy value, and if none are truthy, it returns the last value (which is a falsy value).

The && operator returns the first falsy value, and if none are falsy, it return the last value (which is a truthy value).

It's really that simple. Experiment in your console to see for yourself.

console.log("" && "Dog");    // "" console.log("Cat" && "Dog"); // "Dog" console.log("" || "Dog");    // "Dog" console.log("Cat" || "Dog"); // "Cat"