Section 3.5. The Logical Operators

3.5. The Logical Operators

Most of the examples so far in the book show a conditional expression that consists usually of one operator and two operands, such as the following:

if (sValue == 'test')

However, many times a conditional expression is dependent on several different conditions being met, each represented by an expression and combined through the use of one of JavaScript's logical operators.

There are three logical operatorstwo binary and one unary. The first is the logical AND, represented by two ampersand characters, &&. When used in a conditional statement, the AND operator requires that expressions on both sides of the operator evaluate to true for the entire expression to evaluate to TRue:

var nValue = 10; if ((nValue > 10) && (nValue <=100)) // true if nValue is greater than 10 and nValue is less than or equal to 100

The result of using this expression joined by the AND operator is false because the variable, nValue, is equal to 10, which means the first expression is false. If the first expression evaluates to false, the JavaScript engine won't process the second expression because the entire statement is going to fail regardless.

The second operator is the logical OR operator, represented by two vertical lines, ||. When used in a conditional statement, the OR operator requires one or the other of its expressions on either side to be true in order for the entire expression to evaluate to true:

var nValue = 10; if ((nValue > 10) || (nValue <= 100)) // true if nValue is either greater than 10 or less than or equal to 100

The result of this code is that the conditional statement is TRue because the variable is less than 100. Both sides of the logical OR operator must be evaluated because the operator requires only a true expression on one side to return TRue.

The final logical operator is the logical NOT. This operator returns the logical negation of the expression. If the expression is TRue, it returns false; if false, it returns true:

var nValue = 10; if (!(nValue > 10)) // returns true if nValue if less than or equal to 10; otherwise it returns false

With both logical operators, the JavaScript engine does what is known as a short-circuit evaluation of the expression first. If the logical operator is AND (&&), and the first expression evaluates to false, the second isn't evaluated because the entire expression must evaluate to false.

If using the logical OR operator, if the first expression evaluates to true, the second is not evaluated. An OR operator evaluates to true when one of its operands is true.

By understanding how short-circuit evaluation works, you can use first expressions that are less CPU- or other resource-intensive, thereby adding a little efficiency to your application.

JavaScript Best Practice: Take advantage of short-circuit evaluation by placing the key expression or the less resource-intensive expression first when using logical AND/OR operators.

Also note that though the examples in this section use parentheses around the expressions, the use of parentheses isn't required; the relational operators have a higher precedence than do the logical operators and therefore are evaluated first. In Example 3-6, I didn't use the parentheses with the AND operator.

However, I've found they can make the entire expression more readable, as well as being a good visual double-check on it.

JavaScript Best Practice: Surround the expressions on either side of the logical operator (&& or ||) with parentheses.