Урок 4. Условия: if, else, switch и тернарный оператор

Программа без условий делает одно и то же при любых данных. Условие позволяет выбрать: если пароль верный — пустить, иначе — показать ошибку. Для этого в JavaScript есть if, switch и тернарный оператор ? :.

if и else

const temperature = 18;

if (temperature >= 25) {
  console.log("Жарко");
} else if (temperature >= 15) {
  console.log("Тепло");
} else {
  console.log("Прохладно");
}

Тепло

Как это работает:

1. В скобках после if — условие. Если оно верно (true), выполняется блок в фигурных скобках сразу за ним, а остальные ветки пропускаются.
2. Если неверно — проверяется следующее условие, else if. Таких веток может быть сколько угодно.
3. Блок else выполняется, когда не подошло ни одно условие. Он необязателен.

Условия проверяются сверху вниз, и срабатывает только первая подходящая ветка. При 30 градусах верно и >= 25, и >= 15, но выведется только «Жарко». Поэтому порядок веток важен: сначала — самые строгие условия.

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

Несколько условий сразу

Условия соединяют операторами && («и») и || («или») из прошлого урока. Пример — проверка високосного года: год високосный, если делится на 4, но не на 100, или если делится на 400.

function isLeap(year) {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

console.log(isLeap(2024));
console.log(isLeap(1900));
console.log(isLeap(2000));

true
false
true

Здесь условие спрятано в функцию — о функциях подробно в уроке Функции и стрелочные функции. Скобки вокруг первой половины условия не обязательны (&& выполняется раньше ||), но с ними код читается проще.

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

В скобках if не обязательно стоит true или false. Любое значение там превращается в логическое. Ложными (по-английски falsy) считаются такие значения:

• false;
• 0, -0 и 0n (ноль типа bigint);
• "" — пустая строка;
• null и undefined;
• NaN.

Всё остальное — истинное (truthy), в том числе строка "0", строка из пробела " ", пустой массив [] и пустой объект {}. Превратить значение в логическое явно можно функцией Boolean:

console.log(Boolean(""));
console.log(Boolean("0"));
console.log(Boolean(0));
console.log(Boolean([]));
console.log(Boolean(null));

false
true
false
true
false

Поэтому короткая проверка if (name) пропустит и пустую строку, и undefined — это удобно. Но if (count) пропустит и ноль, хотя ноль может быть нормальным значением. Если важен именно ноль, пишите сравнение явно: if (count !== undefined). А пустой массив короткой проверкой не поймать вовсе — для этого есть справка Как проверить, что массив пустой.

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

Когда нужно выбрать одно из двух значений, удобна короткая запись условие ? если_да : если_нет:

const age = 16;
const status = age >= 18 ? "взрослый" : "несовершеннолетний";
console.log(status);

const count = 1;
console.log(`Найдено: ${count} ${count === 1 ? "файл" : "файлов"}`);

несовершеннолетний
Найдено: 1 файл

Тернарный оператор — для выбора значения. Если в ветках нужно что-то делать (несколько команд), пишите if: вложенные друг в друга ? : быстро становятся нечитаемыми.

switch

switch сравнивает одно значение с несколькими вариантами. Это удобнее длинной цепочки else if, когда сравнение одно и то же:

const day = 6;

switch (day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log("Рабочий день");
    break;
  case 6:
  case 7:
    console.log("Выходной");
    break;
  default:
    console.log("Такого дня нет");
}

Выходной

• Значение сравнивается с каждым case строго, как через ===: case "6" с числом 6 не совпадёт.
• break завершает switch. Без него выполнение «проваливается» в следующий case — так здесь несколько case подряд объединены в одну ветку.
• default срабатывает, если не подошёл ни один case.

Забытый break — самая частая ошибка в switch:

const color = "red";

switch (color) {
  case "red":
    console.log("Стоп");
  case "green":
    console.log("Можно идти");
    break;
}

Стоп
Можно идти

После «Стоп» нет break, и выполнилась ещё и ветка "green".

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

• Одно = вместо ===. if (x = 5) не сравнивает, а записывает 5 в x, и условие всегда истинно. Сравнение — ===.
• Точка с запятой после условия. if (x > 0); { … } — блок в скобках выполнится всегда: ; закончила if пустой командой.
• Сравнение строки с числом. Значение из поля ввода — строка, и "10" > "9" даёт false. Сначала Number(...).
• Неверный порядок веток. Если первой стоит проверка >= 15, до >= 25 дело не дойдёт никогда.

Коротко

• if (условие) { … } else if (…) { … } else { … } — срабатывает первая верная ветка.
• Ложные значения: false, 0, -0, 0n, "", null, undefined, NaN; остальные — истинные, включая "0" и [].
• условие ? а : б — выбор одного из двух значений.
• switch сравнивает строго; каждую ветку заканчивает break.

Проверьте себя

const n = 30;
if (n > 10) {
  console.log("больше 10");
} else if (n > 20) {
  console.log("больше 20");
} else {
  console.log("мало");
}