Suggest an edit

Improve this article

Refine the answer for “The && operator”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`&&` is the logical AND operator: it returns the first falsy operand, and when every operand is truthy it returns the last one.** It works not only as a logical comparison but also as a control-flow tool, thanks to short-circuit evaluation.

## Theory

### TL;DR
- `a && b` returns `a` when `a` is falsy, and returns `b` otherwise.
- It returns the operand's own value, not a coerced `true` or `false`.
- When the left operand is falsy, the right one is never evaluated.
- That gives the idioms `condition && action()` and `{isAdmin && <AdminPanel />}` in JSX.
- In a chain `a && b && c` the result is the first falsy operand, or the last operand.

### Quick example
```javascript
console.log(1 && 2);       // 2   (both truthy, the second one is returned)
console.log(0 && 2);       // 0   (the first is falsy, we stop there)
console.log('hi' && 123);  // 123
console.log(null && 'ok'); // null
console.log(true && 'JS'); // "JS"
```

### How `&&` works step by step
1. JavaScript evaluates the first expression `a`.
2. If `a` is **falsy**, the operator immediately returns `a` and nothing else is evaluated.
3. If `a` is **truthy**, the operator evaluates and returns the second expression `b`.

With plain boolean values this matches ordinary logic, "true if both are true":

```javascript
true  && true   // true
true  && false  // false
false && true   // false
false && false  // false
```

### It returns a value, not `true` or `false`
JavaScript does not coerce the operands to a boolean in the result: it **returns one of the expressions themselves**. That is why `null && 'ok'` gives `null` rather than `false`.

To predict the result you need to know which values count as falsy:

| falsy values | truthy values |
| --- | --- |
| `false` | everything else |
| `0`, `-0`, `0n` | non-empty strings |
| `''` (empty string) | `[]`, `{}` |
| `null` | `true` |
| `undefined` | any objects |
| `NaN` | functions |

Note that an empty array `[]` and an empty object `{}` are truthy, even though they intuitively look "empty".

### Short-circuit evaluation
If the first value is falsy, the second one is **not evaluated at all**. This is not an optimisation but a guarantee of the specification that you can rely on:

```javascript
false && console.log('Will not run');
0 && console.log('Will not run');
null && console.log('Will not run');
```

Because of that, `&&` is used as **conditional execution**:

```javascript
isLoggedIn && showDashboard();
```

The `showDashboard()` call happens only when `isLoggedIn` is truthy.

Compared with `if`, it is simply a shorter way to write the same thing:

```javascript
if (user) {
  console.log(user.name);
}

// the same in one line
user && console.log(user.name);
```

In JSX, short-circuiting is enough for conditional rendering, because JSX only allows expressions, not statements:

```jsx
{isAdmin && <AdminPanel />}
```

The `<AdminPanel />` component renders only when `isAdmin` is truthy.

### Safe property access
Before optional chaining (`?.`) existed, `&&` was the standard way to avoid throwing on `null`:

```javascript
const user = { name: 'Alice' };

console.log(user && user.name); // "Alice"

const guest = null;
console.log(guest && guest.name); // null, no error
```

Today `?.` reads better for that specific job, but `&&` is still useful when the check is more than "does this property exist":

```javascript
console.log(guest?.name);            // undefined
console.log(items.length && items[0]); // 0 or the first element
```

### Summary table

| Expression | Result | Explanation |
| --- | --- | --- |
| `true && "JS"` | `"JS"` | both truthy, the second is returned |
| `false && "JS"` | `false` | the first is falsy |
| `null && 5` | `null` | the first is falsy |
| `"hi" && 0` | `0` | the second is falsy |
| `1 && 2 && 3` | `3` | all truthy, the last is returned |
| `0 && 2 && 3` | `0` | the first is falsy, evaluation stops |

In short, `&&` is used for one-line condition checks, short conditional function calls, safe property access and conditional rendering in JSX.

### Common mistakes
- **Expecting a boolean result.** `0 && 2` returns `0`, not `false`. When a real boolean is required, wrap the expression: `Boolean(a && b)` or `!!(a && b)`.
- **Rendering `0` in JSX.** `{items.length && <List />}` prints `0` on the page for an empty array, because that is a valid ReactNode. Write `{items.length > 0 && <List />}` instead.
- **Confusing `&&` with `&`.** A single ampersand is bitwise AND over 32-bit integers: `5 & 3` gives `1`, not `3`.
- **Relying on `&&` where the value may legitimately be `0` or `''`.** For default values prefer `??`, because `||` and `&&` react to every falsy value.
- **Counting on a side effect in the right operand.** When the left operand is falsy the right one never runs, so logging or an increment placed there simply will not happen.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts841 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.