Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Оператор &&». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`&&`, це оператор логічного І, який повертає перший falsy операнд, а за умови, що всі операнди truthy, повертає останній із них.** Він працює не лише як логічне порівняння, а й як засіб керування виконанням коду завдяки короткому замиканню (short-circuit evaluation).

## Теорія

### TL;DR
- `a && b` повертає `a`, якщо `a` є falsy, інакше повертає `b`.
- Повертається саме значення операнда, а не приведене `true` чи `false`.
- Якщо лівий операнд falsy, правий не обчислюється взагалі.
- Це дає ідіоми `умова && дія()` та `{isAdmin && <AdminPanel />}` у JSX.
- У ланцюжку `a && b && c` результатом буде перший falsy або останній операнд.

### Швидкий приклад
```javascript
console.log(1 && 2);       // 2   (обидва truthy, повертається другий)
console.log(0 && 2);       // 0   (перший falsy, зупиняємось на ньому)
console.log('hi' && 123);  // 123
console.log(null && 'ok'); // null
console.log(true && 'JS'); // "JS"
```

### Як працює `&&` крок за кроком
1. JavaScript обчислює перший вираз `a`.
2. Якщо `a` є **falsy**, оператор одразу повертає `a`, і решта виразів не обчислюється.
3. Якщо `a` є **truthy**, оператор обчислює і повертає другий вираз `b`.

З чисто булевими значеннями це збігається зі звичайною логікою «істина, якщо обидва істинні»:

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

### Повертається значення, а не `true` чи `false`
JavaScript не приводить операнди до булевого типу в результаті: він **повертає один із самих виразів**. Саме тому `null && 'ok'` дає `null`, а не `false`.

Щоб передбачити результат, треба знати, які значення вважаються falsy:

| falsy значення | truthy значення |
| --- | --- |
| `false` | усе інше |
| `0`, `-0`, `0n` | непорожні рядки |
| `''` (порожній рядок) | `[]`, `{}` |
| `null` | `true` |
| `undefined` | будь-які об'єкти |
| `NaN` | функції |

Зверніть увагу: порожній масив `[]` і порожній об'єкт `{}` є truthy, хоча інтуїтивно часто здаються «порожніми».

### Коротке замикання (short-circuit)
Якщо перше значення falsy, друге навіть **не обчислюється**. Це не оптимізація, а гарантія специфікації, на яку можна спиратися:

```javascript
false && console.log('Не виконається');
0 && console.log('Не виконається');
null && console.log('Не виконається');
```

Завдяки цьому `&&` використовують як **умовне виконання**:

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

Виклик `showDashboard()` відбудеться лише тоді, коли `isLoggedIn` є truthy.

Порівняння з `if` показує, що це просто коротший запис того самого:

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

// те саме одним рядком
user && console.log(user.name);
```

У JSX короткого замикання достатньо для умовного рендеру, бо JSX дозволяє тільки вирази, а не інструкції:

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

Компонент `<AdminPanel />` відрендериться лише тоді, коли `isAdmin` є truthy.

### Безпечний доступ до властивостей
До появи optional chaining (`?.`) саме `&&` був стандартним способом не впасти з помилкою на `null`:

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

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

const guest = null;
console.log(guest && guest.name); // null, помилки немає
```

Сьогодні для цієї задачі читабельніший `?.`, але `&&` лишається корисним, коли перевірка складніша за наявність властивості:

```javascript
console.log(guest?.name);            // undefined
console.log(items.length && items[0]); // 0 або перший елемент
```

### Підсумкова таблиця

| Вираз | Результат | Пояснення |
| --- | --- | --- |
| `true && "JS"` | `"JS"` | обидва truthy, повертається другий |
| `false && "JS"` | `false` | перший falsy |
| `null && 5` | `null` | перший falsy |
| `"hi" && 0` | `0` | другий falsy |
| `1 && 2 && 3` | `3` | усі truthy, повертається останній |
| `0 && 2 && 3` | `0` | перший falsy, обчислення зупиняється |

Коротко, `&&` застосовують для перевірок умов в один рядок, коротких умовних викликів функцій, безпечного доступу до властивостей та умовного рендеру в JSX.

### Типові помилки
- **Очікують булевий результат.** `0 && 2` повертає `0`, а не `false`. Якщо потрібен саме булевий тип, обгорніть вираз: `Boolean(a && b)` або `!!(a && b)`.
- **Рендерять `0` у JSX.** `{items.length && <List />}` за порожнього масиву виведе на сторінку `0`, бо це валідний ReactNode. Пишіть `{items.length > 0 && <List />}`.
- **Плутають `&&` і `&`.** Одинарний амперсанд, це побітове І над 32-бітними цілими: `5 & 3` дає `1`, а не `3`.
- **Покладаються на `&&` там, де значення може бути легально `0` або `''`.** Для підстановки значення за замовчуванням краще `??`, бо `||` і `&&` реагують на всі falsy значення.
- **Розраховують на побічний ефект у правому операнді.** Якщо лівий операнд falsy, правий не виконається взагалі, тож логування чи інкремент там просто не станеться.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати756 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.