Условные операторы Javascript

Введение в условные операторы

Условные операторы (также называемые условными инструкциями) в JavaScript — это механизм принятия решений в программе. Вместо того чтобы последовательно выполнять каждую строку сверху вниз, они позволяют коду выбирать какой блок запустить в зависимости от того, является ли условие true или false.

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

• инструкции if, else if и else,
• тернарный оператор ? : (и когда его не следует вкладывать),
• как истинные и ложные значения влияют на условия,
• вычисление с коротким замыканием с помощью && и ||,
• оператор нулевого слияния ?? для задания значений по умолчанию.

Условие — это любое выражение, которое JavaScript может привести к boolean. Как правило, оно строится с помощью операторов сравнения (>, <, ===, …) и комбинируется с помощью логических операторов (&&, ||, !).

Инструкция if

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

Синтаксис

if (condition) {
  // code to execute if condition is true
}

Пример

Инструкция else

Инструкция else дополняет if, выполняя свой блок тогда, когда условие if ложно.

Синтаксис

if (condition) {
  // code if condition is true
} else {
  // code if condition is false
}

Пример

Инструкция else if

else if позволяет последовательно проверять несколько условий. JavaScript проверяет каждое из них сверху вниз и выполняет первую ветку, условие которой истинно — остальные пропускаются, даже если они тоже были бы истинны. Поэтому порядок важен: ставьте наиболее специфичные или приоритетные условия первыми.

Синтаксис

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if neither condition is true
}

Пример

Когда вы сравниваете одно значение со многими фиксированными вариантами, цепочка else if может стать громоздкой. Инструкция switch нередко является более чистым решением в этом случае.

Условный (тернарный) оператор ?

Тернарный оператор (? :) — это компактное сокращение для if...else. Это единственный оператор JavaScript, принимающий три операнда, и в отличие от инструкции он возвращает значение — что делает его идеальным для присваивания результата в зависимости от условия.

Синтаксис

let result = condition ? value1 : value2;

Если condition истинно, выражение вычисляется как value1; в противном случае — как value2.

Пример

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

Вложенные и цепочечные тернарные операторы

Тернарный оператор сам может возвращать другой тернарный оператор, что имитирует цепочку else if:

Это работает, но читаемость быстро снижается. Избегайте вложенных тернарных операторов, когда логика нетривиальна — глубоко вложенное выражение вида a ? b : c ? d : e сложно читать и легко допустить ошибку. Предпочитайте if...else if (или switch), если у вас более одного условия, и оставляйте тернарный оператор для простых выборов из двух вариантов.

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

Условие в if или тернарном операторе не обязано быть boolean. JavaScript приводит любое переданное значение к true или false. Значения, приводимые к false, называются ложными (falsy); всё остальное является истинным (truthy).

Существует ровно восемь ложных значений:

false
0        // and -0
0n       // BigInt zero
""       // empty string
null
undefined
NaN

Всё остальное — включая "0", "false", [] (пустой array) и {} (пустой object) — является истинным (truthy).

Именно поэтому распространённая сокращённая запись if (name) { ... } проверяет, имеет ли name пригодное значение, а не использует name === "" или name === undefined.

Вычисление с коротким замыканием

Логические операторы && и || не всегда возвращают boolean — они возвращают один из своих операндов и прекращают вычисление, как только результат определён. Это называется коротким замыканием.

• a && b возвращает a, если a является ложным, иначе возвращает b.
• a || b возвращает a, если a является истинным, иначе возвращает b.

У оператора || в роли запасного варианта есть подводный камень: он считает все ложные значения отсутствующими. Если 0 или "" является допустимым значением, || ошибочно заменит его. Именно эту проблему решает ??.

Полные правила описаны в отдельной главе о логических операторах.

Оператор нулевого слияния (??)

Оператор нулевого слияния ?? возвращает правый операнд только тогда, когда левый операнд равен null или undefined — но не для других ложных значений, таких как 0 или "".

Используйте ??, когда назначаете значения по умолчанию для переменных, которые могут законно принимать значения 0, "" или false. Используйте || только тогда, когда вы действительно хотите, чтобы любое ложное значение инициировало запасной вариант.

Заключение

Условные операторы — это механизм принятия решений в вашем коде. Используйте if / else if / else для ветвящейся логики, тернарный ? : для простого выбора значения (без глубокой вложенности) и ?? для безопасного задания значений по умолчанию. Комбинируйте их с операторами сравнения и логическими операторами для выражения любых условий, и переходите к инструкции switch, когда сопоставляете одно значение со множеством вариантов.

Практика