Logical Operators0%
Logical Operators
Beginner12 min read•Updated: Jul 11, 2026
Logical Operators & Short-Circuit Evaluation
Logical operators are used to combine multiple boolean conditions and make complex decisions in programs. In JavaScript, logical operators have a powerful feature called short-circuit evaluation that allows them to return actual values rather than just booleans.
1. The Three Core Logical Operators
| Operator | Name | Syntax | Description | ||||
|---|---|---|---|---|---|---|---|
&& | Logical AND | A && B | Returns true ONLY if both operands are truthy | ||||
| **` | `** | Logical OR | `A | B` | Returns true if at least one operand is truthy | ||
! | Logical NOT | !A | Inverts the boolean truthiness of operand |
2. Truth Tables
Logical AND (&&):
JavaScript
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
Logical OR (||):
JavaScript
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
Logical NOT (!):
JavaScript
console.log(!true); // false
console.log(!false); // true
// Double NOT (!!) - Converts ANY value to its strict boolean equivalent:
console.log(!!"Hello"); // true
console.log(!!0); // false
console.log(!!null); // false
3. Short-Circuit Evaluation: How JS Actually Evaluates
In JavaScript, && and || do not simply return true or false. They return the value of the actual operand that decided the outcome!
How Logical AND (&&) Short-Circuits:
- Evaluates from left to right.
- If it encounters a falsy value, it stops immediately and returns that falsy value!
- If all values are truthy, it returns the last value.
JavaScript
console.log("Apple" && "Banana"); // "Banana" (Both truthy, returns last)
console.log(null && "Banana"); // null (Short-circuits on null!)
console.log(0 && "Orange"); // 0 (Short-circuits on 0!)
Practical React & UI Guard Pattern:
JavaScript
// Only render user avatar if user is logged in
isLoggedIn && renderAvatar();
How Logical OR (||) Short-Circuits:
- Evaluates from left to right.
- If it encounters a truthy value, it stops immediately and returns that truthy value!
- If all values are falsy, it returns the last value.
JavaScript
console.log("Default" || "Fallback"); // "Default" (First truthy)
console.log("" || "Anonymous"); // "Anonymous" (Empty string is falsy)
console.log(null || undefined || "Guest"); // "Guest"
Practical Default Fallback Pattern:
JavaScript
const displayName = inputName || "Guest User";
4. The Modern Nullish Coalescing Operator (??) (ES2020)
Notice a flaw with ||: what if a valid value is 0 or empty string ""?
JavaScript
let score = 0; // Valid game score!
let finalScore = score || 10;
console.log(finalScore); // 10! (Bug! 0 was treated as falsy!)
The Fix: Nullish Coalescing (??)
?? checks strictly for null or undefined, treating 0 and "" as valid truthy values!
JavaScript
let score = 0;
let finalScore = score ?? 10;
console.log(finalScore); // 0! (Preserves 0 perfectly!)
Interactive Quiz
Practice Quiz
Question 1
What does the expression
true && false evaluate to?Question 2
What is the output of
"Hello" && "World" in JavaScript?Question 3
What is the output of
"" || "Default Name"?Question 4
How does the Nullish Coalescing operator (
??) differ from the Logical OR operator (||)?Question 5
What does the double exclamation mark (
!!) do when prefixed before a variable (e.g. !!user)?Next Lesson
Assignment & Ternary Operator
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Comparison Operators | Assignment & Ternary Operator |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.