Логические операторы: &&, ||, ! и их поведение в условиях

Как логические операторы влияют на ваш код?

Логические операторы — это инструменты, которые помогают нам писать более выразительные и компактные условия. Они работают с булевыми значениями (true и false), но их поведение в JavaScript гораздо интереснее, чем кажется на первый взгляд!


Оператор && (И)

Этот оператор возвращает true, только если оба операнда истинны. Но есть нюанс: он возвращает не просто булево значение, а первый ложный или последний истинный операнд!

console.log(true && true);   // true
console.log(true && false);  // false
console.log(5 && 10);        // 10 (последний истинный)
console.log(0 && 'Hello');   // 0 (первый ложный)

🔥 Совет: Используйте && для выполнения действий только при выполнении условия: javascript const user = { name: 'Alex' }; user.isAdmin && console.log('Доступ разрешён!'); // Ничего не выведет, если isAdmin false


Оператор || (ИЛИ)

Возвращает true, если хотя бы один операнд истинен. Как и &&, он возвращает не булево значение, а первый истинный или последний ложный операнд.

console.log(false || true);   // true
console.log('' || 'default'); // 'default'
console.log(null || 0 || 42); // 42

💡 Практическое применение: Задание значений по умолчанию: javascript const username = user.name || 'Гость'; // Если name нет, будет 'Гость'


Оператор ! (НЕ)

Самый простой оператор — превращает истину в ложь и наоборот. Всегда возвращает булево значение.

console.log(!true);    // false
console.log(!0);       // true
console.log(!!'text'); // true (двойное отрицание для приведения к boolean)

⚠️ Осторожно: ! имеет высокий приоритет и может вести себя неожиданно: javascript console.log(!5 + 3); // 3 (!5 → false → 0 + 3)


Логика "ленивого" вычисления

JavaScript экономит ресурсы и вычисляет операнды только когда это действительно нужно:

  • && — если первый операнд ложный, второй не вычисляется
  • || — если первый операнд истинный, второй не вычисляется
function checkAuth() {
  console.log('Проверка прав...');
  return true;
}

false && checkAuth(); // checkAuth() не вызовется
true || checkAuth();  // checkAuth() не вызовется

Комбинирование операторов

Когда вы сочетаете операторы, важно учитывать их приоритет:

  1. ! (высший)
  2. &&
  3. || (низший)
console.log(true || false && false); // true (сначала &&, потом ||)

Для ясности лучше использовать скобки:

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

Реальные примеры из практики

Пример 1: Проверка возраста и подписки

const age = 25;
const hasSubscription = true;

if (age >= 18 && hasSubscription) {
  console.log('Доступ открыт!');
}

Пример 2: Защита от ошибок при обращении к свойствам

const user = null;
console.log(user && user.address && user.address.street); // null (без ошибки)

Итоговая таблица поведения операторов

Оператор Название Возвращает Пример
&& И Первый ложный или последний истинный 5 && 00
\|\| ИЛИ Первый истинный или последний ложный 0 \|\| 1010
! НЕ Булево отрицание !'hi'false

Тренируйтесь на реальных задачах!

Попробуйте предсказать результаты:

console.log('Hello' && 0 && true); // ?
console.log(null || undefined || '' || 'JS'); // ?
console.log(!(10 > 5) || (false && true)); // ?

🧠 Проверьте себя: Ответы — 0, 'JS', false.

Эти операторы — мощный инструмент в ваших руках. Используйте их осознанно, и ваш код станет чище и выразительнее!

Скрыть рекламу навсегда

🧠 Учёба без воды и зубрёжки

Закрытый Boosty с наработками опытного преподавателя.

Объясняю сложное так, чтобы щелкнуло.

🚀 Забрать доступ к Boosty