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

Chinedu Ikechi — Mon, 04 Jan 2021 20:35:57 +0000

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.

DEV Community: Chinedu Ikechi

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