JavaScript Logical Operators

tldr;

Logical operators are important in JavaScript applications. We constantly need to compare variables and do something based on that comparison. If some comparison is true, take path A; if it’s false, take path B. If we don’t understand the order of precedence of the logical operators, or don’t fully understand the result of the comparisons, then we will spend lots of time debugging our application trying to follow the flow. So even though this is a relatively basic part of JavaScript, it’s really important.

Logical Operators

JavaScript has three logical operators: || (or), && (and) and ! (not). They don’t have to only compare against boolean values, and the result of the operator doesn’t have to be a boolean either. Many times they are used as if statement comparisons, but that’s not the only place they have to be used. Let’s take a look at each of them in more depth.

The || Operator

Let’s look first at the logical || operator. When using this operator, you’re saying that you want to use one value OR another, or continue if one value is true OR another one. It’s a very useful operator. It starts on the left of the comparisons and goes to the right. It stops at and returns the first truthy value it finds. If it doesn’t find a truthy value, it returns the last value in the list. Let’s look at some examples of using it.

let isTrue = 5 > 3 || 6 > 8; // true

let isFalse = 1 > 3 || 2 > 4; // false

if (isTrue || isFalse) {
    console.log('Made it into the statement');
}

In these examples, if either of the two comparisons is true, the end result is true. If they’re both false, the end result is false. Here’s a table to demonstrate when the result will be true and when it will be false:

true || true --> true;
true || false --> true;
false || true --> true;
false || false --> false;

So the end result will only be false in one of the four situations, and that’s when both statements are false. If either one is true, or if both are true, then the result is true as well. You also don’t only have to pass 2 comparisons, it could be as many as you want or need for your situation. Also as I mentioned above, the end result doesn’t have to be a boolean value. Let’s look at an example of that.

let person = firstPerson || secondPerson || null;

In this example, we want to initialize the person variable to either the firstPerson if it’s not null or undefined or any other falsy value; the secondPerson if it’s not falsy; and finally we set it to null as the fallback result. firstPerson and secondPerson might be objects, they might be strings, they might be an array; it doesn’t really matter what they are, the person variable will be that value if one of them is true.

The && Operator

The next operator we’ll look at is the && operator. It has many of the same use cases as the || operator, but instead of at least one statement needing to be true for the result to be true, all statements need to be true for the result to be true. Its result table looks like this:

true && true --> true;
true && false --> false;
false && true --> false;
false && false --> false;

In this case, only one of the four routes ends in a truthy result. Let’s look at some examples of this.

let isTrue = 1 > 0 && 50 > 4 * 9; // true
let isFalse = 1 < 0 && 2 > 1; // false

if (name === 'Preston' && isReading) {
    console.log('Preston is reading');
}

Just like before, the comparison statements for the && operator don’t need to boolean values, but JavaScript converts them to boolean to do the comparison.

The end result of the comparisons, though, works differently than the || operator. If all parts of the && operator statement are true, the result will be the last statement. If any part of it is false, it returns the first statement in the list.

let result = 5 && 3; // 3
result = 0 && 4; // 0

Also like the || operator, there is no limit to the number of statments you can have in your list with the && operator. You can put as many as needed in your list of statements.

The last note is that && has a higher precedence than || does in comparisons. So, if you have a mixture of && and || statements, the && statements will be evaluated first before the || statements are.

The ! Operator

The third logical operator we’ll look at is the ! operator. When using this operator, it effectively converts the value with which it is used to a boolean (if needed) and then returns the inverse value. Let’s look at some examples.

let result = !true; // false
result = !0; // true

That’s pretty straight forward. But sometimes you’ll see people using !! in their code. The reason for that is to convert the value to its real boolean value. That’s kind of confusing, but the first ! converts the comparison to a boolean and inverses it, and then the second ! inverses it again. So if we have a string variable and we want to know if it has a value, and do something if the result is true, we could use the !! to find out:

let result = !!`is my string there`; // true
result = !!null; // false

So one ! gets the opposite boolean value of the comparison; two !! gets the same boolean value of the comparison.

The ! operator has the highest precedence of the three logical operators; it evaluates first before before the && operator and the || operator.

Conclusion

These three logical operators are simple but powerful. They control a lot of the flow of your application and what actually happens. Understanding all the tricks you can perform with them and, more importantly, making sure that you have them in order of precedence, is important. You can save yourself a lot of time debugging if you understand the order in which the comparisons will be done. I know I’ve spent too much time figuring out why an if statement is being hit when it shouldn’t be or vice versa. But the more I’ve studied and paid attention to these logical operators, the less I’ve run into that issue.