✅ Logical Operators in JavaScript – Complete Guide with Real Examples
📌 Introduction
Logical operators help you combine conditions, control flow, and make decisions in JavaScript. In this guide, you’ll learn how to use &&, ||, and ! effectively with examples and real-world use cases.
🔍 What Are Logical Operators?
Logical operators return a boolean value (true or false) and are used to evaluate expressions, especially within conditions like if statements.
| Operator | Name | Example | Description |
|---|---|---|---|
&& |
Logical AND | a && b |
Returns true if both conditions are true |
|| |
Logical OR | a || b |
Returns true if either condition is true |
! |
Logical NOT | !a |
Reverses the boolean value |
✅ 1. Logical AND (&&)
const age = 25;
const isCitizen = true;
if (age > 18 && isCitizen) {
console.log("You can vote!");
}
Short-circuiting: If the first condition is false, the second one isn’t evaluated.
✅ 2. Logical OR (||)
const hasLicense = false;
const hasPermit = true;
if (hasLicense || hasPermit) {
console.log("You can drive!");
}
Short-circuiting: If the first condition is true, the second one is skipped.
✅ 3. Logical NOT (!)
const isLoggedIn = false;
if (!isLoggedIn) {
console.log("Please log in!");
}
⚙️ Truthy and Falsy Values
JavaScript uses truthy and falsy values when evaluating expressions.
Falsy values:
false0""(empty string)nullundefinedNaN
Truthy values:
- Non-zero numbers
- Non-empty strings
- Arrays & Objects
const username = "";
if (!username) {
console.log("Username is required!");
}
🧠 Real-World Examples
1. Default Values with OR:
const input = "";
const name = input || "Guest";
console.log(name); // Guest
2. Guard Clause with AND:
const user = { isAdmin: true };
user && user.isAdmin && console.log("Welcome, Admin!");
❗ Gotchas
console.log(0 || "fallback"); // "fallback"
console.log(0 && "fallback"); // 0
console.log(!!"hello"); // true
console.log(!!0); // false
🔄 Combining Multiple Operators
const score = 85;
const isPassed = score >= 50;
const isExcellent = score > 80;
if (isPassed && isExcellent) {
console.log("You passed with excellence!");
}
🔍 Ternary with Logical Operators
const isLoggedIn = true;
const message = isLoggedIn ? "Welcome back!" : "Please log in.";
console.log(message);
🧩 Practice Challenge
function canAccess(age, isLoggedIn) {
return age >= 18 && isLoggedIn;
}
console.log(canAccess(20, true)); // true
console.log(canAccess(16, false)); // false
❓ FAQs
Can logical operators work with non-boolean values?
Yes! JavaScript converts values using truthy/falsy rules.
Why use || for default values?
It provides a fallback when the first value is falsy.
📌 Summary
- &&: Both conditions must be true
- ||: At least one condition must be true
- !: Reverses a boolean value
🔗 Related Posts
📚 Final Thoughts
Logical operators are foundational tools that power conditional logic and control flow in every JavaScript project. Understanding how they work helps you write smarter, cleaner, and more bug-free code.
Comments
Post a Comment