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

В повседневной жизни мы постоянно используем логику: идем ли мы на прогулку только если сегодня тепло и нет дождя? Заказываем ли мы десерт, если хотя бы одно блюдо в меню нам нравится? Именно такую "житейскую" логику мы переносим в код с помощью логических операторов.

В этом уроке мы разберем, как работают основные логические операторы в JavaScript (&&, ||, !), научимся комбинировать условия, избегать лишнего дублирования кода и писать вложенные проверки.

Что вы узнаете в рамках статьи

• Как работает оператор И (&&) и когда он возвращает true.
• Как работает оператор ИЛИ (||) и зачем он нужен.
• Как работает оператор НЕ (!) и что значит "инвертировать" значение.
• Как комбинировать условия для сложных проверок.
• Как избежать дублирования кода в условиях.
• Как писать вложенные условия и когда это уместно.
• Какие ошибки часто допускают при работе с логическими операторами.

Ключевые термины

• Логический оператор — символ или комбинация символов, которые позволяют объединять или изменять логические значения (true или false).
• && (логическое И) — возвращает true, если оба условия истинны.
• || (логическое ИЛИ) — возвращает true, если хотя бы одно условие истинно.
• ! (логическое НЕ) — инвертирует логическое значение (true → false, false → true).
• Вложенные условия — конструкции, в которых один оператор if находится внутри другого.

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

Логический оператор И (&&) используется, когда нам нужно, чтобы оба условия были истинными (true). Если хотя бы одно из условий окажется ложным (false), результат выражения сразу станет false.

Проще говоря:

true && true → true
true && false → false
false && true → false
false && false → false

Житейская аналогия

Представим, что мы выбираем место для отдыха. У нас есть два обязательных критерия:

1. Тёплое место — мы не хотим мерзнуть в отпуске.
2. Близко к воде — чтобы можно было купаться.

Правило: Место нам подходит только если оба критерия выполнены.

const isWarmPlace = true;  // Место тёплое
const isNearWater = true;  // Место близко к воде

if (isWarmPlace && isNearWater) {
    console.log('Это идеальное место для отдыха!');
} else {
    console.log('Поищем другое место...');
}

Что происходит по шагам:

1. Проверяется первое условие isWarmPlace → true.
2. Проверяется второе условие isNearWater → true.
3. Оператор && видит, что оба условия true && true → результат true.
4. Выполняется код в первой ветке if.

Если хотя бы одно условие false, программа перейдет в ветку else.

Разбор разных комбинаций

Пример из жизни в IT

Представьте, что пользователь может войти на сайт только если:

• у него есть учетная запись
• и он подтвердил свой email.

const hasAccount = true;
const emailConfirmed = false;

if (hasAccount && emailConfirmed) {
    console.log('Добро пожаловать!');
} else {
    console.log('Пожалуйста, зарегистрируйтесь или подтвердите email.');
}

В этом примере вход невозможен, потому что emailConfirmed = false, а для && это значит, что всё условие ложно.

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

Логический оператор ИЛИ (||) используется, когда нам нужно, чтобы хотя бы одно из условий было истинным (true). Если оба условия окажутся ложными (false), результат выражения будет false.

Проще говоря:

true || true → true
true || false → true
false || true → true
false || false → false

Житейская аналогия

Представим, что мы выбираем кафе для вечернего визита. У нас есть два критерия:

1. Хорошее меню — чтобы было вкусно и разнообразно.
2. Уютная атмосфера — чтобы приятно провести время.

Правило: Кафе подходит, если хотя бы один из этих пунктов выполняется.

const hasGoodMenu = true;        // Кафе с хорошим меню
const hasCozyAtmosphere = false; // Кафе без уютной атмосферы

if (hasGoodMenu || hasCozyAtmosphere) {
    console.log('Это кафе подходит для вечернего посещения!');
} else {
    console.log('Нужно поискать другое кафе...');
}

Что происходит по шагам:

1. Проверяется первое условие hasGoodMenu → true.
2. Для || уже этого достаточно, чтобы весь результат был true. Второе условие даже не проверяется (это называется ленивое вычисление, или short-circuit evaluation).
3. Код внутри if выполняется, и мы видим сообщение:

Это кафе подходит для вечернего посещения!

Разбор всех комбинаций

Пример из жизни в IT

Допустим, мы даем доступ к чату поддержки, если:

• пользователь — премиум-подписчик
• или он администратор.

const isPremiumUser = false;
const isAdmin = true;

if (isPremiumUser || isAdmin) {
    console.log('Доступ к чату поддержки открыт.');
} else {
    console.log('Нужна премиум-подписка или права администратора.');
}

В этом случае доступ есть, потому что хотя пользователь и не премиум, он является администратором (false || true → true).

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

Логический оператор НЕ (!) используется для инверсии (отрицания) логического значения. Он превращает:

• true → false
• false → true

Если говорить просто — ! меняет смысл условия на противоположный.

Житейская аналогия

Представьте, что мы проверяем регистрацию пользователя на сайте. Если он не зарегистрирован — предлагаем ему зарегистрироваться. Если зарегистрирован — пускаем на сайт.

const isRegistered = false;

if (!isRegistered) {
    console.log('Пользователь не зарегистрирован. Пожалуйста, зарегистрируйтесь.');
} else {
    console.log('Добро пожаловать на сайт!');
}

Что происходит по шагам:

1. Переменная isRegistered имеет значение false.
2. Оператор ! инвертирует это значение: !false → true.
3. Так как условие в if стало true, выполняется первый блок кода.

Таблица истинности для !

Пример из жизни в IT

Допустим, мы проверяем, пустой ли список задач. Если он пустой — пишем "Нет задач". Если не пустой — выводим список.

const tasks = [];

if (!tasks.length) {
    console.log('Нет задач');
} else {
    console.log('Ваши задачи:', tasks);
}

Здесь tasks.length возвращает 0, а это falsy-значение. !0 → true, поэтому выводится сообщение "Нет задач".

Двойное отрицание (!!)

Если применить оператор ! дважды, можно принудительно преобразовать любое значение к булевому типу:

console.log(!!'Hello'); // true
console.log(!!0);       // false
console.log(!!null);    // false
console.log(!!123);     // true

Это удобно, когда нужно явно получить true или false из переменной, которая может содержать разные типы данных.

Не только с булевыми значениями

Как и && и ||, оператор ! работает с любыми значениями, которые предварительно приводятся к логическому типу по правилам truthy/falsy.

Falsy-значения в JavaScript: false, 0, "" (пустая строка), null, undefined, NaN.

Пример:

console.log(!'');        // true (пустая строка — falsy)
console.log(!42);        // false (число — truthy)
console.log(!undefined); // true

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

В реальных проектах редко встречаются условия, состоящие из одного оператора. Чаще всего нам нужно проверить несколько критериев одновременно, и здесь мы комбинируем &&, || и !.

Пример: доступ к фильму

Допустим, у нас есть онлайн-кинотеатр. Пользователь может посмотреть фильм только если:

1. Он зарегистрирован.
2. Ему 16 лет или больше.
3. Фильм доступен на платформе.

const isRegistered = true;   // Пользователь зарегистрирован
const age = 20;               // Возраст пользователя
const isMovieAvailable = true; // Фильм доступен

if (isRegistered && age >= 16 && isMovieAvailable) {
    console.log('Фильм доступен для просмотра.');
} else {
    console.log('Фильм недоступен для просмотра.');
}

Как работает проверка по шагам

1. Проверка isRegistered → true.
2. Проверка age >= 16 → 20 >= 16 → true.
3. Проверка isMovieAvailable → true.
4. Так как это true && true && true → результат true, выполняется первая ветка if.

Что если одно из условий false

Как только встречается false в &&, дальнейшая проверка останавливается (ленивое вычисление).

Добавляем "ИЛИ" для альтернативных условий

Представим, что фильм можно смотреть и без регистрации, если он в бесплатной библиотеке:

const isRegistered = false;
const age = 20;
const isMovieAvailable = true;
const isFreeMovie = true;

if ((isRegistered && age >= 16 && isMovieAvailable) || isFreeMovie) {
    console.log('Фильм доступен для просмотра.');
} else {
    console.log('Фильм недоступен для просмотра.');
}

Здесь || isFreeMovie позволяет пропустить проверку регистрации, если фильм бесплатный.

Используем "НЕ" для запретов

Если пользователь в бане (isBanned = true), он не может смотреть фильм:

const isRegistered = true;
const age = 20;
const isMovieAvailable = true;
const isBanned = false;

if (isRegistered && age >= 16 && isMovieAvailable && !isBanned) {
    console.log('Фильм доступен для просмотра.');
} else {
    console.log('Фильм недоступен для просмотра.');
}

Тут !isBanned означает "пользователь не забанен".

Избегаем дублирования кода

Плохое решение (два одинаковых действия в разных ветках):

if (number % 2 === 0) {
    result = 'YES';
} else if (number >= 10 && number <= 100) {
    result = 'YES';
} else {
    result = 'NO';
}

Хорошее решение (объединили условия):

if ((number % 2 === 0) || (number >= 10 && number <= 100)) {
    result = 'YES';
} else {
    result = 'NO';
}

Вложенные условия

Вложенные условия — это ситуация, когда один оператор if находится внутри другого. Они позволяют проверять условия поэтапно: если первое условие не подошло, внутри блока else можно выполнить дополнительные проверки.

Житейская аналогия

Представьте, что мы определяем возрастную категорию человека:

• Если ему 18 лет или больше — он совершеннолетний.
• Если меньше 18, но 13 или больше — он подросток.
• Если меньше 13 — он ребенок.

Пример кода

const age = 25;

if (age >= 18) {
    console.log('Вы совершеннолетний');
} else {
    if (age >= 13) {
        console.log('Вы подросток');
    } else {
        console.log('Вы ребенок');
    }
}

Разбор по шагам

1. Проверка age >= 18:
   • Если true → выполняется первая ветка (Вы совершеннолетний).
   • Если false → переходим в блок else.
2. В блоке else снова проверка: age >= 13:
   • Если true → выполняется console.log('Вы подросток').
   • Если false → выполняется console.log('Вы ребенок').

Таблица примеров

Когда использовать вложенные условия

• Если нужно разделить проверку на несколько уровней.
• Если логика подразумевает дополнительные уточнения после первой проверки.

Не стоит: если условий слишком много (4–5 уровней вложенности) — код становится трудночитаемым. В таком случае лучше использовать else if или другие конструкции.

Альтернатива: else if

Тот же код можно записать компактнее с помощью else if:

if (age >= 18) {
    console.log('Вы совершеннолетний');
} else if (age >= 13) {
    console.log('Вы подросток');
} else {
    console.log('Вы ребенок');
}

Преимущество этого варианта — меньше вложенности, проще читать.

Комбинация с логическими операторами

Иногда внутри вложенного условия можно использовать && или ||, чтобы сократить количество уровней:

if (age < 18 && age >= 13) {
    console.log('Вы подросток');
}

Наиболее частые ошибки

• Использование = вместо == или === в условиях. (= — это присваивание, а не сравнение)
• Слишком сложные вложенные условия вместо упрощения через логические операторы.
• Дублирование одинакового кода в разных ветках if и else if.

Наиболее частые вопросы

Вопрос: Можно ли использовать логические операторы без if?\
Ответ: Да. Например:

const canGo = isSunny || hasUmbrella;

Итоги

Сегодня мы:

• Разобрали, как работают &&, || и !.
• Научились комбинировать условия и избегать дублирования кода.
• Рассмотрели вложенные условия и способы упрощения логики.
• Узнали о типичных ошибках и вопросах при работе с логическими операторами.

Теперь вы сможете писать более чистые и читаемые условия, что сделает ваш код надежнее и проще для понимания.