if и else

Представьте развилку дороги с указателем: «Если жарко — налево, к пляжу, иначе — направо, в парк». Вы читаете условие и выбираете одну дорогу, а по второй в этот раз не идёте.

До сих пор программы курса выполняли все свои строки подряд, сверху вниз. Но программе тоже нужны развилки: для жаркой погоды один ответ, для холодной — другой.

Такой выбор записывают инструкцией if. После неё в круглых скобках стоит условие, а в фигурных — код, который выполняется, только когда условие истинно:

function describe(t) {
    if (t > 30) {
        return "hot";
    } else if (t > 15) {
        return "warm";
    } else {
        return "cold";
    }
}

console.log(describe(35)); // hot
console.log(describe(20)); // warm
console.log(describe(-5)); // cold

Давайте разберём вызов describe(20):

1. Условие t > 30 ложно: 20 не больше 30. Первая ветка пропускается.
2. Условие t > 15 истинно, и функция возвращает "warm".
3. До else дело не доходит: return уже завершил функцию.

Для -5 ложны оба условия, поэтому функция возвращает "cold" из последней ветки.

Три вида веток

Код в фигурных скобках после if называют веткой. В примере их три, и у каждой своя роль.

Ветка if

Ветка if открывает развилку. Её запись состоит из трёх частей:

• ключевое слово if;
• условие в круглых скобках, например (t > 30);
• блок в фигурных скобках, который выполняется, когда условие истинно.

Если условие ложно, программа пропускает блок и идёт дальше. if может стоять и без else: тогда при ложном условии не выполняется ничего.

Ветка else if

Ветка else if добавляет к развилке ещё одно условие. Таких веток между if и else может быть сколько угодно.

Условия проверяются сверху вниз, и выполняется только первая ветка с истинным условием. Для 35 верны и t > 30, и t > 15, но функция вернёт "hot". Поэтому порядок веток важен.

Здесь аналогия с дорогой перестаёт работать. Путник может выбрать самый удобный указатель, а программа читает условия строго сверху вниз и идёт по первому подходящему.

Ветка else

У ветки else нет условия. Она выполняется, когда ложны все условия выше, и всегда стоит последней.

Если в ветке одна инструкция, фигурные скобки можно опустить, но со скобками границы ветки видны сразу. В коде курса ветки всегда стоят в скобках.

Условие приводится к boolean

Условие не обязано быть сравнением. if приводит любое значение к boolean по тем же правилам, что и Boolean(x).

Восемь ложных значений, среди них 0, "", null, undefined и NaN, дают false. Все остальные значения истинные и дают true. Пустая строка ложная, поэтому здесь выполняется else:

const name = "";

if (name) {
    console.log("Hello, " + name);
} else {
    console.log("No name"); // No name
}

Так удобно проверять, заполнено ли значение: пустая строка, null и undefined одинаково уводят программу в else. Но число 0 тоже ложное. Если ноль для вас обычное значение, например счёт в игре, сравнивайте явно: score === 0.

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

Когда нужно выбрать одно из двух значений, а не один из двух блоков кода, пишут тернарный оператор условие ? a : b. Вы уже встречали его в уроке о неявном приведении. Если условие истинно, всё выражение равно a, иначе — b:

const age = 20;
const status = age >= 18 ? "adult" : "minor";

console.log(status); // adult

Разберём по шагам:

1. Условие age >= 18 истинно: 20 не меньше 18.
2. Поэтому всё выражение равно "adult", и это значение попадает в status.
3. console.log(status) выводит adult.

Результат тернарного оператора — значение, поэтому его сохраняют в переменную, возвращают через return или передают в console.log. Для выбора из трёх и более вариантов удобнее цепочка if и else if.

Частая ошибка

В условии написали один знак = вместо ===:

let role = "guest";

if (role = "admin") { // ✗
    console.log("full access");
}

Программа выводит full access, хотя роль была "guest". Ошибки JavaScript не показывает.

Один = — это присваивание: он записывает "admin" в role, и условием становится записанное значение. Непустая строка "admin" истинная, поэтому ветка выполняется всегда. Для сравнения нужен ===: с условием role === "admin" программа ничего не выводит.

Главное

• if выполняет ветку, когда условие истинно, а else — когда ложны все условия выше.
• Цепочка else if проверяет условия сверху вниз и выполняет только первую подходящую ветку.
• Условие приводится к boolean: восемь ложных значений дают false, остальные — true.
• Тернарный оператор условие ? a : b выбирает одно из двух значений.