`if`...`else`

В зависимости от условия выполняет один или другой вариант кода.

Время чтения: 5 мин

Кратко

Скопировано

Управляющая конструкция. В зависимости от условия выбирает, какой блок кода выполнить.

Как пишется

Скопировано

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

        
          
          if (условие) {  console.log('Выполнится, если условие истинное (true)')} else {  console.log('Выполнится, если условие ложное (false)')}
          if (условие) {
  console.log('Выполнится, если условие истинное (true)')
} else {
  console.log('Выполнится, если условие ложное (false)')
}

Выполнить блок кода, если условие истинное, либо пропустить его:

        
          
          if (условие) {  console.log('Выполнится, если условие истинное')}
          if (условие) {
  console.log('Выполнится, если условие истинное')
}

Выполнить блок кода, у которого условие истинное и находится выше всего в списке, остальные проверки проигнорировать:

        
          
          if (условие1) {  // ...} else if (условие2) {  // ...} else if (условие3) {  // ...} else {  // Выполнится, если все условия выше ложные}
          if (условие1) {
  // ...
} else if (условие2) {
  // ...
} else if (условие3) {
  // ...
} else {
  // Выполнится, если все условия выше ложные
}

Как понять

Скопировано

Зачем нужны управляющие конструкции, читайте в статье «Порядок выполнения».

В разработке много задач, в которых нужно по-разному обрабатывать данные. Все эти примеры описываются фразой «если …, то …»:

если пользователь вошёл в систему, то показать содержание почтового ящика. В противном случае — форму логина;
если сумма покупки больше 2 000 ₽, то посчитать скидку 10%;
если покупка оплачена, то показать экран успеха. В противном случае — экран с ошибкой.

Фразой «если …» определяется условие. Если условие выполняется, то мы выполняем часть, описанную фразой «то …». Если условие не выполняется, нужно смотреть на фразу «в противном случае …», когда она есть.

Если мы хотим решать подобные задачи с помощью кода, язык программирования должен содержать аналогичные конструкции. Конструкция должна выбирать, какой код выполнять, в зависимости от условия. Такая конструкция называется if...else. Она предоставляет возможность ветвления.

По аналогии с русским языком, конструкция содержит условие и блоки кода, которые будут выполняться в зависимости от условия. Блоки кода иногда называют ветками:

        
          
          if (условие) {  // Блок кода, выполнится, если условие выполняется} else {  // Блок кода, выполнится в противном случае}
          if (условие) {
  // Блок кода, выполнится, если условие выполняется
} else {
  // Блок кода, выполнится в противном случае
}

Пример ниже выведет на печать слово «Привет», если во всплывающее окно ввести «Друг», и «Я тебя не знаю» в противном случае:

        
          
          let phrase = prompt('Скажи слово друг и заходи')if (phrase === 'Друг') {  alert('Привет')} else {  alert('Я тебя не знаю')}
          let phrase = prompt('Скажи слово друг и заходи')

if (phrase === 'Друг') {
  alert('Привет')
} else {
  alert('Я тебя не знаю')
}

Условие

Скопировано

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

В простом случае условие должно вычисляться в логический тип данных: true или false. Такие выражения получаются при использовании операторов сравнения ==, ===, >, <, >=, <=, !==, !=.

Например:

        
          
          // Применяем скидку, если цена больше или равна 2 500 рублейif (price >= 2500) {  price = price * 0.9}if (foundItems === 0) {  console.log('Ничего не найдено')} else {  console.log('Печатаем результаты поиска')}if (user.isAdmin) {  // Сокращённая запись user.isAdmin === true  console.log('Привет, админ!')} else {  console.log('Привет, пользователь!')}
          // Применяем скидку, если цена больше или равна 2 500 рублей
if (price >= 2500) {
  price = price * 0.9
}

if (foundItems === 0) {
  console.log('Ничего не найдено')
} else {
  console.log('Печатаем результаты поиска')
}

if (user.isAdmin) {
  // Сокращённая запись user.isAdmin === true
  console.log('Привет, админ!')
} else {
  console.log('Привет, пользователь!')
}

Выражения в условии можно комбинировать с помощью логических операторов.

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

Какой из блоков кода выполнится?

        
          
          let foundItems = 0if (foundItems) {  console.log('Ничего не найдено')} else {  console.log('Печатаем результаты поиска')}
          let foundItems = 0

if (foundItems) {
  console.log('Ничего не найдено')
} else {
  console.log('Печатаем результаты поиска')
}

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

Все, что не приводится к false, будет true.

Осталось запомнить 8 значений, которые приводятся к false:

false;
0;
-0;
'';
null;
undefined;
NaN;
0n (тип BigInt).

Зная это правило, поймём, что в примере выше есть баг. Мы будем писать «Ничего не найдено» всегда, кроме случая, когда в переменной foundItems окажется 0. Тогда мы попытаемся напечатать результаты поиска.

Вариации

Скопировано

`if` без `else`

Скопировано

Если хотим выполнить действие, когда условие верно, но в противном случае не делать ничего, достаточно написать іf без блока else.

Напечатаем приветствие только Виктору, для других не делаем ничего:

        
          
          if (username === 'Виктор') {  console.log('Привет, Витёк! Эта пасхалка для тебя')}
          if (username === 'Виктор') {
  console.log('Привет, Витёк! Эта пасхалка для тебя')
}

`if ... else if ... else`

Скопировано

Задача может содержать больше, чем два случая. Для её решения можно собирать if...else в цепочки.

Например, в зависимости от статуса пользователя, менять размер скидки:

        
          
          let discount = 0if (userStatus === 'VIP') {  discount = 25} else if (userStatus === 'privileged') {  discount = 15} else if (userStatus === 'clubMember') {  discount = 5}
          let discount = 0
if (userStatus === 'VIP') {
  discount = 25
} else if (userStatus === 'privileged') {
  discount = 15
} else if (userStatus === 'clubMember') {
  discount = 5
}

В этом случае выполнится тот блок кода, условие которого истинно и находится выше. Остальные условия будут проигнорированы.

Когда условий становится много, страдает читаемость кода. В этом случае лучше писать switch, но он не всегда подходит.

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Когда нужно сохранить в переменную либо одно, либо другое значение, в зависимости от условия, это осуществляется двумя способами.

Простой:

        
          
          let value = 1 // Значение по умолчаниюif (day === 'Вторник') {  value = 50}
          let value = 1 // Значение по умолчанию
if (day === 'Вторник') {
  value = 50
}

С использованием тернарного оператора, короткая запись if..else:

        
          
          let value =  day === 'Вторник' ? 50 : 1 // Во вторник значение 50, в другие дни 1
          let value =
  day === 'Вторник' ? 50 : 1 // Во вторник значение 50, в другие дни 1

Тернарный оператор стоит использовать только если выражение короткое. В противном случае такой код будет плохо читаться.

Роман Баранников советует

Скопировано

🛠 Частая задача — вызвать функцию при выполнении условия. Для этого можно использовать трюк с логическим И &&.

Простая реализация:

        
          
          const processTuesday = () => {  // …Полезный код}if (day === 'Вторник') {  processTuesday()}
          const processTuesday = () => {
  // …Полезный код
}

if (day === 'Вторник') {
  processTuesday()
}

Более короткая и лаконичная запись:

        
          
          day === 'Вторник' && processTuesday()
          day === 'Вторник' && processTuesday()

В таком коде функция processTuesday() будет вызвана только в тех случаях, когда первое выражение day === 'Вторник' будет true. Если же выражение false, то вторая часть выражения, processTuesday(), не будет вычисляться совсем. Это так, потому что вычисления первого выражения достаточно, чтобы получить результат всего выражения с логическим И — оно будет false. Такой подход называется вычислением по короткой схеме и используется, чтобы не делать лишнюю работу.

Александр Леоненко советует

Скопировано

🛠 Частый паттерн — установить значение по умолчанию, если в переменной нет значения. Можно сделать так:

        
          
          // Значение по умолчаниюlet value = 0if (externalValue) {  // Установить значение, если в externalValue что-то хранится  value = externalValue}
          // Значение по умолчанию
let value = 0

if (externalValue) {
  // Установить значение, если в externalValue что-то хранится
  value = externalValue
}

Код можно сократить, воспользовавшись операцией логического ИЛИ ||.

Если externalValue не объявлен, то значение установится на 0:

        
          
          const value = externalValue || 0
          const value = externalValue || 0

Неявное приведение externalValue к логическому типу также игнорирует определённые ложные значения, возможно, вполне валидные: '', NaN, 0 , -0, 0n, false. Чтобы их не терять, вместо || используйте ?? — уже неплохо поддерживаемый логический оператор nullish coalescing из ES2020:

        
          
          const value = externalValue ?? 42
          const value = externalValue ?? 42

Это аналогично записи:

        
          
          const value = (externalValue !== null && externalValue !== undefined) ? externalValue : 42
          const value = (externalValue !== null && externalValue !== undefined) ? externalValue : 42

Оператор ?? возвращает первый операнд (externalValue), если он не null и не undefined, иначе — второй (42). Теперь через externalValue можно передать '', NaN, 0 , -0, 0n, false, в отличие от случая с ||.

Сравните результат операций с || и ??:

`externalValue`	`externalValue \|\| 42`	`externalValue ?? 42`
`1`	`1`	`1`
`'hi'`	`'hi'`	`'hi'`
`null`	`42`	`42`
`undefined`	`42`	`42`
`0`	`42`	`0`
`''`	`42`	`''`
`false`	`42`	`false`

Кратко

Как пишется

Как понять

Условие

Вариации

if без else

if ... else if ... else

На практике

Николай Лопин советует

Роман Баранников советует

Александр Леоненко советует

Читайте также

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

Преобразование типов

Функция

`if` без `else`

`if ... else if ... else`