Оператор &&

JavaScriptJunior~3 хв читання

&&, це оператор логічного І, який повертає перший 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"

Як працює `&&` крок за кроком

JavaScript обчислює перший вираз a.
Якщо a є falsy, оператор одразу повертає a, і решта виразів не обчислюється.
Якщо 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, правий не виконається взагалі, тож логування чи інкремент там просто не станеться.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.