Logical Operators in JavaScript – Complete Guide with Real Examples

Learn how &&, ||, and ! work in JavaScript. Understand truthy/falsy, real-world usage, short-circuiting, and more with easy examples.

---

📘 Introduction
Logical operators in JavaScript are essential for writing conditions and controlling program logic. They’re used in almost every JavaScript project—from form validation to access control.

In this complete guide, you’ll learn:

• How &&, ||, and ! work in JavaScript
• Truthy and falsy values
• Real-world and interview-level examples
• Common mistakes to avoid

---

🔹 What Are Logical Operators?
JavaScript has three main logical operators:

| Operator | Name        | Description                              |            |                                     |
| -------- | ----------- | ---------------------------------------- | ---------- | ----------------------------------- |
| `&&`     | Logical AND | Returns true if **both** values are true |            |                                     |
| \`       |             | \`                                       | Logical OR | Returns true if **any one** is true |
| `!`      | Logical NOT | Reverses the truth value (negates it)    |            |                                     |

---

✅ 1. Logical AND (&&)

const age = 25;
const isCitizen = true;

if (age > 18 && isCitizen) {
  console.log("You can vote!");
}

💡 If the first condition is false, JavaScript skips the second—this is called short-circuiting

---

✅ 2. Logical OR (||)

const hasLicense = false;
const hasPermit = true;

if (hasLicense || hasPermit) {
  console.log("You can drive!");
}

💡 If the first condition is true, the second is ignored.

---

✅ 3. Logical NOT (!)

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in!");
}

The ! operator flips the value. !true becomes false, and !false becomes true.

---

🔍 Truthy vs Falsy Values in JavaScript
In JavaScript, non-boolean values can be treated as true or false.
Falsy values:

• false
• 0
• ""
• null
• undefined
• NaN

Truthy values:

• Any non-zero number
• Non-empty string
• Objects/Arrays

const username = "";

if (!username) {
  console.log("Username is required!");
}

---

🔄 Real-World Examples
✅ 1. Using || for Defaults

const name = "" || "Guest";
console.log(name); // Guest

✅ 2. Conditional Rendering with &&

const user = { isAdmin: true };

user && user.isAdmin && console.log("Welcome Admin!");

---

⚠️ Gotchas to Know

console.log(0 || "fallback"); // "fallback"
console.log(0 && "fallback"); // 0

console.log(!!"hello"); // true
console.log(!!0); // false

Use !! to explicitly convert to boolean.

---

✅ Ternary with Logical Check

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(15, true)); // false

---

❓ FAQs
Q: Can logical operators work on non-booleans?
Yes! JavaScript uses type coercion to convert them into truthy or falsy.

Q: Why use || for default values?
Because if the first value is falsy, it returns the fallback.

---

📖 Original Blog:
👉 Read more Logical Operators in JavaScript

Comments

[Alex Mustiere]

You forget to talk about the ?? (nullish coalescing operator).
It works nearly as the || operator but doesn't consider all "falsy" values, only null and undefined.

console.log(0 || "fallback"); // "fallback"
console.log(0 ?? "fallback"); // 0
console.log(null ?? "fallback"); // "fallback"