Logical operators

Three operators, one idea

Code often needs to ask small yes-or-no questions. For example: "Do we have both things we need?" "Do we have at least one value we can use?" "Is this not true?" JavaScript has three logical operators for these questions:

• && means "and".
• || means "or".
• ! means "not".

They use truthy and falsy values from Booleans & truthiness. A truthy value counts as "yes" in a check. A falsy value counts as "no". There are exactly eight falsy values:

• false, 0, -0, and 0n
• "", the empty string
• null, undefined, and NaN

Every other value is truthy. So "Ada", 10, and even an empty list [] are truthy.

The values on each side of an operator are called its operands. In a && b, this lesson calls a the left value and b the right value.

In this lesson you will:

• step through code where a function call is skipped,
• try different values and see exactly what comes back,
• use two common patterns, called guards and defaults,
• see why 0 || 10 gives 10, and how the next lesson's ?? fixes it.

Start with plain true and false. Then the three operators are easy to read:

• a && b is true only when both are true.
• a || b is true when at least one is true.
• !a flips the value: true becomes false, and false becomes true.

The table below shows the same rules with examples. Read each row as: "this code gives true when …".

Real code often uses values that are not true or false, like names and numbers. Then JavaScript does two things:

1. It checks whether the value is truthy or falsy, to decide what to do.
2. It gives back the value itself, not true or false.

That is why "cat" && 10 gives 10, not true.

Boolean(value) is a different tool. It turns any value into true or false. The next table compares it with the operators. Read each row from left to right: the code, what JavaScript checks, and what you get back.

1const hasTicket = true;2const hasId = false;3 4console.log(hasTicket && hasId);5console.log(hasTicket || hasId);6console.log(!hasId);

Line 1 says the visitor has a ticket. Line 2 says they have no ID. Then:

• Line 4 prints false. && needs both checks to pass, and the ID check fails.
• Line 5 prints true. || needs only one check to pass, and the ticket check passes.
• Line 6 prints true. ! flips hasId, which is false.

Give true-or-false variables names that sound like a question, such as hasTicket and isSignedIn. Then you can read hasTicket && hasId out loud: "has a ticket and has an ID". Clear names make a check much easier to get right.

1console.log("Asha" && "ready");2console.log(0 && "ready");3console.log("Asha" || "Guest");4console.log("" || "Guest");5console.log(!"tea");6console.log(!!"tea");

Line by line:

1. "Asha" is truthy, so && gives back the right value. It prints ready.
2. 0 is falsy, so && stops and gives back 0.
3. "Asha" is truthy, so || stops and gives back "Asha".
4. "" is falsy, so || moves on and gives back "Guest".
5. "tea" is truthy, and ! flips it, so this prints false.
6. !! flips twice, so it prints true. Two flips turn any value into true or false.

Notice the pattern. && and || work the opposite way round. && stops at a falsy value. || stops at a truthy value.

1console.log(Boolean([]));2console.log([] && "tea");3console.log([] || "Guest");4console.log("0" && 3);5console.log(NaN || 5);

Line by line:

1. An empty list, [], is still truthy. So Boolean([]) prints true.
2. Because [] is truthy, && moves on and prints tea.
3. Because [] is truthy, || stops and gives back the list itself, not "Guest".
4. The string "0" has one character in it, so it is truthy. && moves on and prints 3.
5. NaN is falsy, so || moves on and prints 5.

Short-circuit means JavaScript stops as soon as it knows the answer. Then the right value is never worked out at all.

• For &&, a falsy left value already means "no". JavaScript stops.
• For ||, a truthy left value already means "yes". JavaScript stops.

This matters when the right side does something, like call a function, read a property, or print a message. If JavaScript stops early, that never happens.

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);

Look at the function that was skipped. It printed nothing, gave back nothing, and has no step in the replay. JavaScript really didn't run it. That's why isLoggedIn && showDashboard() calls showDashboard() only when isLoggedIn is truthy.

1let savedTimes = 0;2function saveCart() {3  savedTimes += 1;4  console.log("cart saved");5}6 7false && saveCart();8true && saveCart();9console.log(savedTimes);

Lines 1 to 5 set up a counter, savedTimes, and a saveCart() function. Each call adds 1 to the counter (+= 1 means "add 1"). Then:

• Line 7 does not call saveCart(), because the left value is false.
• Line 8 does call it, because the left value is true.
• Line 9 prints 1. That shows only one save happened.

So never put a step that must always happen on the right side of && or ||. It may be skipped.

This rule surprises many beginners. && and || give back the value that decided the answer. They give back true or false only when that value already was true or false. Experienced developers use this rule to write short code. Here are the exact rules:

• a && b gives back a if a is falsy. Otherwise it gives back b.
• a || b gives back a if a is truthy. Otherwise it gives back b.
• !a always gives back true or false. !!a flips twice, so it is a common way to turn any value into exactly true or false.

In the playground below, pick a left value, an operator, and a right value. Line 3 of the code prints what you get back. Line 4 prints the same answer turned into true or false.

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

When one line mixes several operators and has no brackets, JavaScript needs a rule for which part to work out first. That rule is called precedence. For the logical operators, the order is:

1. ! goes first.
2. Then &&.
3. Then ||.

So JavaScript reads true || false && false as true || (false && false). That gives true.

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

Brackets are often better than remembering the order. They show the next reader exactly what you meant. That reader may be you, a few months from now.

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

Line by line:

1. ! goes first, so !false becomes true. Then true && false gives false.
2. && goes before ||, so this is true || (false && false). It gives true.
3. The brackets change the order. (true || false) is true, then true && false gives false.
4. Both sides of === give true, so the line prints true. The next paragraph explains why.

Line 4 checks a rule called De Morgan's law. It shows how to move a ! inside brackets: !(a && b) means the same as !a || !b. In words: "not both passed" means the same as "the first failed, or the second failed".

Stopping early gives you two useful patterns.

• A guard goes on only when the left value is safe to use. user && user.name reads name only when user exists. If user is null, it stops, so it never tries to read name from null. That read would throw an error.
• A default is a backup value. name || "Guest" gives "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);

Defaults with || have one catch. || treats every falsy value as missing. But sometimes 0 is a real value, like a count of 0 items. Then 0 || 10 wrongly gives 10.

The next lesson, Nullish coalescing & optional chaining, teaches two fixes:

• ?? uses the backup only when the value is null or undefined. So 0 ?? 10 keeps 0.
• ?. replaces long guard chains like user && user.address && user.address.city.

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

Lines 3 to 6, one at a time:

• Line 3 prints Ada. user is an object, so it is truthy and the guard goes on to read the name.
• Line 4 prints null. missingUser is null, so the guard stops before reading .name.
• Line 5 prints Guest. The empty string is falsy, so the backup is used.
• Line 6 prints 10. This is the catch: 0 is falsy, so it is replaced too.

Where you'll use this

You'll use logical operators whenever code needs a small decision inside one line. Here are common examples:

• isLoggedIn && showDashboard() calls a function only when a check is truthy.
• const label = nickname || "Guest"; shows a backup name when the nickname is empty.
• const city = user && user.address && user.address.city; is an older guard chain. The next lesson replaces it with user?.address?.city.
• if (isAdmin && hasToken) { ... } puts the check in an if statement, which is often easier to read.

1const name = " Asha ";2const acceptedTerms = true;3const hasName = Boolean(name.trim());4 5console.log(hasName && acceptedTerms);

Line 3 uses name.trim(), which removes spaces from both ends of the text. What is left is "Asha". Boolean() then turns it into true, because it is not empty. Line 5 prints true, because the name has letters and the terms were accepted.

This only checks that the form is ready to send. It does not check everything. An email address, a password, and the server's own rules each need their own checks.

1function showCheckout() {2  console.log("checkout shown");3  return "checkout";4}5 6const isSignedIn = true;7const hasItems = true;8const page = isSignedIn && hasItems && showCheckout();Run9console.log(page);

The checkout example uses two true-or-false variables, so its result is easy to predict. Lines 6 and 7 say the visitor is signed in and has items in their cart. Line 8 reaches showCheckout() only after both checks pass. Line 9 prints checkout. If either variable were false, the function would be skipped and the line would give back false.

1const isSignedIn = true;2const hasAddress = true;3const hasItems = false;4 5const canPlaceOrder = isSignedIn && hasAddress && hasItems;6console.log(canPlaceOrder);

Lines 1 to 3 hold three yes-or-no answers, and each name reads like a question. Line 5 reads out loud as "is signed in and has an address and has items". The last value, hasItems, is false. So the whole && line gives back false, and line 6 prints false.

On a real order page, you could use a check like this to turn the order button on or off. If you also need to tell the visitor what is missing, use an if statement.

1const nickname = "";2const cartCount = 0;3 4console.log(nickname || "Guest");5console.log(cartCount || 10);6console.log(cartCount ?? 10);

• Line 4 prints Guest, because the nickname is empty.
• Line 5 shows the catch. 0 is falsy, so cartCount || 10 prints 10.
• Line 6 uses ??. It keeps the real count, so it prints 0.

Use ??, from the next lesson, whenever 0 or an empty string is a real value you want to keep.

Common misconceptions

• "Logical operators always give true or false." Only ! does. && and || give back one of their two values.
• "The right side always runs." JavaScript may stop early and skip it completely.
• "A falsy value is useless." 0 and "" can be real data. Be careful with || defaults.
• "!!x is the same as x." Both are truthy or both are falsy. But !!x is always exactly true or false.
• "The order is obvious." Lines that mix && and || are easy to misread. Add brackets to make the order clear.

Key takeaways

• && needs both values to be truthy. It stops at the first falsy value.
• || needs one truthy value. It stops at the first truthy value.
• ! flips truthy and falsy, and always gives true or false.
• && and || give back one of their values, not true or false.
• Use guards and defaults with care. 0 and "" are falsy, but they are often real data.

Logical operators check truthy and falsy values from left to right, stop as soon as they know the answer, and give back the value that decided it.

Coming next: Nullish coalescing & optional chaining.