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

Логические операторы играют ключевую роль в управлении потоком выполнения и принятии решений в JavaScript. В этом руководстве объясняется, как использовать логические операторы JavaScript — &&, ||, !, связанный с ними ?? и идиому !! — а также, что не менее важно, два поведения, которые чаще всего вызывают путаницу: вычисление с коротким замыканием и семантика возврата значений. Все примеры ниже можно запустить.

Обзор логических операторов JavaScript

Логические операторы вычисляют один или несколько операндов и возвращают значение. Они являются основой операторов JavaScript и чаще всего используются внутри условий, однако их возможности не ограничиваются возвратом true/false:

• && (логическое И)
• || (логическое ИЛИ)
• ?? (оператор нулевого слияния — технически самостоятельный, но решает ту же задачу «выбора значения»)
• ! (логическое НЕ)
• !! (двойное НЕ — идиома преобразования к Boolean)

Истинные (truthy) и ложные (falsy) значения

Прежде чем разбираться с операторами, нужно понять, что JavaScript считает «истиной» и «ложью» в Boolean-контексте. Существует ровно восемь falsy-значений; всё остальное является truthy.

Это важно, потому что &&, || и ! проверяют операнды на истинность, а не на строгое совпадение с Boolean true. Подробнее о лежащих в основе типах значений см. в разделе Типы данных JavaScript.

Вычисление с коротким замыканием и возврат значений

Почти всё поведение этих операторов определяется двумя правилами:

1. Короткое замыкание: вычисление останавливается, как только результат становится известен. Правый операнд может никогда не выполниться.
2. Возвращается операнд, а не Boolean: && и || возвращают одно из исходных значений, а не true/false.

Именно поэтому || работает как оператор значения по умолчанию, а && — как защитный оператор, запускающий правую часть только тогда, когда левая является истинной.

Логическое И (&&)

В Boolean-контексте && равно true только тогда, когда оба операнда истинны. Точнее, оператор возвращает первый falsy-операнд или последний операнд, если все они истинны. Используйте его, когда должны выполняться несколько условий одновременно, или как защитный оператор, выполняющий правую часть только при истинности левой.

В этом примере и isLoggedin, и hasPermissions должны быть истинными, чтобы доступ был предоставлен. Если хотя бы одно из них ложно, доступ будет закрыт — и благодаря короткому замыканию, если isLoggedin равно false, значение hasPermissions не вычисляется вовсе.

Логическое ИЛИ (||)

В Boolean-контексте || равно true, когда хотя бы один операнд является истинным. Точнее, оператор возвращает первый truthy-операнд или последний операнд, если все они ложны. Именно это делает его оператором запасного / значения по умолчанию.

Здесь операция может продолжиться, если networkStatus равен 'good' или savedOffline истинно, обеспечивая запасной вариант при плохом состоянии сети.

Оператор нулевого слияния (??)

Оператор ?? возвращает правую часть только тогда, когда левая часть равна null или undefined (в совокупности называемых nullish). Остальные falsy-значения, такие как 0, '' и false, он игнорирует. Именно это единственное отличие отделяет его от ||.

Здесь itemCount равен 0. С оператором ?? переменная defaultCount остаётся равной 0, потому что 0 не является nullish — то есть законный ноль сохраняется.

?? против ||

|| возвращает запасное значение при любом falsy-значении; ?? — только при null/undefined. Когда 0, '' или false являются допустимыми входными данными, это различие реально предотвращает ошибки.

Используйте ??, когда хотите получить значение по умолчанию только при полном отсутствии значения, и оставьте || для случаев, когда любое falsy-значение должно запускать запасной вариант.

Логическое НЕ (!)

Оператор ! инвертирует истинность своего операнда и всегда возвращает Boolean. Он полезен для переключения состояний или проверки на выполнение условия.

Этот пример проверяет, является ли isActive ложным, и если да — сообщает, что требуется активация.

Двойное НЕ (!!)

Двойное применение ! преобразует любое значение в его Boolean-эквивалент: первый ! инвертирует (и приводит к Boolean), второй возвращает его обратно. Результат строго равен либо true, либо false.

!!0 вычисляется в false, потому что 0 является falsy-значением в JavaScript. Двойное НЕ делает Boolean-преобразование явным и понятным.

Использование !! для проверки Boolean-статуса свойства object

Иногда требуется проверить, не только присутствует ли свойство object, но и является ли оно истинным. Оператор !! идеально подходит для преобразования любого значения в строгий Boolean-контекст, делая очевидным и явным, соответствует ли свойство условиям.

Рассмотрим сценарий, в котором есть object пользователя с возможным свойством isActive. Действие нужно выполнить только в том случае, если isActive не просто присутствует, но и является истинным.

В этом примере:

• Object пользователя имеет свойство isActive, равное undefined.
• Использование !!user.isActive преобразует undefined в false.
• Поскольку isActive равно undefined (а это falsy-значение), !!undefined даёт false, и вывод будет «John is not active.»

Практические сценарии использования

Условный рендеринг

Этот фрагмент демонстрирует использование && для условного рендеринга: строка 'UserDashboard' отображается только тогда, когда isLoggedIn истинно.

Управление значениями по умолчанию с помощью логического ИЛИ

Если currentUser равен null, переменная userName принимает значение 'Guest'. Это гарантирует, что приветствие будет персонализированным в любом случае.

Упрощение сложных условий

Этот код предоставляет полный доступ только верифицированным пользователям, являющимся администраторами или редакторами, объединяя && и ||. Скобки здесь важны — смотрите раздел о приоритете операторов ниже.

Приоритет операторов

При смешивании операторов JavaScript вычисляет их в фиксированном порядке. От наивысшего к низшему приоритету среди рассматриваемых:

1. ! (логическое НЕ) — наивысший
2. && (логическое И)
3. || (логическое ИЛИ) и ?? (они имеют одинаковый приоритет, поэтому их нельзя смешивать без скобок)

Операторы сравнения (<, === и др.) связываются теснее, чем && и ||, поэтому вычисляются первыми. Подробнее об операторах сравнения см. в разделе Операторы сравнения.

Если есть сомнения, добавьте скобки. Они ничего не стоят, но делают намерение однозначным.

Лучшие практики

• Избегайте сложности: сохраняйте логические выражения простыми. Если они становятся слишком сложными, разбейте их на меньшие, управляемые части.
• Используйте короткое замыкание: применяйте свойство короткого замыкания && и || для оптимизации производительности, избегая ненужных вычислений.
• Явное преобразование к Boolean: используйте !! для чёткого преобразования значений в true или false, повышая читаемость и предсказуемость кода.
• Единообразие типов при сравнении: обеспечивайте согласованность типов данных при сравнениях, чтобы избежать неожиданного поведения из-за приведения типов в JavaScript.

Заключение

Логические операторы необходимы для написания эффективного JavaScript. Запомните две идеи, объясняющие почти всё их поведение: вычисление с коротким замыканием (правый операнд может никогда не выполниться) и возврат значения (&& и || возвращают один из операндов, а не Boolean). Используйте ?? вместо || всякий раз, когда 0, '' или false являются допустимыми значениями, и добавляйте скобки везде, где приоритет неочевиден.

Для дальнейшего изучения см. раздел Условный (тернарный) оператор, позволяющий выбирать между двумя значениями в строке, и Операторы сравнения для построения условий, передаваемых в логические выражения.

Практика