Logical operators

Three operators, one idea

Logical operators help JavaScript answer questions like “do we have both requirements?”, “do we have at least one usable value?”, and “is this not true?” The three operators are && (and), || (or), and ! (not).

They build on truthy and falsy values from Booleans & truthiness. A value like "Ada", 10, or [] is truthy. The eight falsy values are false, 0, -0, 0n, "", null, undefined, and NaN.

This lesson goes deeper than a boolean truth table. You will step through skipped function calls, experiment with the exact returned value, use guards and defaults, and see why the next lesson’s ?? fixes the classic 0 || 10 bug.

With plain booleans, the operators are easy to read. a && b means both must be truthy. a || b means at least one must be truthy. !a flips truthiness and always gives the boolean true or false.

But JavaScript usually meets values that are not already booleans. It asks “truthy or falsy?” for the decision, then keeps the actual value around. That is why "cat" && 10 returns 10, not true.

Short-circuiting means JavaScript stops as soon as the result is known. The right side might not run at all. This matters when the right side is a function call, a property read, or anything with a side effect.

1function checkBadge() {2  console.log("badge checked");3  return "";4}5function checkPin() {6  console.log("PIN checked");7  return "pin-ok";8}Run9const result = checkBadge() && checkPin();10console.log(result);

Watch the skipped function: no log, no return value, no frame. That is real JavaScript control flow, not just a display trick. This is why isLoggedIn && showDashboard() calls the function only when the guard is truthy.

This is the rule that surprises beginners and helps professionals write compact code: && and || return the value that decided the expression. They do not hand you a yes/no card unless one operand was already a boolean.

• a && b returns a if a is falsy; otherwise it returns b.
• a || b returns a if a is truthy; otherwise it returns b.
• !a always returns a boolean. !!a is a common way to convert truthiness to exactly true or false.

1const left = "cat";2const right = 10;3console.log(left && right);4console.log(Boolean(left && right));5console.log(!left);6console.log(!!left);

Precedence decides which operator groups first when there are no parentheses. For logical operators, remember this order: ! binds tightest, then &&, then ||. So true || false && false is true || (false && false), which is true.

1console.log(!false && false);Run2console.log(true || false && false);3console.log((true || false) && false);4console.log(!(true && false) === (!true || !false));

Parentheses are often better than relying on memory. They make your intent visible to the next person reading the code, including future you.

1console.log(!false && false);2console.log(true || false && false);3console.log((true || false) && false);4console.log(!(true && false) === (!true || !false));

De Morgan’s laws help you move ! inward: !(a && b) has the same boolean meaning as !a || !b. In words, “not both requirements passed” means “the badge failed or the PIN failed.”

Short-circuiting creates two beginner-friendly patterns. A guard only continues when the left side is safe: user && user.name avoids reading name from null. A default chooses a backup: name || "Guest" uses Guest when name is falsy.

1const user = { name: "Ada" };2const missingUser = null;3console.log(user && user.name);4console.log(missingUser && missingUser.name);5console.log("" || "Guest");6console.log(0 || 10);

The default pattern is useful, but it treats every falsy value as missing. That is sometimes wrong: 0 || 10 returns 10, even when 0 is a real count. The next lesson, Nullish coalescing & optional chaining, teaches ?? for “only default when the value is null or undefined,” and ?. for replacing long guard chains.

1const user = { name: "Ada" };2const missingUser = null;3console.log(user && user.name);4console.log(missingUser && missingUser.name);5console.log("" || "Guest");6console.log(0 || 10);

Where you’ll use this

Logical operators appear anywhere code needs a small decision inside an expression. You will see them in setup checks, display defaults, conditional calls, and validation.

• isLoggedIn && showDashboard() — call a function only when a condition is truthy.
• const label = nickname || "Guest"; — display a fallback when the primary value is empty.
• const city = user && user.address && user.address.city; — older guard chains; next lesson replaces this with user?.address?.city.
• if (isAdmin && hasToken) { ... } — when a statement reads clearer than a clever expression.

Common misconceptions

• “Logical operators always return booleans.” Only ! does. && and || return operands.
• “The right side always runs.” Short-circuiting may skip it completely.
• “Falsy means useless.” 0 and "" can be valid data. Be careful with || defaults.
• “!!x is the same as x.” It has the same truthiness, but the value becomes exactly true or false.
• “Precedence is obvious.” It is easy to misread mixed && and ||. Parentheses are cheap.

Key takeaways

• && needs both sides to be truthy; it stops on the first falsy operand.
• || needs one truthy side; it stops on the first truthy operand.
• ! flips truthiness and always returns a boolean.
• && and || return operands, not converted booleans.
• Use guards and defaults carefully; 0 and "" are falsy but often meaningful.

Logical operators combine truthy/falsy decisions with left-to-right short-circuiting, returning the operand that decides the expression.

Up next: Nullish coalescing & optional chaining.