References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript Logical And && operator

Operator JavaScript All modern browsers Updated
Quick answer

The logical AND operator && returns the first falsy value it finds, or the last value if all are truthy. With booleans it's plain "both must be true." It short-circuits — if the left side is falsy, the right side never runs — which is used to guard expressions like user && user.name.

Overview

In a condition, && behaves the obvious way — a && b is true only when both are truthy. But there's more going on under the hood, and it's genuinely useful: && doesn't return a boolean, it returns one of its operands. It evaluates left to right and returns the first falsy value it hits; if none are falsy, it returns the last value.

The key behavior is short-circuiting. If the left side is falsy, the result is already decided, so the right side is never evaluated. That powers the common guard pattern: user && user.name safely reads name only when user exists — though for property access the modern optional chaining (user?.name) is often clearer. Short-circuiting is also used to run a function conditionally: isReady && doThing() calls doThing() only when isReady is truthy.

It pairs with logical OR || (which returns the first truthy value) and ! (NOT). One precedence note: && binds tighter than ||, and you can't mix either with ?? without parentheses. In JSX you'll see cond && <Component /> constantly to render something only when a condition holds.

Syntax

a && b

true && "yes"     // "yes" (both truthy -> last value)
false && "yes"    // false  (first falsy -> stops)
0 && expensive()  // 0      (right side never runs)

user && user.name // guard (or use user?.name)

Example

Live example 
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const user = { name: 'Ada', admin: true };

  const label = user && user.admin && 'Administrator';
  const missing = user.role && user.role.toUpperCase();

  document.getElementById('out').textContent =
    'label:   ' + label + '\n' +
    'missing: ' + missing; // label: Administrator / missing: undefined
</script>

Best practices

  • Remember && returns an operand, not a boolean — the first falsy one, or the last value.
  • Use short-circuiting to run code conditionally: ready && run().
  • For safe property access, prefer optional chaining obj?.prop over obj && obj.prop.
  • Add parentheses when mixing && with ?? — the language requires it.

Frequently asked questions

What does && return in JavaScript?
The first falsy operand, or the last operand if they're all truthy. It returns a value, not necessarily a boolean.
What is short-circuit evaluation?
With &&, if the left side is falsy the right side is never evaluated, because the result is already known. || short-circuits on the first truthy value.
What is the difference between && and ||?
&& returns the first falsy value (or the last); || returns the first truthy value (or the last).
How do I run a function only if a condition is true?
Use short-circuiting: condition && doSomething() calls the function only when the condition is truthy.
<= !