Hear me out.
If you’ve written software with PHP or any statically typed language, you’d know that the value of any expression including either || or && will return a boolean.
Enter JavaScript.
The name “logical operators” doesn’t completely describe the function of || and && in JavaScript. A more apt name would be “selector operators.”
This is because, in JavaScript, || or && will return one (and only) of the two expression values rather than a boolean value.
Quoting the ES5 spec from section 11.11
The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one the two operand expressions.
Take a quick look at this:
var a = 10;
var b = "foo"
var c = null;
a || b // 10
a && b // "foo"
c || b // "foo"
c && b // null
Surprised?
Both || and && operators perform a boolean test on the first expression value (a or c). If the value is not already boolean (as it’s not, here), a ToBoolean coercion occurs, so that the test can be performed.
For the || operator, if the test is true, the || expression results in the first expression value (a or c). If the test is false, the || expression results in the second expression value (b).
Oppositely, for the && operator, if the test is true, the && expression results in the second expression value. If the test is false, the && expression results in the first expression value.
Let’s take a deep look at the first and last expressions from the code above for better understanding:
a || b; // 10
In the above expression, the || operator will first check if the first expression value (a) is a boolean, else a ToBoolean coercion occurs. a (10) is not boolean, hence, a will be coerced to true because a (10) is a truthy.
Since our test is true, the || operator will return the first expression value (10) – not the coerced value (true).
c && b; // null
In the above expression, the && operator will first check if the first expression value is boolean, else it coerces it. c (null) is not boolean, hence, it will be coerced to false, because null is falsy.
&& operator returns the first expression value if it's falsy or the second expression value if the first value is truthy. Since c(null) is falsy, the && operator will return it.
As a JavaScript programmer, always remember that:
The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one the two operand expressions.
Top comments (4)
That's a really great explanation. You are a very good writer, keeping things clear and you created great simplified examples. Thanks for sharing this.
Thank you, Raddevus. Your compliment means a lot to me.
And thank you for taking out time to read my article.
Yup, it's great. Actually makes it way more useful than returning a boolean
Yeah, Jon.
It's more like an enlightenment. Most people think it returns a boolean value.