Logical Operators

In the previous lesson, we learned how to compare values. Now let’s learn how to combine conditions using logical operators.

🔗 What are Logical Operators?

Logical operators let you combine or reverse conditions. There are three:

🤝 The AND Operator (&&)

&& returns true only when both sides are true. Think of a login that needs a username and a password.

const hasUsername = true;
const hasPassword = true;

console.log(hasUsername && hasPassword); // true
console.log(hasUsername && false); // false

Let’s walk through what each line does.

• We set hasUsername and hasPassword to true, so both sides of the check are satisfied.
• hasUsername && hasPassword is true because both values are true.
• hasUsername && false is false because one side is false, and && needs both sides true.

🙌 The OR Operator (||)

|| returns true when at least one side is true. Think of access that is allowed for an admin or the owner.

const isAdmin = false;
const isOwner = true;

console.log(isAdmin || isOwner); // true
console.log(false || false); // false

Let’s go through it line by line.

• We set isAdmin to false and isOwner to true, so only one side is true.
• isAdmin || isOwner is true because || only needs one true side, and isOwner is true.
• false || false is false because neither side is true.

🚫 The NOT Operator (!)

! reverses a boolean value. It turns true into false and false into true.

const isLoggedIn = false;

console.log(!isLoggedIn); // true

Here isLoggedIn is false, and !isLoggedIn flips it to true.

✅ Truthy and Falsy Values

Logical operators work with any value, not just true and false. JavaScript treats some values as “falsy” and everything else as “truthy”.

The falsy values are: false, 0, "" (empty string), null, undefined, and NaN. Everything else is truthy.

if ("hello") {
  console.log("This runs because a non-empty string is truthy");
}

if (0) {
  console.log("This does NOT run because 0 is falsy");
}

Let’s see how each if is decided.

• The first if checks "hello", a non-empty string, which is truthy, so the message inside runs.
• The second if checks 0, which is falsy, so its message is skipped.

⚡ Short-Circuit Evaluation

JavaScript stops checking as soon as it knows the answer. This is called short-circuiting.

• With &&, if the first value is falsy, it stops and returns that value
• With ||, if the first value is truthy, it stops and returns that value

// || is often used to provide a default value
const name = "" || "Guest";
console.log(name); // "Guest" because "" is falsy

Let’s trace the assignment.

• "" || "Guest" checks the left side first, but "" is falsy, so || moves on.
• Since the left side failed, || returns the right side, "Guest", and stores it in name.
• console.log(name) then prints "Guest".

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ && is true only when both sides are true
• ✅ || is true when at least one side is true
• ✅ ! reverses a boolean value
• ✅ Falsy values are false, 0, "", null, undefined, and NaN
• ✅ Short-circuiting lets || provide default values

🚀 What’s Next?

The || default trick has a safer alternative for null and undefined. Let’s continue to Nullish Coalescing.