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

Что такое логические операторы

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

Краткое определение терминов:

• truthy — значение, которое при приведении к булеву становится true.
• falsy — значение, которое при приведении к булеву становится false.

Список часто используемых операторов

• Логическое И: &&
• Логическое ИЛИ: ||
• Логическое НЕ: !
• Nullish coalescing: ??

Правила приведения: какие значения считаются falsy

JavaScript считает falsy следующие значения:

• false
• null
• undefined
• NaN
• 0
• 0n (BigInt ноль)
• пустая строка: “” или ‘’ или `` Все остальные значения считаются truthy (включая объекты, массивы, функции, любые ненулевые числа, символы и т. д.). ## Логическое И (&&) Оператор && возвращает первый встреченный falsy-операнд или последний операнд, если все истинны. Это приводит к короткому замыканию: если левый операнд falsy — правый не вычисляется. Синтаксис: js 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 Пример с не‑булевыми значениями: js 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 Замечание: > Важно: && не обязательно возвращает true/false — он возвращает один из исходных операндов. ## Логическое ИЛИ (||) Оператор || возвращает первый встреченный truthy-операнд или последний операнд, если все falsy. При первом истинном значении происходит короткое замыкание. Синтаксис: js 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 Пример с не‑булевыми значениями: js 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); // " " ## Логическое НЕ (!) Унарный оператор ! возвращает логическое отрицание приводимого значения. При двойном отрицании (!!) можно получить явное булево значение (true/false). Синтаксис: js !x Примеры: js 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 // Приведение к булевому console.log(!!a); // true console.log(!!b); // false ## Nullish coalescing (??) Оператор ?? возвращает первый операнд, если он не равен null и не равен undefined; в противном случае возвращает второй операнд. Это удобно, когда 0 или пустая строка являются допустимыми значениями и не должны заменяться на значение по умолчанию. Синтаксис: js x ?? y Пример: js 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 Важно: > ?? похож на ||, но || будет считать 0 или “” falsy и вернёт альтернативу. ?? возвращает правый операнд только при null или undefined. Также обратите внимание на синтаксическое ограничение: нельзя смешивать ?? с || или && без явных круглых скобок — это вызовет ошибку парсинга. Всегда группируйте выражения в скобки при комбинировании. ## Сравнение операторов — таблица быстрого справочника | Оператор | Что возвращает | Короткое описание | Когда полезен | |—|—:|—|—| | && | первый falsy или последний операнд | логическое И с коротким замыканием | проверка и получение значения только если предыдущее truthy | | || | первый truthy или последний операнд | логическое ИЛИ с коротким замыканием | выбор первого допустимого значения (но 0/“” заменяются) | | ?? | первый, если не null/undefined, иначе второй | coalescing для null/undefined | выбор дефолта, когда 0 и “” — валидные значения | | ! | булева инверсия | превращает значение в логическое и инвертирует | проверки и явное булево приведение (!!) | ## Когда операторы могут подвести — типичные ошибки и примеры 1. Ошибка: использование || для значений, где 0 или пустая строка — валидны. js const count = 0; const display = count || "—"; // вернёт "—" вместо 0 const displayFixed = count ?? "—"; // вернёт 0 2. Смешивание ?? с ||/&& без скобок приводит к SyntaxError. js // Неправильно — выдаст ошибку парсинга // const x = a ?? b || c; // Правильно const x = (a ?? b) || c; 3. Ожидание булевых значений от &&/||. Эти операторы возвращают исходные операнды, а не обязательно true/false. js const res = {} || false; // вернёт {} — truthy объект, не булево true 4. Lazy evaluation может скрыть побочные эффекты: правая часть не выполнится, если левая достаточна. ## Ментальные модели и эвристики - “&& как фильтр“: используйте &&, чтобы вернуть значение, только если всё слева истинно. - “|| как запасной план”: || выбирает первый пригодный (truthy) результат; не используйте, если 0 или “” валидны. - “?? как безопасный дефолт”: используйте, когда хотите подставить дефолт только при null/undefined. - Двойное отрицание (!!) — быстрый способ явно привести значение к boolean. ## Чеклист для ролей Для разработчика: - [ ] Явно понимаю, какие значения считаются falsy. - [ ] Не использую || там, где допустимы 0 или пустая строка. - [ ] Группирую выражения скобками при смешивании ?? с ||/&&. - [ ] Тестирую крайние случаи: 0, “”, null, undefined, NaN, 0n. Для ревьювера кода: - [ ] Проверил правильность выбора оператора (?? vs ||). - [ ] Нет скрытых боковых эффектов из-за короткого замыкания. - [ ] Нет неверного ожидания булевого результата там, где вернётся объект/число. ## Набор примеров и сниппетов (cheat sheet) Короткие примеры, которые можно копировать в проект: js // 1. Присвоение дефолта, но 0 и "" — допустимы const val = userInput ?? 'default'; // 2. Проверка и выполнение функции, только если объект существует user && user.save && user.save(); // 3. Приведение к булеву const ok = !!maybeValue; // 4. Комбинация с скобками const x = (a ?? b) && c; ## Edge‑case галерея - NaN — falsy, поэтому || вернёт альтернативу. - 0n — BigInt 0 также falsy. - Symbol() — всегда truthy. - Пустые объекты ({}) и массивы ([]) — truthy. - Функции — truthy. ## Критерии приёмки - Покрыты юнит‑тестами случаи: 0, “”, null, undefined, NaN, 0n, {}, [] - Нет смешения ?? без скобок с ||/&& - Поведение функций с &&/|| не вызывает неожиданных пропусков выполнения Пример тестов (псевдо‑коды на Jest): js test('?? не заменяет 0', () => { const res = (0 ?? 5); expect(res).toBe(0); }); test('|| заменяет 0', () => { const res = (0 || 5); expect(res).toBe(5); }); ## Альтернативы и варианты подхода - Для явной проверки null/undefined можно использовать строгие сравнения: x !== null && x !== undefined. - Для композируемых проверок используйте утилиты вроде lodash.get с дефолтом или Optional chaining (?.) в паре с ??. Пример с Optional chaining: js const deep = obj?.a?.b ?? 'fallback'; ## Риски и mitigations - Риск: неверное ожидание булевого результата. Mitigation: использовать !! или явно проверять typeof/instanceof. - Риск: синтаксическая ошибка при смешивании ?? с ||/&&. Mitigation: всегда оборачивать части в скобки и запускать линтер. ## Короткое резюме Логические операторы — мощный инструмент для контроля потока и выбора значений. Помните о правилах truthy/falsy и о том, что && и || возвращают операнды, а не только булевы значения. Используйте ??, чтобы не заменять легитимные значения вроде 0 или пустой строки. Важно: при сомнениях — добавьте тесты на крайние случаи.