Логические операторы &&, ||, ! в JavaScript

Логические операторы &&, || и ! - базовые инструменты для условий и составной логики. Важно помнить: в JavaScript эти операторы часто возвращают не true/false, а один из операндов. Это связано с правилами truthy/falsy и механизмом short-circuit (короткого замыкания).

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

Short-circuit означает, что выражение может завершиться раньше, чем вычислятся все части.

a && b - если a falsy, b не вычисляется
a || b - если a truthy, b не вычисляется

Это делает код быстрее и позволяет безопасно проверять значения перед доступом к ним.

Оператор && (логическое И)

Логика

a && b читается как “a и b”. В логическом смысле результат true, только если оба операнда truthy.

Но важно поведение возврата:

если a falsy, возвращается a
иначе возвращается b

console.log(true && true);     // true
console.log(true && false);    // false
console.log(false && true);    // false

Возврат операндов

console.log("ok" && 123);   // 123
console.log(0 && "next");   // 0
console.log("" && "next");  // ""
console.log("a" && "b");    // "b"

Типичные паттерны

Условное выполнение

const isReady = true;
isReady && console.log("запуск");

Защитная проверка перед доступом к свойству

const user = { profile: { name: "Sam" } };

const name = user.profile && user.profile.name;
console.log(name); // "Sam"

Сегодня чаще используют optional chaining ?., но принцип short-circuit полезно понимать:

const name2 = user.profile?.name;
console.log(name2); // "Sam"

Оператор || (логическое ИЛИ)

Логика

a || b читается как “a или b”. В логическом смысле результат true, если хотя бы один операнд truthy.

Поведение возврата:

если a truthy, возвращается a
иначе возвращается b

console.log(false || true);  // true
console.log(false || false); // false
console.log(true || false);  // true

Возврат операндов и значение по умолчанию

console.log("" || "default");     // "default"
console.log(0 || 10);             // 10
console.log("text" || "default"); // "text"

Это часто используют как “подстановка по умолчанию”, но есть нюанс: 0, "", NaN - falsy, хотя могут быть валидными значениями.

const page = 0;
const currentPage = page || 1;

console.log(currentPage); // 1 (иногда это ошибка логики)

Если нужно подставлять значение только для null и undefined, лучше подходит ??.

const page2 = 0;
const currentPage2 = page2 ?? 1;

console.log(currentPage2); // 0

Оператор ! (логическое НЕ)

!value приводит значение к boolean и инвертирует его.

console.log(!true);   // false
console.log(!false);  // true
console.log(!0);      // true
console.log(!"text"); // false

Двойное отрицание !! часто используют, чтобы явно получить boolean:

console.log(!!"text"); // true
console.log(!!0);      // false

Порядок вычисления и скобки

У операторов есть приоритет (precedence). В логике часто важнее читаемость, поэтому скобки - нормальная практика.

Приоритет:

!
&&
||

const a = true;
const b = false;
const c = true;

console.log(a || b && c);      // true, потому что сначала b && c
console.log((a || b) && c);    // true
console.log(a || (b && c));    // true

Еще пример, где скобки помогают избежать ошибок:

const status = "ok";
const isAdmin = false;

const canEdit = status === "ok" && (isAdmin || status === "ok");
console.log(canEdit); // true

Частые ошибки

Путаница с возвращаемыми значениями

&& и || возвращают операнд, поэтому выражение может вернуть строку, число или объект.

const value = "hello" && 0;
console.log(value); // 0

Если требуется именно true/false, помогает Boolean(...):

const isValid = Boolean("hello" && 0);
console.log(isValid); // false

Неподходящий || для значений по умолчанию

Если 0 и "" допустимы, || может подставить “default” слишком рано. В таких случаях обычно используют ?? или более явные проверки.

const text = "";
console.log(text || "default"); // "default"
console.log(text ?? "default"); // ""

Что стоит запомнить

&& возвращает первое falsy или последний операнд.
|| возвращает первое truthy или последний операнд.
! приводит к boolean и инвертирует значение, !! получает boolean.
Short-circuit позволяет не вычислять лишнее и делать защитные проверки.
Для значений по умолчанию часто удобнее ??, если 0 и "" являются валидными значениями.