Logical Operators: Combining Boolean Expressions
Logical operators are used to combine or modify boolean (true/false) expressions. They are fundamental for creating complex conditions in if statements, loops, and other control flow structures. JavaScript has three primary logical operators: AND (&&), OR (||), and NOT (!).
1. Logical AND (&&)
The logical AND operator returns true if both of its operands are truthy. Otherwise, it returns false.
Truth Table:
| Operand 1 | Operand 2 | Result (Operand 1 && Operand 2) |
|---|---|---|
true | true | true |
true | false | false |
false | true | false |
false | false | false |
Short-Circuit Evaluation:
The && operator performs "short-circuit evaluation." If the first operand evaluates to false (or a falsy value), JavaScript immediately knows the result will be false (or the falsy value of the first operand) and does not evaluate the second operand.
Practice with Logical AND (&&):
Try changing the values of a and b in the editor below to see how the && operator behaves.
2. Logical OR (||)
The logical OR operator returns true if at least one of its operands is truthy. It returns false only if both operands are falsy.
Truth Table:
| Operand 1 | Operand 2 | Result (Operand 1 || Operand 2) |
|---|---|---|
true | true | true |
true | false | true |
false | true | true |
false | false | false |
Short-Circuit Evaluation:
The || operator also performs short-circuit evaluation. If the first operand evaluates to true (or a truthy value), JavaScript immediately knows the result will be true (or the truthy value of the first operand) and does not evaluate the second operand.
Practice with Logical OR (||):
Explore the behavior of the || operator. What values make the expression true?
3. Logical NOT (!)
The logical NOT operator is a unary operator (works on a single operand) that inverts the boolean value of its operand. It returns true if the operand is falsy, and false if the operand is truthy.
Practice with Logical NOT (!):
Experiment with the NOT operator. How does it change the truthiness of different values?
Operator Precedence with Logical Operators
Logical operators have their own precedence.
!(NOT) has the highest precedence.&&(AND) has higher precedence than||(OR).
This means ! operations are performed first, then &&, then ||. You can always use parentheses () to explicitly control the order of evaluation and make your code clearer.
Practice with Operator Precedence:
Predict the output of these expressions, then run the code to check your understanding.
Exercise: Logical Puzzles
Here are some final challenges to solidify your understanding. Use the editor below to find the answers.