Start learning free

LESSON 80 OF 410 · CONDITIONAL STATEMENTS

Logical Operators: And (&&)

Lesson Read the full explanation

Sometimes you will need to test more than one thing at a time. The logical and operator (&&) returns true if and only if both conditions to the left and right of it are true. For example:

10 == 10 && 7 < 10 // Evaluates to true

We have two conditions separated by && operator:

  • 10 == 10, which evaluates to true
  • 7 < 10, which evaluates to true
As both conditions evaluate to true, the entire line will evaluate to true

An example inside an if statement:

let x = 10;
if(x != 7 && 12 < x) { // Evaluates to false
    console.log("This is true!");
}

Inside the if, we have two conditions separated by && operator:

  • x != 7, equivalent to 10 != 7, which evaluates to true
  • 12 < x, equivalent to 12 < 10, which evaluates to false
As one of the conditions evaluates to false, the entire statement will evaluate to false, and so the program prints nothing.

Assignment
Follow the Coding Tutorial and play with the and operator.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 2
    Ctrl + Enter to check

    JAVASCRIPT · CONDITIONAL STATEMENTS

    And Operator in JavaScript, explained

    JavaScript && Operator: Requiring Multiple Conditions to Be True

    Real decisions rarely depend on a single condition. A user can access premium content only if they're logged in and have an active subscription. A form submits only if all required fields are filled and the email is valid and the password meets the requirements. The && operator is how you express that logic in code — and understanding exactly how it evaluates (including its short-circuit behavior) makes you a far more effective JavaScript developer.

    The Truth Table

    A && B is true only when both A and B are true:

    true  && true   // true
true  && false  // false
false && true   // false
false && false  // false

    Real-World Examples

    // Access control — must meet ALL criteria:
const isLoggedIn = true;
const hasPremium = true;
const isAdult = false;

if (isLoggedIn && hasPremium) {
    console.log("Welcome, premium member!");   // prints
}

if (isLoggedIn && hasPremium && isAdult) {
    console.log("Access granted");   // does NOT print — isAdult is false
}

// Range check — price must be within budget AND above zero:
const price = 49;
if (price > 0 && price <= 50) {
    console.log("Affordable!");   // prints
}

    Short-Circuit Evaluation: && Stops at the First False

    JavaScript evaluates && left to right and stops the moment it hits a false condition — it never evaluates the rest. This is called short-circuit evaluation and it's a feature, not a quirk:

    // Safe division — won't divide by zero because of short-circuit:
const divisor = 0;
if (divisor !== 0 && (100 / divisor) > 5) {
    console.log("Large quotient");
}
// divisor !== 0 is false → stops here, never runs (100 / 0)

// Useful pattern — only call a function if the object exists:
const user = null;
if (user && user.isAdmin) {
    console.log("Admin access");
}
// user is null (falsy) → stops, never throws "Cannot read property of null"

    Common Mistake: Confusing && with ||

    const age = 20;
const hasTicket = false;

// WRONG logic — using && when || was intended:
if (age >= 18 && hasTicket) {
    console.log("Can enter");   // does NOT print — hasTicket is false
}

// If EITHER condition is enough, use ||:
if (age >= 18 || hasTicket) {
    console.log("Can enter");   // prints — age >= 18 is true
}

    Rule of thumb: && = "all must be true". || = "at least one must be true".

    Combining && with || and !

    const isLoggedIn2 = true;
const isAdmin = false;
const isModerator = true;

// Can manage content if admin OR moderator (AND must be logged in):
if (isLoggedIn2 && (isAdmin || isModerator)) {
    console.log("Content management access granted");   // prints
}

// NOT banned AND old enough:
const isBanned = false;
const userAge = 21;
if (!isBanned && userAge >= 18) {
    console.log("Welcome!");   // prints
}

    Key Takeaways

    • && returns true only when all conditions are true — one false makes the whole expression false.
    • Short-circuit: JavaScript stops evaluating as soon as it hits a false — conditions to the right are skipped.
    • Use parentheses when mixing && and || to make precedence explicit and avoid bugs.
    • The short-circuit behavior is intentionally used to guard against null/undefined access.

    What to Learn Next

    With && clear, explore the || (OR) operator and the ! (NOT) operator to complete your logical operator toolkit. Then learn about truthy and falsy values in JavaScript — because && and || don't just work with booleans, they work with any value, and that behavior powers common patterns like default values (const name = input || "Anonymous") and conditional rendering in React.

    Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free