In this article10
Real decisions rarely depend on one thing. "Enable the Sign up button if the name is filled in and the terms are ticked." "Show free shipping if the order is over 50 € or the customer is a member." The three logical operators &&, || and ! are how you write that. You've used them a little already. By the end of this lesson you'll know exactly how each one works, how to combine several without surprises, and two shortcuts frontend developers use every day.
The three operators
| Operator | Name | Gives true when… |
|---|---|---|
a && b | AND | both a and b are true |
a || b | OR | at least one of them is true |
!a | NOT | a is false (it flips the value) |
&& (AND): everything must be true
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // falseOnly one result is true: when both sides are true. Think of a door with two locks: you need both keys.
const hasTicket = true;
const hasPassport = false;
if (hasTicket && hasPassport) {
console.log("You can board the plane");
} else {
console.log("Sorry, you can't board");
}|| (OR): one is enough
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // falseOnly one result is false: when both sides are false. Think of a house with two doors: one open door is enough to get in.
const total = 35;
const isMember = true;
if (total >= 50 || isMember) {
console.log("Free shipping!");
} else {
console.log("Shipping: 5 €");
}! (NOT): flip it
! turns true into false and false into true. It's great for checking that something is not the case:
const isLoggedIn = false;
if (!isLoggedIn) {
console.log("Please sign in");
}
console.log(!true); // false
console.log(!false); // trueMore than two conditions
You can chain as many as you need. With only &&, all must be true. With only ||, one is enough:
const name = "Sara";
const age = 16;
const acceptedTerms = true;
const canSignUp = name !== "" && age >= 13 && acceptedTerms;
console.log("Can sign up:", canSignUp); // trueWhen you mix && and ||, use brackets, like in maths. They make the order clear for JavaScript and for anyone reading your code:
const isWeekend = true;
const isHoliday = false;
const isSunny = true;
// A day out: on a day off, and only if it's sunny
const dayOut = (isWeekend || isHoliday) && isSunny;
console.log("Day out:", dayOut); // trueQuick check
isAdmin is false, isOwner is true, isBlocked is true. What is (isAdmin || isOwner) && !isBlocked?
Why
(isAdmin || isOwner) is true, because the user is the owner. But !isBlocked is false, because the user is blocked. true && false is false.
A sign-up form
Here's how this looks on a real page. The button only works when all the rules are met. Press Run, then type a name and tick the box:
<!DOCTYPE html>
<html lang="en">
<body style="padding: 16px; font-family: sans-serif">
<input id="name" placeholder="Your name" />
<label>
<input id="terms" type="checkbox" /> I accept the terms
</label>
<p><button id="signup" disabled>Sign up</button></p>
<script>
const nameBox = document.getElementById("name");
const terms = document.getElementById("terms");
const button = document.getElementById("signup");
function update() {
const hasName = nameBox.value.trim() !== "";
const canSignUp = hasName && terms.checked;
button.disabled = !canSignUp;
console.log("name:", hasName, "terms:", terms.checked);
}
nameBox.addEventListener("input", update);
terms.addEventListener("change", update);
</script>
</body>
</html>button.disabled = !canSignUp uses ! to flip the answer: when you can sign up, the button is not disabled.
Shortcut 1: || for a default value
|| doesn't only work with true and false. It gives back the first truthy value it finds. Developers use that to fill in a value when one is missing:
const typedName = "";
const name = typedName || "Guest";
console.log("Hello, " + name); // Hello, Guest
const typedName2 = "Omar";
const name2 = typedName2 || "Guest";
console.log("Hello, " + name2); // Hello, OmarRead it as: use typedName, or if it's empty, use "Guest".
Shortcut 2: JavaScript stops early
&& and || stop as soon as they know the answer:
false && …: the answer is alreadyfalse, so the right side is never checked.true || …: the answer is alreadytrue, so the right side is never checked.
This lets you check that something exists before you use it:
const user = null; // nobody is signed in
if (user && user.name === "Sara") {
console.log("Hi Sara");
} else {
console.log("No user, or not Sara");
}Without user &&, the code would try to read .name of null and crash. With it, JavaScript sees null (falsy), stops, and never touches user.name.
Common mistakes
Exercise
Show the answer
function canWatch(age, withParent) {
return age >= 15 || (age >= 11 && withParent);
}
console.log(canWatch(16, false)); // true
console.log(canWatch(12, true)); // true
console.log(canWatch(12, false)); // false
console.log(canWatch(9, true)); // falseThe brackets group the second rule: "11 or older and with a parent". Then || says either rule is enough. You don't need an if: the whole expression already is true or false, so you can return it directly.