Логические операторы в JavaScript

Логические операторы позволяют выполнять логические операции над булевыми значениями. Они дают возможность сочетать, инвертировать или сравнивать условия и принимать решения в коде на основе результата.

Ниже — подробное руководство по основным логическим операторам, включая оператор nullish coalescing (??), практические примеры, распространённые ошибки и рекомендации.

Обзор

Кратко о каждом операторе:

• && (AND) — возвращает первый falsy-операнд или последний truthy-операнд; используется для проверки нескольких условий одновременно и для условного выполнения выражений.
• || (OR) — возвращает первый truthy-операнд или последний falsy-операнд; часто применяется для задания значения по умолчанию.
• ! (NOT) — унарный оператор, инвертирует логическое значение операнда.
• ?? (Nullish coalescing) — возвращает правый операнд только если левый равен null или undefined; полезен, когда 0 или пустая строка должны считаться допустимыми значениями.

Понимание “truthy” и “falsy” важно для работы с && и ||: JavaScript приводит значения к булеву типу при логическом сравнении, но сам оператор возвращает исходные значения без приведения.

Что такое truthy и falsy

JavaScript считает “falsy” следующие значения (они при приведении к булеву станут false):

• false
• null
• undefined
• NaN
• 0
• 0n (BigInt равный нулю)
• “” (пустая строка — “” или ‘’ или ``) Всё остальное считается truthy и при приведении становится true. ## Логический AND (&&) Оператор AND возвращает true только если оба операнда приводятся к true. В синтаксисе: a && b Пример из исходного текста: const a = 5; const b = 10; const c = 15; const result_1 = (a < b) && (b < c); console.log(result_1); // true const result_2 = (a > b) && (b < c); console.log(result_2); // false Поведение с не-boolean значениями (ключевые моменты): - Если первый операнд falsy, выражение коротко замыкается и возвращает этот первый операнд. - Если первый операнд truthy, возвращается второй операнд (который может быть truthy или falsy). - При большем числе операндов && идёт слева направо, пока не встретит falsy; если falsy не найдено, вернёт последний операнд. Пример короткого замыкания: const a = 5; const b = 'Hello'; const c = null; const result_1 = a && b; console.log(result_1); // "Hello" const result_2 = c && b; console.log(result_2); // null Практические применения: - Условное выполнение: user && show(user) — вызов show только если user truthy. - Составные проверки: a && b && c — все должны быть truthy. Важно: не используйте && для выбора значения по умолчанию; для этого чаще подходит || или ?? (см. ниже). ## Логический OR (||) Оператор OR возвращает true, если хотя бы один из операндов приводитcя к true. Синтаксис: a || b Пример: const a = 5; const b = 10; const c = 15; const result_1 = (a < b) || (b < c); console.log(result_1); // true const result_2 = (a > b) || (b < c); console.log(result_2); // true const result_3 = (a > b) || (b > c); console.log(result_3); // false Поведение с не-boolean значениями: - Если первый операнд truthy, оператор коротко замыкается и возвращает его. - Если первый операнд falsy, возвращает следующий операнд; если truthy встретится позже, вернёт его. - Если все операнды falsy, вернёт последний falsy. Примеры: const a = 5; const b = 'Hello'; const c = null; const result_1 = a || b; console.log(result_1); // 5 const result_2 = c || b; console.log(result_2); // "Hello" const result_3 = c || " "; console.log(result_3); // " " Анти-паттерн: использование || для значений по умолчанию, когда допустимы 0 или “”. В этом случае || может заменить допустимое значение дефолтом, чего не хотелось бы. ## Логический NOT (!) Унарный оператор NOT инвертирует логическое значение операнда. Синтаксис: !x Пример: const a = 5; const b = ''; const c = true; const result_1 = !a; console.log(result_1); // false const result_2 = !b; console.log(result_2); // true const result_3 = !c; console.log(result_3); // false Замечание: двойное отрицание (!!x) часто используется, чтобы явно привести значение к boolean (получить true/false вместо исходного значения). ## Nullish coalescing (??) Оператор nullish coalescing возвращает левый операнд, если он не равен null и не равен undefined; иначе — правый операнд. Синтаксис: x ?? y Примеры из исходного текста: const name = null; const defaultName = "John Doe"; const result_1 = name ?? defaultName; console.log(result_1); // "John Doe" const age = 0; const defaultAge = 25; const result_2 = age ?? defaultAge; console.log(result_2); // 0 Ключевая разница между ?? и ||: || считает любое falsy-значение (включая 0, “”) поводом для возврата правого операнда; ?? реагирует только на null и undefined, поэтому 0 и пустая строка остаются допустимыми значениями. Совместимость: оператор ?? введён в спецификацию ES2020 (ES11). Для старых сред используйте транспиляцию (Babel/TypeScript) или явные проверки на null/undefined. ## Короткое замыкание: паттерны применения - Использование && для условного рендеринга или вызова функции: - user && render(user) — безопасный шаблон, если render вызывается только при существовании user. - Использование || для значений по умолчанию, когда недопустимы 0 или “” — это может быть ошибкой. - Использование ?? для значений по умолчанию, когда 0 или “” являются валидными значениями. Примеры-паттерны: // Условный рендеринг user && showProfile(user); // Значение по умолчанию — НЕ подойдёт, если age может быть 0 const displayedAge = age || 18; // Правильно, если 0 допустим const displayedAge2 = age ?? 18; ## Сравнительная таблица (поведение в не-boolean контексте) | Оператор | Коротко | Возвращает при non-boolean | Короткое замыкание на | Подходит для дефолтов | |—|—:|—|—|—:| | && | AND | первый falsy или последний truthy | falsy | нет | | || | OR | первый truthy или последний falsy | truthy | да, но осторожно (0/“”) | | ?? | Nullish coalescing | левый, если не null/undefined, иначе правый | null/undefined | да (когда 0 и “” допустимы) | | ! | NOT | всегда boolean (инверсия) | n/a | нет | ## Анти-паттерны и когда это даёт сбой - Использовать || чтобы подставить значение по умолчанию, если ожидается 0 или пустая строка — приведёт к нежелательной подстановке. - Принципиальная ошибка: ожидать, что && вернёт строго boolean — он может вернуть объект, строку или число. - Смешивание ?? и || без скобок может привести к синтаксической ошибке; при комбинировании используйте скобки: a ?? b || c — парсится в соответствии с приоритетом, поэтому лучше явные скобки. Примеры провалов: const count = 0; const safe = count || 10; // 10, но возможно мы хотели 0 const safe2 = count ?? 10; // 0 — корректно ## Практическая шпаргалка (cheat sheet) - Проверка: if (a && b) — оба истинны. - Значение по умолчанию, не принимая 0/“”: const x = val || defaultVal; - Значение по умолчанию, принимая 0/“”: const x = val ?? defaultVal; - Привести к boolean: const ok = !!value; - Условный вызов: condition && doSomething(); ## Мини-методология: как выбирать оператор 1. Нужен ли вам булевый результат или оригинальные значения? Если нужен булев, примените !! или сравнение. 2. Допустимы ли null/undefined как “отсутствие значения”? Если да — используйте ??. 3. Допустимы ли 0 или пустая строка? Если да — не используйте || для дефолтов. 4. Нужны ли побочные эффекты (вызов функций)? Используйте && аккуратно. ## Критерии приёмки (тесты) - Функция getDisplayName(user, fallback) должна возвращать fallback, если user.name === null или user.name === undefined. - Функция getCount(value, fallback) должна вернуть 0, если value === 0 и fallback === 10; то есть использовать ??, а не ||. - Условный вызов: при user === null showProfile не должен вызываться (test: user = null -> spy not called). Примеры тест-кейсов (псевдо): - assert.equal(getDisplayName({name: null}, “Anon”), “Anon”) - assert.equal(getCount(0, 10), 0) - spy = sinon.spy(); null && spy(); assert.equal(spy.callCount, 0) ## Чек-лист роли разработчика Для разработчика: - [ ] Проверил, что дефолт через || не перезаписывает 0/“” непреднамеренно. - [ ] Заменил || на ?? там, где нужно отличать null/undefined от других falsy. - [ ] Использую !! для явно булевых значений. Для код-ревьюера: - [ ] В коде нет неочевидных коротких замыканий, влияющих на побочные эффекты. - [ ] Операторы комбинируются с корректными скобками. - [ ] Тесты покрывают случаи null, undefined, 0, “” и NaN. ## Ментальные модели - “&& — проверяем всё подряд, но возвращаем причину отказа (первый falsy)”. - “|| — ищем первое пригодное значение (первый truthy)”. - “?? — ищем первое не-null/не-undefined значение”. - “!/!! — переключатель булева мира: true/false”. ## Совместимость и миграция - &&, || и ! поддерживаются во всех версиях JavaScript. - ?? введён в ES2020; если вы поддерживаете старые среды, используйте транспайлер (Babel, TypeScript) или явные проверки: (x !== null && x !== undefined) ? x : y. ## Сравнение: когда использовать что - Для дефолтов, когда 0 и “” допустимы — используйте ??. - Для дефолтов, когда 0 и “” недопустимы — можно использовать ||. - Для условного выполнения выражений — используйте &&. - Для получения явного булева — используйте !! или !. ## Mermaid: простое дерево принятия решения mermaid flowchart TD A[Нужно значение по умолчанию?] -->|Да| B{0 или "" допустимы?} B -->|Да| C[Используйте ??] B -->|Нет| D[Используйте ||] A -->|Нет| E[Нужно булево?] E -->|Да| F[Используйте !!/!] E -->|Нет| G[Используйте && для условных вызовов] ## Короткие подсказки по безопасности и приватности Логические операторы не влияют напрямую на приватность, но будьте осторожны с условными выражениями, которые могут вызвать раскрытие данных при коротком замыкании (например, вызов функции с побочным эффектом, раскрывающей пользовательские данные). ## Глоссарий (в одну строку) - truthy — значение, приводимое к true при булевом приведении. - falsy — значение, приводимое к false при булевом приведении. - короткое замыкание — остановка дальнейшей оценки выражения при достижении определения результата. - nullish — значение null или undefined. ## Итоги Логические операторы — мощный инструмент JavaScript. Понимайте разницу между &&, || и ??, особенно в контексте truthy/falsy, чтобы избегать логических ошибок. Используйте ?? для безопасной подстановки значений по умолчанию, когда 0 или пустая строка должны быть валидными; используйте && и || для компактных условных выражений, но тестируйте граничные случаи. Примечание: добавьте юнит-тесты для случаев null, undefined, 0, “” и NaN — это снижает вероятность логических регрессий.