Урок 3 · JavaScript

Условия: как дать программе выбор

Редакция PraktumОбновлено 24 октября 202615 минут на урок с практикойУровень: новичок

Условие в JavaScript проверяет выражение и выбирает, какой код выполнить. Конструкция if (условие) { … } запускает блок, если условие истинно, а else — в остальных случаях. Для сравнения используют ===, >, <, а проверки соединяют операторами && (и) и || (или).

Зачем этот урок сейчас

Программа без условий делает всегда одно и то же. Интерфейс же постоянно выбирает: показать ошибку или «Спасибо», бесплатна ли доставка, вошёл ли пользователь. Условия — основа любой логики, от проверки формы до игры.

Конструкция if и else

const age = 17;

if (age >= 18) {
  console.log('Доступ открыт');
} else {
  console.log('Доступ только с 18 лет');
}

В скобках после if — выражение, которое даёт true или false. Если true, выполняется первый блок, иначе — блок else. Фигурные скобки ставь всегда, даже для одной строки: без них легко добавить вторую строку и не заметить, что она уже вне условия.

Несколько вариантов: else if

function getGrade(score) {
  if (score >= 90) {
    return 'Отлично';
  } else if (score >= 70) {
    return 'Хорошо';
  } else if (score >= 50) {
    return 'Зачёт';
  } else {
    return 'Нужно повторить';
  }
}

Ветки проверяются сверху вниз, и выполняется только первая подходящая. Поэтому порядок важен: если поставить проверку score >= 50 первой, все оценки от 50 до 100 получат «Зачёт».

Операторы сравнения

== перед сравнением тайком приводит типы, и получаются сюрпризы: '' == 0 истинно, null == 0 ложно. === сравнивает без приведения. Не путай с одиночным =: это присваивание, и if (seats = 0) обнулит переменную, а условие станет ложным.

Истинные и ложные значения

const name = '';

if (name) {
  console.log(`Привет, ${name}`);
} else {
  console.log('Введите имя');   // сработает: пустая строка ложна
}

В условие можно передать не только true и false. Ложными считаются шесть значений: false, 0, пустая строка '', null, undefined и NaN. Всё остальное истинно — в том числе строка '0', пустой массив [] и пустой объект {}. Проверку «список пуст» пиши как items.length === 0, а не !items.

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

const hasTicket = true;
const hasPassport = false;

if (hasTicket && hasPassport) console.log('Можно на посадку');
if (hasTicket || hasPassport) console.log('Хотя бы один документ есть');
if (!hasPassport) console.log('Не забудьте паспорт');

const isFreeDelivery = sum >= 2000 && city === 'Казань';

&& истинно, когда истинны обе части, || — когда хотя бы одна, ! переворачивает значение. Длинное условие лучше сохранить в переменную с говорящим именем: if (isFreeDelivery) читается сразу, а три сравнения подряд — нет.

Оба оператора ленивые: && останавливается на первой лжи, || — на первой правде. Поэтому user && user.name не упадёт, если user пуст.

Тернарный оператор

const label = count === 1 ? 'урок' : 'уроков';
button.textContent = isOpen ? 'Скрыть' : 'Показать';

условие ? если да : если нет — короткая запись для выбора одного из двух значений. Подходит для присваивания и подстановки в строку. Вложенные тернарные операторы читаются плохо — для трёх и больше вариантов используй if или объект-словарь. Подробнее — на странице тернарный оператор.

switch и объект-словарь

switch (status) {
  case 'new':
    label = 'Новый';
    break;
  case 'paid':
    label = 'Оплачен';
    break;
  default:
    label = 'Неизвестно';
}

// часто проще словарём
const labels = { new: 'Новый', paid: 'Оплачен' };
const label2 = labels[status] ?? 'Неизвестно';

switch сравнивает одно значение со списком вариантов через ===. Без break выполнение «провалится» в следующий case. Если каждой ветке соответствует просто значение, объект-словарь короче и понятнее.

Ранний return вместо лестницы

function deliveryMessage(sum, city) {
  if (!city) return 'Укажите город';
  if (city !== 'Казань') return 'Пока доставляем только по Казани';
  if (sum >= 2000) return 'Доставка бесплатно';
  return 'Доставка 300 ₽';
}

Сначала отсей особые случаи и сразу выйди из функции. Основной сценарий тогда остаётся внизу без вложенности. Не вкладывай условия глубже двух уровней — вынеси внутренний случай наружу или в отдельную функцию.

Числа из полей формы

const value = input.value;          // всегда строка, даже '25'
const age = Number(value);

if (value.trim() === '' || Number.isNaN(age)) {
  error.textContent = 'Введите возраст числом';
} else if (age >= 18) {
  // …
}

Значение поля всегда строка. Сравнение '25' >= 18 сработает за счёт приведения, а '25' === 25 — нет. Преобразуй значение явно через Number и проверь пустой ввод и NaN до остальных условий.

if или тернарный оператор

Частые ошибки

• Пишут = вместо === в условии.
• Используют == и получают true для '' == 0.
• Ставят общую проверку выше частной, и частная ветка никогда не срабатывает.
• Сравнивают строку из поля формы с числом через === без Number.
• Проверяют пустой массив через if (!items), хотя пустой массив истинен.

Доступность

Условия часто решают, что показать пользователю. Если по условию появляется ошибка или подсказка, выводи её текстом рядом с полем и в области с aria-live, а не только цветом. Скрытые по условию элементы прячь через атрибут hidden, чтобы их не читал скринридер.

Поддержка браузерами

if, else, switch, тернарный и логические операторы работают во всех браузерах. Оператор ?? из примера поддерживается всеми актуальными браузерами.

function deliveryInfo(sum) {
  const total = Number(sum);
  if (sum === '' || Number.isNaN(total)) return 'Введите сумму';
  if (total >= 1500) return 'Доставка бесплатная';
  return `Добавьте ещё ${1500 - total} ₽ для бесплатной доставки`;
}

deliveryInfo('1200'); // 'Добавьте ещё 300 ₽ для бесплатной доставки'