Operator? Logic, please && thank you.

Colin Standefer
Frontend Weekly
Published in
3 min readJun 28, 2016

Logical operators are something that are intensely useful if you understand how to use them. I thought I understood how to use them until an instructor pointed out that I was missing some subtleties, namely the presence of truthiness or falsiness in my code when using them, specifically with the OR operator (||). It seems like it would be obvious, but I wanted to write this, if for no other reason, to delineate in my mind how the logical operators work.

Here are the logical operators I’m talking about:

&& (AND)
|| (OR)
! (NOT)

We’ll start with ‘&&’, and go from there. The use of ‘&&’ is exactly like what you would think. You use it, for instance, in a ‘while’ loop to make sure that 2 variables are truthy as conditions for the loop. Let’s see what that might look like.

while (i > 0 && i < 10) {
// do whatever code
i++;
};

In that example, as long as those 2 conditions are both met, the loop will run. When one of those conditions isn’t met, however, the loop will stop running.

Something to keep in mind while using the ‘&&’ operator, is that BOTH conditions HAVE to prove true for whatever code to work under those conditions, unless special stipulations are put in place for when it proves false, like in an if… else statement. I’ll write out the way the truthiness/falsiness play out with ‘&&’ below.

true && true returns true
true && false returns false
false && true returns false
false && false returns false

Next, we have the OR operator, ‘||’.

This one is interesting, and I’ve actually made a big mistake with it relating to the truthiness/falsiness of the statement. This mistake was caused by the fact if any of the statements prove true, then the code never gets to the next snippet after your ||, like in the example below.

for (var i = 3; i < 10; i++) {
if (i === 3 || i === 4 || i === 5) {
// do whatever code
} else {
// do whatever code
}
};

In this example, whenever i === 3, the code pertaining to whether i === 4 or 5 isn’t even read by the console. The first condition satisfied what the console was looking for, and so it moved on to execute other code. This is an important thing to keep in mind before you go off and set up an elaborate ‘||’ to try and cover your bases.

The way truthiness/falsiness plays out with the ‘||’ operator is as follows:

true || true returns true
true || false returns true
false || true returns true
false || false returns false

Next, we have the NOT operator, ‘!’

This is simple enough as we can see in how truthiness/falsiness plays out with it below.

!true returns false
!false returns true

‘!’ makes the console look for the opposite in what it’s looking at. If something like a string would otherwise prove true, it will now return false.


!"teacup piglet" returns false

Notice it returns the false boolean rather than what a possible opposite of the string itself might be. The console doesn’t return “lion” for !”teacup piglet”.

That’s it for logical operators. Just be conscientious about the truthiness or falsiness of your statements and ask yourself how exactly the console is going to read what you wrote. Will it read all of it || will it read the first part and skip over the rest?

Enjoy the truthiness of this teacup piglet snacking on an ice cream cone.

“teacup piglet”

--

--