DEV Community

loading...
Cover image for || and && are not "logical operators" in JavaScript

|| and && are not "logical operators" in JavaScript

chinedu__ikechi profile image Chinedu Ikechi ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (4)

pic
Editor guide
Collapse
raddevus profile image
raddevus

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.

Collapse
chinedu__ikechi profile image
Chinedu Ikechi Author

Thank you, Raddevus. Your compliment means a lot to me.

And thank you for taking out time to read my article.

Collapse
jonrandy profile image
Jon Randy

Yup, it's great. Actually makes it way more useful than returning a boolean

Collapse
chinedu__ikechi profile image
Chinedu Ikechi Author

Yeah, Jon.

It's more like an enlightenment. Most people think it returns a boolean value.