Logical operators

Programming in general is all about logic, so of course we need some logical operators as well. In JavaScript, you will find three primary logical operators:

• The OR operator: ||
• The AND operator: &&
• The NOT operator: !

A fourth operator, called the Nullish Coalescing operator (written as ??), is also considered a logical operator, but we'll talk about that one separately in a later article. For now, let's discuss the three main logical operators.

The logical OR operator: ||

The logical OR operator in JavaScript, as well as in many other programming languages, is noted as two vertical pipes, like this: ||

You can use it whenever you want to write a statement with two or more conditions, where just one of them have to be true. Here's an example:

let a = 2, b = 0;

if(a > 0 || b > 0)
	alert("True");
else
	alert("False");

In this example, I just require that one of our variables are greater than 0, and since the a variable is, we get the "True" message.

Be aware that each condition is checked from left to right, but as soon as an OR operator is met, and a previous condition evaluates to true, the remaining conditions won't be checked. This can be relevant in cases where there are many conditions and/or they require heavy processing - in those situations, you may want to order the conditions accordingly. Let's verify this behavior while I also show you that we can, of course, have more than two conditions:

let a = 42, b = 0;

if(a > 0 || b > 0 || confirm('Are you sure?'))
	alert("True");
else
	alert("False");

You will notice that even though I added a call to the confirm() function, the example works just like the previous one, because as soon as a condition is true and we hit an OR operator, we skip the remaining conditions, no matter how they look.

The logical AND operator: &&

The logical AND operator should be written as two ampersands in JavaScript (and many other programming languages, like this: &&

It should be used whenever you have two or more conditions which all have to be true for the statement to be true in its entirety. We can test this by using the example above, but changing the operator from OR to AND, like this:

let a = 2, b = 0;

if(a > 0 && b > 0)
	alert("True");
else
	alert("False");

Since we now use the AND operator, both conditions have to be true - we thereby require that both variables are bigger than 0, and since the b variable is not, the statement fails and we get the "False" message.

And again, you will notice that each conditions is evaluated from left to right, and as soon as the AND operator is met and the previous condition failed, the entire statement fails. We can illustrate this once again with an example:

let a = 42, b = 0;

if(a > 0 && b > 0 && confirm('Are you sure?'))
	alert("True");
else
	alert("False");

As we saw with the OR example, the call to the confirm() function is not reached, in this case because the entire statement fails as soon as we reach the middle part where b has to be greater than zero.

Combining OR / AND operators

In some situations, you may need to combine these two operators (AND/OR). Of course this is possible, but you may have to use parentheses to group the operators accordingly, to get the result you're looking for. When doing so, the conditions within a set of parentheses are considered a group and will return either TRUE or FALSE depending on which operators you use and what they return.

You are free to combine logical operators into a single statement, but when mixing logical operators you have to be aware of something called operator precedence. JavaScript uses this to decide the order in which the statements are evaluated, which can lead to some unexpected behavior, as illustrated by this example:

let a = 42, b = 0, c = 20;

if(a == 0 && b > 0 || c > 0)
	alert("True");
else
	alert("False");

My goal here was to create a statement that would require that a is 0 AND that either b OR c is bigger than 0. But because of operator precedence, as soon as the first condition fails (because a is not 0), it skips the secondary condition and jumps to the third condition, which uses the OR operator to make sure that c is bigger than 0, which it is, causing the entire statement to evaluate to True - this is NOT what we wanted.

In a situation like this, we have to add parentheses to instruct JavaScript which parts of the statement we want grouped. Here's a rewritten example, where I have added parentheses - you will notice that nothing has changed besides the added parentheses, and yet now we get the behavior I was initially looking for, returning False instead of True:

let a = 42, b = 0, c = 20;

if(a == 0 && (b > 0 || c > 0))
	alert("True");
else
	alert("False");

The logical NOT operator: !

The last logical operator I would like to tell you about is the logical NOT operator. It's also commonly referred to as the negation operator and it's written as an exclamation point (!) in JavaScript, as well as in many other programming languages. When using it, it will take the expression/operand and reverse it, basically turning true to false and false to true.

Here's a very basic example of it in action:

let a = false;
a = !a;
alert(a); // true

Notice the second line, where I use the logical NOT operator (!) to make a false boolean value into a true value. This can be used in a conditional statement as well:

let a = false;
if(!a)
	alert("Yes");

In this example, the condition will succeed and the message will be displayed, even though the a variable was initially false, because we use the NOT operator right before checking it, basically turning the false value into true.

The double NOT operator: !!

From time to time, you may run into the double NOT operator. While the logical NOT operator mainly works on actual boolean values, it is sometimes used to take a value that is Truthy or Falsy and turn it into an actual boolean value. Here's an example:

let a = 0;
a = !a;
alert(a); // true

The number 0 is considered a Falsy value (not an actual boolean False, but something that can be considered false under the right circumstances, as described here). When using the NOT operator on a Falsy value, it's converted into an actual boolean and then negated. So, a Falsy value negated by the logical NOT operator becomes a boolean true and so on, as illustrated by the example above.

Now, if you want to negate the result of this conversion result, you can use the double NOT operator:

let a = 0;
a = !!a;
alert(a); // false

As you can see, we are now basically turning a Falsy value into boolean true and then to a boolean false.

Summary

Programming is all about logic, so obviously we need some logical operators. We talked about the OR, AND and NOT operators in this article, which are the main logical operators of JavaScript. In one of the next articles we'll discuss the last one: The Nullish Coalescing operator (??).