A video of this article can be found below.
There are three logical operators in JavaScript the AND operator, The OR operator and the NOT operator. Logical operators enable us to make the logic in our code a bit more complex and allow us to check two or more conditions at once.
If we had an application that allowed customers to order groceries, we may have a scenario where a customer wanted to order some bananas. Before we can allow them to go ahead and place the order we need to check we have bananas in stock. Things get a little more complex if we also want to make sure a customer is not ordering all the bananas we have in stock because this could annoy other customers meaning they could not order any. Now we have a situation where when a customer orders some bananas we must check that we have bananas in stock and that the customer is ordering 5 or less bananas. This is the sort of scenario where a logical operator would be handy…
AND
We will start by looking at the AND operator. The AND operator consists of two ampersand symbols and it checks whether two conditions evaluate to true. To be clear when we say a condition this might be whether 2 is greater than one. Going back to the stock example, checking whether the number of bananas in stock greater is than zero is one condition and then whether a customer is ordering less than or equal to 5 bananas is another condition.
When we use the AND operator the possible outcomes are as follows:
If both conditions evaluate to be true the return value will be true.
If none of the conditions evaluate to be true the return value will be false.
If only one condition is false the entire group of conditions will evaluate to false.
Above is an example of using the AND operator where the return value is true, this is the case because 5 is less than 100 AND 10 is less than 100.
So now we will try this again but this time we will set the first expression to a condition that evaluates to true and the second expression to a condition that evaluates to false.
This time we get false as the return value because whilst 5 is less than 100, 1000 is not less than 100, therefore the whole expression does not evaluate to true.
OR
Moving on to the OR operator. The OR operator is made up of two pipe characters (||). Using the or operator we can check whether one of a set of conditions is true.
If one of the conditions is true then the next condition will not even be checked because the OR operator only checks the remaining conditions if the prior conditions were false. In this case, the return value would be true.
If none of the conditions are true then false is the return value.
In the above example, we first check whether 8 is less than 9. This evaluates to true so the second expression does not even need to be checked and we get true as the return value.
Now we try this again and check whether 100 is less than 9 or whether 100 is less than 11. As the first expression here is false we move on and check the second condition, the second condition is also false therefore the return value is false.
NOT
Lastly, we have no operator. The NOT operator (!) reverses or negates the value of a boolean so the NOT operator will return false if the value is true and true if the value is false. The return value of the NOT operator will always be a boolean.
The NOT operator can be used with non-boolean data types but these values will be converted into booleans based on whether the value is truthy or falsy before being negated and you can find a list of the false values on the mdn site here.
In the above example, we initialize a variable passwordIsRequired with the boolean value false. In the console.log we negate this value with the NOT operator. This means that we get true as the return value.
Let's try another example so if we say is 20 less than 30 we will get true. Now if we use the not operator and perform this again we get false because the return value is now negated. The final two examples show what happens if we use the not operator with the boolean values true and false. Again the values get negated so !true returns false and !false returns true.
Please feel free to post any comments, questions or feedback!
Top comments (0)