JavaScript logical operators are used to combine or invert boolean values. These operators are crucial in controlling the flow of your program based on multiple conditions. The primary logical operators in JavaScript are && (logical AND), || (logical OR), and ! (logical NOT). This guide will cover each of these operators with examples to illustrate their use.
1. Logical AND (&&)
The logical AND operator (&&) returns true if both operands are true. If either operand is false, the operator returns false. This operator is often used in conditional statements to ensure that multiple conditions are true before executing a block of code.
Syntax:
Example:
let b = false;
let c = true;
console.log(a && b); // Outputs: false
console.log(a && c); // Outputs: true
if (a && c) {
console.log("Both conditions are true.");
} else {
console.log("At least one condition is false.");
}
In this example, a && b evaluates to false because b is false, while a && c evaluates to true because both a and c are true.
2. Logical OR (||)
The logical OR operator (||) returns true if at least one of the operands is true. If both operands are false, the operator returns false. This operator is useful when you need to check if at least one condition is true.
Syntax:
let b = false;
let c = false;
console.log(a || b); // Outputs: true
console.log(b || c); // Outputs: false
if (a || b) {
console.log("At least one condition is true.");
} else {
console.log("Both conditions are false.");
}
In this example, a || b evaluates to true because a is true, while b || c evaluates to false because both b and c are false.
3. Logical NOT (!)
The logical NOT operator (!) inverts the value of a boolean. If the operand is true, it returns false, and if the operand is false, it returns true. This operator is useful for toggling the boolean state or for checking if a condition is not true.
Example:
let b = false;
console.log(!a); // Outputs: false
console.log(!b); // Outputs: true
if (!b) {
console.log("Condition is false.");
} else {
console.log("Condition is true.");
}
In this example, !a evaluates to false because a is true, while !b evaluates to true because b is false.
Combining Logical Operators
Logical operators can be combined to form complex conditions. The order of evaluation follows standard operator precedence, where ! is evaluated first, followed by &&, and then ||. Parentheses can be used to control the order of evaluation explicitly.
Example:
let b = false;
let c = true;
console.log((a && b) || c); // Outputs: true
console.log(a && (b || c)); // Outputs: true
if ((a && b) || c) {
console.log("Complex condition is true.");
} else {
console.log("Complex condition is false.");
}
In this example, (a && b) || c evaluates to true because a && b is false, but c is true, resulting in true due to the OR operator. Similarly, a && (b || c) evaluates to true because b || c is true and a is also true.
Short-Circuit Evaluation
JavaScript logical operators use short-circuit evaluation, meaning they stop evaluating as soon as the result is determined. This can be useful for optimizing performance or avoiding errors.
Example:
let b = true;
function checkB() {
console.log("Checking b...");
return b;
}
console.log(a && checkB()); // Outputs: false
console.log(a || checkB()); // Outputs: true and "Checking b..."
if (a && checkB()) {
console.log("Both conditions are true.");
} else {
console.log("At least one condition is false.");
}
In this example, a && checkB() evaluates to false without calling checkB() because a is false. On the other hand, a || checkB() evaluates checkB() because a is false, resulting in true and logging "Checking b...".
Practical Examples
Example 1: User Authentication
Checking if a user is logged in and has the required permissions.
let hasPermission = false;
if (isLoggedIn && hasPermission) {
console.log("Access granted.");
} else {
console.log("Access denied.");
}
Example 2: Default Values
Providing default values for function parameters.
javascript
Copy code
function greet(name) {
let greeting = name || "Guest";
console.log("Hello, " + greeting + "!");
}
greet("Alice"); // Outputs: Hello, Alice!
greet(); // Outputs: Hello, Guest!
Example 3: Toggling a Feature
Enabling or disabling a feature based on a condition.
isFeatureEnabled = !isFeatureEnabled;
console.log("Feature enabled: " + isFeatureEnabled); // Outputs: Feature enabled: true
isFeatureEnabled = !isFeatureEnabled;
console.log("Feature enabled: " + isFeatureEnabled); // Outputs: Feature enabled: false
JavaScript logical operators are essential tools for controlling the flow of your code based on multiple conditions. The && (logical AND), || (logical OR), and ! (logical NOT) operators allow you to create complex logical expressions and make decisions based on boolean logic.
Practice Excercise Practice now