Условные конструкции if else, switch и тернарный оператор в JavaScript

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

Оператор if

Оператор if в JS проверяет некоторое условие и выполняет определенный блок кода только в случае, если это условие является истинным (true), иначе (false) блок кода игнорируется.

Синтаксис оператора if в JavaScript следующий:

if (condition) {
    // блок кода для исполнения, если condition истинно
}

Условие проверки для оператора if устанавливается в круглых скобках, которые прописываются сразу после if. Часть кода, которая может быть выполнена, если условие является true, прописывается в фигурных скобках, следующих сразу за условием. В примере выше код будет выполняться, если condition равно true.

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

Условие с одним значением	Булевое значение после преобразования
true	true
false	false
0	false
1	true
-1	true
NaN	false
''	false
' '	true
null	false
undefined	false
{}	true
[]	true
Любое ненулевое число: любая непустая строка, объект или массив	true

При записи выражения в качестве условия блок кода в фигурных скобках выполнится, если результат этого выражения будет равен true. Выражения могут быть следующих типов:

• С операторами сравнения (>, <, >=, <=, ==, !=, ===, !==), которые сравнивают значения.
• С логическими операторами (&& (и), || (или), и ! (не)) для объединения нескольких логических условий.
• С использованием оператора typeof, который позволяет проверить тип переменной или значения.
• Регулярные выражения для проверки соответствия строки определенному шаблону.
• Вызовы функций, которые возвращают логическое значение.

Примеры:

const num = 10;
if ((num % 2 === 0) && (num > 6)) {
    // блок кода исполняется, если num четное и больше 6
}

const value;
if (typeof value !== 'undefined') {
    //  выполняется блок, если value определено
}

const digits = [4, 7, 9];
const value = 7;
if (digits.includes(value)) {
    // блок выполнится, так как 7 есть в массиве digits
}

const username = "Clark379";
if (/^[a-zA-Z]+$/.test(userInput)) {
    // исполняется, если в имени пользователя только буквы
}

Таким образом, оператор if либо позволяет выполнить какой-либо код, либо пропустить его, если условие неистинно. Но что нам делать, если мы хотим выполнить альтернативный блок кода при ложности условия? Для этого есть конструкция if else, которой посвятим следующий раздел статьи.

Конструкция if else

Конструкция if else позволяет выполнять различные блоки кода в зависимости от того, истинно или ложно определенное условие. Синтаксис if else в JavaScript выглядит следующим образом:

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

К оператору if дописывается оператор else с фигурными скобками. В этом случае выполнится всегда какой-то один блок кода, в зависимости от condition: если условие condition истинно (true), то исполнится код в фигурных скобках if, иначе — в фигурных скобках else.

Пример:

const user = {
    name: 'Мария',
    isAdmin: true
};

if (user.isAdmin) {
    console.log('Добро пожаловать в ваш личный кабинет, ' + user.name + '!');
} else {
    console.log('Доступ запрещен!');
}

В этом примере мы проверяем у объекта user значение свойства isAdmin. Если последнее true, мы выполняем код if, иначе else.

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

if (condition1) {
    // выполняется, если condition1 равно true
} else if (condition2) {
    // выполняется, если condition2 равно true
} else {
    // если ни condition1, ни condition2 НЕ являются истинными (true), выполнится этот код
}

В таком варианте конструкции if else также будет исполняться только один блок. Конструкция будет искать по порядку первое истинное условие, код которого и выполнит. Например, если condition1 — истина, то условие condition2 уже не будет проверяться. Если ни одно условие неверно, то будет исполнен код последнего else. Условий else if может быть много:

if (condition1) {
    ...
} else if (condition2) {
    ...
} else if (condition3) {
    ...
} else if (conditionN) {
    ...
} else {
    ...
}

Пример:

const score = 75;

if (score >= 90) {
    console.log('Вы прошли тест на отлично!');
} else if (score >= 80) {
    console.log('Вы получили хороший результат!');
} else if (score >= 70) {
    console.log('Приемлемый результат, но можно лучше.');
} else if (score >= 60) {
    console.log('Минимально допустимый результат. Возможно, следует лучше подготовиться и пройти тест заново.');
} else {
    console.log('К сожалению, результат теста неудовлетворительный. Подготовьтесь лучше и повторите попытку!');
}

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

// если и condition1, и condition2 равны false, 
// то ни один код в фигурных скобках в этом примере не выполнится  
if (condition1) {
    ...
} else if (condition2) {
    ...
}

Конструкция if else широко используется и в функциях:

function getDiscount(price) {
    let discount;

    if ((price > 0) && (price < 50)) {
      discount = 5;
    } else if ((price >= 50) && (price < 100)) {
      discount = 10;
    } else if (price >= 100) {
      discount = 20;
    } else {
      discount = 0;
    }

    return discount;
}

console.log(getDiscount(0)); // 0
console.log(getDiscount(25)); // 5
console.log(getDiscount(90)); // 10
console.log(getDiscount(250)); // 20

В примере выше функция getDiscount принимает один параметр — цену. На основе цены функция вычисляет значение скидки с помощью if else и возвращает подходящее значение.

Далее поговорим об альтернативном и более компактном по сравнению с if else способе получения значения по условию — тернарном операторе.

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

В JavaScript, как и в других языках программирования, существует специальный условный оператор, который позволяет получить одно из двух значений на основе предоставленного условия — тернарный оператор.

Синтаксис тернарного оператора довольно прост:

condition ? expressionIf : expressionElse

Оператор проверяет условие condition. Если оно истинно (true), то оператор возвращает результат выражения expressionIf, иначе (false) — результат expressionElse. Тернарный оператор с конструкцией if else имеют много общего. Некоторые условия с if else можно переписать с помощью тернарного оператора. Вопросительный знак (?) в синтаксисе условного оператора идентичен оператору if в конструкции if else, а двоеточие (:) — оператору else.

Например, возьмем такой код:

let message = '';
if (winScores > 125) {
    message = 'Вы победили!';
} else {
    message = 'Вы проиграли!';
}

Запись примера выше с помощью тернарного оператора:

const message = winScores > 125 ? 'Вы победили!' : 'Вы проиграли!';

В обоих случаях проверяется условие winScores > 125. Если значение в переменной winScores более 125 (условие истинно), в переменную message запишется строка 'Вы победили!'. В обратном случае, если winScores равно или меньше 125 (условие ложно), в message будет установлена строка 'Вы проиграли!'. Как видно из примера, вторая запись выглядит более удобочитаемой.

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

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

const enoughMessage = count < 100 ? 'Пока мало' : null;

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

• Нужно получить одно из двух возможных значений при проверке условия.
• Условие и выражения короткие и простые.
• Использование тернарного оператора улучшает читаемость кода.

Далее рассмотрим еще один вариант разветвления исполняющегося кода, — условную конструкцию switch.

Конструкция switch

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

Синтаксис switch следующий:

switch (expression) {
    case value1:
      // первый блок кода
      break;
    case value2:
      // второй блок кода
      break;
      ...
    default:
      // блок кода по умолчанию
}

Эта конструкция сравнивает значение предоставленного выражения expression со значениями, указанными в case, по порядку. Если найдено равенство (то есть expression === valueN), выполняется код текущего case. Если совпадений не найдено, выполнится код в блоке default. Оператор break используется для прекращения работы switch в случае нахождения совпадения.

Пример:

const fruit = 'banana';

switch (fruit) {
    case 'apple':
      console.log('Это яблоко');
      break;
    case 'banana':
      console.log('Это банан');
      break;
    case 'orange':
      console.log('Это апельсин');
      break;
    default:
      console.log('Неизвестный фрукт');
}

В примере выше switch сравнивает значение в переменной fruit со значением каждого case сверху вниз. При сверке с первым случаем совпадения не найдено, так как строка 'banana' не равна 'apple'. Строки будут равны при проверке второго случая, поэтому результатом работы конструкции будет вывод в консоли разработчика строки 'Это банан'.

Важно отметить, что выражение сравнивается с использованием оператора строгого равенства (===). Это означает, что не только значение, но и тип данных должны совпадать, чтобы случай считался совпадающим.

Если вы не используете оператор break в операторе switch, выполнение кода будет продолжено до следующего оператора case независимо от того, совпал ли текущий case. Код будет продолжать выполняться до тех пор, пока не достигнет оператора break или конца блока switch. Такое поведение называется механизмом fall-through.

Вот пример того, что может произойти, если вы не используете оператор break в операторе switch:

let animal = 'dog';
let sound;

switch (animal) {
    case 'dog':
      sound = 'гав';
    case 'cat':
      sound = 'мяу';
    case 'lion':
      sound = 'ррр';
      break;
    default:
      sound = 'неизвестный звук';
}

console.log(sound); // 'ррр'

В этом примере, поскольку у первых двух операторов case отсутствует break, в переменную sound последовательно будут присваиваться значения трех case подряд, пока код не дойдет до break. В итоге мы получим значение ррр в переменной sound, независимо от значения переменной animal.

Однако механизм fall-through имеет свое применение в некоторых случаях:

let animal = 'dog';
let type;

switch (animal) {
    case 'dog':
    case 'cat':
      type = 'домашнее животное';
      break;
    case 'lion':
    case 'tiger':
    case 'bear':
      type = 'дикое животное';
      break;
    default:
      type = 'неизвестное животное';
}

console.log(type); // 'домашнее животное'

В этом примере мы намеренно опустили операторы break между первыми двумя и последними тремя операторами case. То есть если в переменной animal записано dog или cat, в переменную type присваивается значение 'домашнее животное', а при наличии в animal значений lion, tiger или bear, в type запишется значение 'дикое животное'.

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

Также стоит отметить, что значение по умолчанию default является опциональным и может быть опущено. В этом случае, если совпадений не найдено, программа просто переходит к следующему оператору после блока switch.

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

Заключение

Таким образом, в JavaScript есть несколько условных конструкций, с помощью которых вы можете создавать разветвление потока выполнения вашего кода. При выборе оптимальной конструкции для соответствующей ситуации обращайте внимание на их особенности. Например, если необходимо получить значение при простом выборе из двух вариантов, лучше воспользоваться тернарным оператором для меньшего количества кода и его удобочитаемости. А при наличии большого количества условий, хорошим выбором может быть конструкция switch, особенно если код требует обработки случая по умолчанию.