Оператор &&

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

Оператор && у JavaScript - це логічне І (AND). Він використовується не лише для логічних порівнянь, а й для керування виконанням виразів (short-circuit evaluation).

Базовий зміст

javascript

a && b

Повертає:

значення a, якщо a є хибним (falsy);
інакше - значення b.

Принцип роботи (покроково)

JS обчислює перший вираз a.
Якщо a - хибне (falsy) → одразу повертає a (решта не обчислюється).
Якщо a - істинне (truthy) → повертає другий вираз b.

Приклади з булевими значеннями

javascript

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

Те саме, що в логіці: A ∧ B = "істина, якщо обидва істинні".

Приклади з іншими типами

JS не приводить значення до true/false, а повертає один із самих виразів.

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"

Коротке замикання (short-circuit)

Якщо перше значення "хибне" - друге навіть не обчислюється.

javascript

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

Це дозволяє використовувати && як умовне виконання:

javascript

isLoggedIn && showDashboard();

Виклик showDashboard() відбудеться тільки якщо isLoggedIn === true.

Приклад у реальному коді

javascript

const user = { name: 'Tim' };

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

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

Це зручно для безпечного доступу до властивостей (до появи ?. - optional chaining).

Різниця з `if`

javascript

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

// те саме
user && console.log(user.name);

&& просто робить те саме коротше.

Приклад у JSX (React)

javascript

{isAdmin && <AdminPanel />}

Компонент <AdminPanel /> відрендериться тільки якщо isAdmin === true.

Таблиця truthy / falsy

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

Підсумок

Вираз	Результат	Пояснення
`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 → зупиняється

Коротко

a && b → якщо a "хибне", повертає a; інакше повертає b.
Використовується для:
- перевірок умов в один рядок,
- коротких викликів функцій,
- безпечного доступу до властивостей,
- JSX-рендерингу.

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

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

Premium

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