Как устроен оператор if
Оператор if выполняет блок кода только тогда, когда условие истинно. Конструкция простая: ключевое слово, условие в скобках и блок в фигурных скобках:
Условие age >= 18 возвращает true, поэтому блок выполнится. Если бы age было равно 16, условие оказалось бы false, и JavaScript просто пропустил бы этот блок.
Фигурные скобки формально можно опустить, когда в блоке всего одна инструкция, но лучше ставить их всегда. if без скобок — классический источник багов: стоит кому-нибудь позже дописать вторую строку, забыв, что она на самом деле не входит в блок, — и привет, ошибка.
else: ветка «иначе»
Свяжите if с else, чтобы выполнить другой код, когда условие ложно:
Выполняется ровно одна из двух веток. Никогда обе, никогда ни одной. У else нет собственного условия — это запасной вариант на случай, когда if оказался ложным.
else if в JavaScript: выбор из нескольких вариантов
Если вариантов больше двух, соединяйте их через else if. JavaScript проверяет условия по порядку и останавливается на первом же, которое оказалось истинным:
Выполнится только одна ветка. Как только условие совпало, остальные пропускаются — даже если они тоже были бы истинными. Поэтому порядок важен: если поставить score >= 60 в начало цепочки, все, кто выше 60, получат «тройку» (D).
Финальный else необязателен, но с ним намерение читается яснее: «если ничего не совпало — сделать вот это».
Условием может быть любое выражение
В скобках не обязательно должно стоять сравнение. Туда можно поместить любое выражение — JavaScript сам приведёт результат к булевому значению:
Непустые строки — это truthy. 0 и пустая строка — falsy, поэтому при items.length, равном 0, выполнится ветка else. Это стандартная идиома JavaScript для проверки «а есть ли там вообще что-нибудь».
Список falsy-значений небольшой, и его стоит просто запомнить: false, 0, -0, 0n, "", null, undefined и NaN. Всё остальное — truthy, включая "0", "false", [] и {}. На двух последних обычно и спотыкаются.
Объединяем условия: && и ||
Для составления множественных условий в JavaScript используют && (и) и || (или):
&& требует, чтобы обе стороны были truthy. || — чтобы хотя бы одна. Оба оператора работают с короткой схемой вычисления: && останавливается на первом falsy-значении, || — на первом truthy. Это важно, когда второе условие имеет побочный эффект или может упасть с ошибкой — например, user && user.name спокойно вернёт undefined, если user равен null, и ничего не сломается.
Смешанную логику лучше оборачивать в скобки, чтобы приоритет операторов был очевиден:
Без скобок && связывает сильнее, чем ||, а это обычно противоположно тому, как читается условие на первый взгляд.
== против === (используйте ===)
При проверке равенства внутри if используйте === и !==, а не == и !=:
== приводит типы перед сравнением, и отсюда берутся сюрпризы вроде "" == 0 (true) или null == undefined (тоже true). === сравнивает без приведения типов — совпадать должны и тип, и значение. По умолчанию всегда используйте ===. Единственное разумное исключение — проверка x == null, которая за один раз ловит и null, и undefined.
Тернарный оператор в JavaScript
Когда нужно выбрать одно из двух значений, тернарный оператор условие ? a : b обычно выглядит аккуратнее, чем полноценный if/else:
Тернарный оператор в JavaScript — это выражение, а значит, он возвращает значение. В этом его принципиальное отличие от if/else, который является инструкцией. Тернарный оператор удобен, когда нужен результат: присвоить переменной, вернуть из функции, собрать строку. А вот if/else лучше подходит, если вы выполняете побочные эффекты.
Тернарники можно объединять в цепочки, но читаемость при этом летит под откос:
// Не делайте так:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
Если нужна цепочка, возвращайтесь к else if.
Вложенный if или плоский else if
Иногда одно условие имеет смысл только внутри другого — в таком случае вложенность вполне уместна:
Но вложенность в три-четыре уровня — это уже запашок кода. Такое лучше расплющить через ранний выход или объединённое условие:
Ранний return делает каждую ветку короткой и оставляет её на одном уровне отступа. Читать такой код гораздо проще, чем продираться через пирамиду вложенных if.
Частая ошибка: присваивание внутри if
= — это присваивание. === — сравнение. Перепутать их внутри условия — классический баг:
status = "done" присваивает "done" переменной status и возвращает "done" — а это truthy-значение, поэтому блок сработает всегда, а переменную вы незаметно для себя перезапишете. Линтеры такое ловят. Строгий режим — нет. Так что будьте внимательны и используйте ===, когда действительно хотите сравнить.
Дальше: switch
Когда нужно сравнить одно значение с кучей возможных вариантов, длинная цепочка else if начинает выглядеть громоздко. Как раз для таких случаев в JavaScript есть оператор switch — со своими нюансами вокруг break и проваливания между case, о которых поговорим дальше.
Часто задаваемые вопросы
Как написать конструкцию if/else в JavaScript?
После if в круглых скобках указывается условие, а затем в фигурных скобках идёт блок кода. Дальше можно добавить else с альтернативным блоком. Пример: if (age >= 18) { console.log('adult'); } else { console.log('minor'); }. В качестве условия подойдёт любое выражение — JavaScript сам приведёт его к булевому типу.
Чем else if отличается от вложенного if в JavaScript?
else if — это цепочка условий, где отработает только одна ветка: JavaScript проверяет условия по порядку и останавливается на первом совпадении. Вложенный if — это когда один if находится внутри другого, обычно чтобы проверить дополнительное условие только в случае, если первое уже истинно. На практике плоская цепочка else if почти всегда читается проще, чем глубокая вложенность.
Когда использовать тернарный оператор вместо if/else?
Тернарник condition ? a : b хорош там, где нужно выбрать одно из двух значений внутри выражения: присвоить переменную, вернуть результат из функции, собрать строку. А если в ветках выполняются действия с побочными эффектами или код в любой из веток длиннее одного короткого выражения — лучше оставить if/else. Цепочки из нескольких тернарников быстро превращаются в нечитаемую кашу.
Почему if (0) и if (false) ведут себя одинаково в JavaScript?
Потому что они и должны — оба блока не выполнятся. JavaScript приводит условие к булевому типу, а значения 0, '', null, undefined, NaN и false считаются falsy. Подвох в другом: '0' (непустая строка) и [] (пустой массив) — это truthy, что часто сбивает с толку тех, кто пришёл из других языков.
