Logical Operators

Table of Contents

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:

Operator Name Result is true when
&& AND Both conditions are true
|| OR At least one condition is true
! NOT It reverses true to false and false to true

The AND Operator (&&)

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

logical-operators.js
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.

logical-operators.js
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.

logical-operators.js
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.

logical-operators.js
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
logical-operators.js
// || 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".

A common pattern

value || defaultValue is a quick way to fall back to a default when the value is missing. In the next lesson we will see a safer version of this with the nullish coalescing operator.

Common Mistakes to Avoid

Mistake Problem Solution
Confusing && and || The wrong condition passes or fails && needs all true; || needs at least one true
Forgetting 0 and "" are falsy Valid values get treated as “missing” Be careful when a real value can be 0 or empty
Writing ! in the wrong place The condition is reversed by accident Use parentheses to make the intent clear

Try It Yourself!

  1. Create two boolean variables and print the result of && and || on them.
  2. Use ! to reverse a boolean and print it.
  3. Test which values are truthy by putting them inside an if.
  4. Use || to set a default value when a variable is an empty string.

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.

Previous Comparison Operators Next Nullish Coalescing