In the same way that the calculations that you do with numbers often involves more than just two numbers and one operation, the condition that you want to test in your if statement may involve more than just a simple comparison of two values. Unlike combining number calculations together where we just apply more of the same type of operators together such as a + b + c combining comparisons together is a little more complicated. We don’t just need to be able to compare three or more values together such as a == b == c. We also need to be able to test for one condition being met and a second condition also being met or possible we have two different conditions where we need to test if either one or the other is met.

JavaScript provides us with logical operators that allow us to combine the results of individual comparisons together. There are three of these logical operators – the And operator is &&, the Or operator is || and the Not operator is !. If you are familiar with how logic works then you probably already realize what effect combining conditions together using these operators will have. If you haven't programmed before the following tables demonstrate how the logical operators work out their result.

&& | true | false |
---|---|---|

true | true | false |

false | false | false |

|| | true | false |
---|---|---|

true | true | true |

false | true | false |

! | |
---|---|

true | false |

false | true |

When logical operators are used, JavaScript only tests as many of the conditions as it needs in order to determine the result.

A logical && operator only returns true if both of the conditions are true. This means that when the condition on the left is false then the condition on the right is not tested at all since that cannot affect the result.

A logical || operator returns true as long as one, the other, or both of the conditions are true. This means that if the condition on the left is true then the condition on the right is not tested.

The ! operator is usually used specifically with Boolean variables in order to test for the reverse condition of what the variable contains.

Note: One thing to watch for when writing your logical operators is to make sure that you always include two ampersands (&&) or two bars (||). JavaScript also has operators that use a single & and a single |. Those operators perform bitwise operations on the values passed to them rather than logical comparisons. Since bitwise and logical operations produce different results you need to make sure that you are using the correct operators for what you are trying to do.

When we start combining comparison and logical operators together, either in an if statement or in setting a Boolean variable, we can get different results depending upon the order in which the operators are applied. JavaScript has an order of precedence for comparison and logical operators in the same way that there is an order of precedence for numerical operators. You may even have numerical operators included in the test, in order to calculate the values to be compared. Any numerical operators will be applied first. The comparison operators and logical operators are applied next. These are done starting from the left by determining which comparisons need to be done in order to work out the values needed for each logical operator in turn. Those comparisons are done first followed by that logical operation. If this doesn’t produce a final result then the comparisons required by the next logical operator are done next and so on.

Should we need to change this order for any reason then we can add parentheses around those parts that we want to be done first. If you are in any doubt as to what order the various parts will be done in then you can add the parentheses anyway in order to make it clearer how calculation should be done. It doesn’t matter if the order would have been the same. Unnecessary parentheses will not affect the calculation, but will make it easier to read.

*This article written by Stephen Chapman, Felgall Pty Ltd.*