JavaScript Logical Operators

A comparison checks one thing: is the score over 60? Real decisions usually depend on several things at once: is the player over 13 and has a parent approved? Is the user an admin or a moderator? Logical operators combine comparisons like these into one true/false answer.

// The Logical Operators

Given let x = 6; and let y = 3;:

// AND: &&

&& gives true only if both sides are true. If either side is false, the whole thing is false:

const age   = 21;
const hasId = true;

if (age >= 18 && hasId) {
  console.log("Entry allowed");
}

A very common use is checking that a number is inside a range:

let age = 15;
console.log(age >= 13 && age <= 19);    // is it a teen?

// OR: ||

|| gives true if at least one side is true. It is only false when both sides are false:

let x = 6;
let y = -3;
console.log(x > 0 || y > 0);    // is either one positive?

const isAdmin = false;
const isMod   = true;
if (isAdmin || isMod) {
  console.log("Can moderate");
}

// NOT: !

! flips a value: true becomes false and false becomes true. It takes only one operand, placed right after it:

console.log(!true);
console.log(!(5 === 8));    // 5 === 8 is false, so this is true
console.log(!0);              // 0 is falsy, so ! gives true
console.log(!"hello");        // truthy, so ! gives false

let isLoading = false;
if (!isLoading) {
  console.log("Content ready");
}

! is also the quick way to toggle a boolean, like a mute button: isMuted = !isMuted; flips it every time it runs.

// Combining Operators

You can mix logical operators, but know their order: ! first, then &&, then ||. Just like * before +, && is done before ||:

console.log(true || false && false);     // same as true || (false && false)
console.log((true || false) && false);   // parentheses change the answer

Rather than relying on the order, use parentheses to show exactly what you mean:

const score     = 88;
const attended  = true;
const submitted = false;

// Must have a good score AND (attended OR submitted)
if (score >= 80 && (attended || submitted)) {
  console.log("Passes criteria");
}

// Short-Circuit Evaluation

JavaScript stops working out a logical expression as soon as it knows the answer. This is called short-circuiting:

• With &&, if the left side is falsy, the answer must be false, so the right side is never even run
• With ||, if the left side is truthy, the answer must be true, so the right side is skipped

There is a second surprise hiding here. && and || do not always give back true or false. They give back whichever operand decided the answer:

console.log("" || "Guest");     // "" is falsy, so || moves on and returns "Guest"
console.log("Ana" || "Guest");  // "Ana" is truthy, so || returns "Ana"
console.log(0 && "hi");        // 0 is falsy, so && stops and returns 0
console.log("a" && "b");       // "a" is truthy, so && returns the right side

Inside an if this makes no difference, since the result is treated as truthy or falsy anyway. But it makes || a handy way to supply a default value:

let inputName = "";                        // user left the box blank
let display   = inputName || "Anonymous";
console.log(display);

// Nullish Coalescing: ??

The ?? operator (ES2020) returns the right side only when the left side is nullish: null or undefined. Otherwise it returns the left side:

let name = null;
let text = "missing";
console.log(name ?? text);

Why have ?? when || can already supply defaults? Because || treats every falsy value as missing, including 0, "", and false, which are often perfectly good values:

let volume = 0;                      // the user muted it on purpose
console.log(volume || 50);            // 0 is falsy: replaced!
console.log(volume ?? 50);            // 0 is not null/undefined: kept

let timeout = null;                  // never set
console.log(timeout ?? 3000);

// Quick Check

let score = 0;
console.log(score || "no score");
console.log(score ?? "no score");

// Try It

▶ Open Playground

1. Click Open Playground. Write a condition with && that checks n is between 1 and 10. Test with 0, 5, and 11
2. Add let age = 50; console.log(13 <= age <= 19); and explain the wrong answer
3. Toggle a boolean three times with on = !on; and log it each time
4. Compare 0 || "default" with 0 ?? "default", then null || "default" with null ?? "default"