Условные операторы в JavaScript
Как и в большинстве языков программирования, в JavaScript (ECMAScript) есть ряд условных операторов. Они позволяют выполнять различные действия в зависимости от некоторого условия.
Например, пользователь вводит свой возраст. Если введенный возраст больше 18, показываем содержимое страницы. Иначе выводим предупреждение о том, что доступ к странице запрещен.
JavaScript поддерживает несколько условных операторов:
- Условный оператор if..else
- Тернарный оператор ?:
- Оператор выбора switch
Каждый из операторов наиболее эффективен в разных ситуациях. Самый распространенный – первый вариант, условный оператор if..else. Он позволяет проверить некоторое условие и в зависимости от этого выполнить либо один блок кода, либо другой.
Тернарный оператор ?: предоставляет более краткий способ получить значение в зависимости от условия. Он удобен тогда, когда нам не нужно выполнять много кода. Если мы хотим просто вернуть «значение 1» или «значение 2» – тернарный оператор является наилучшим выбором. Проблема в том, что код с его использованием не всегда удобно читать.
Оператор выбора switch подходит в тех ситуациях, когда у нас очень много вариантов выбора, и нужно выбрать один из них. У него есть свои недостатки, но в ряде случаев он оказывается полезным.
Оператор if
Условный оператор if..else в JavaScript в самом простом виде выглядит так:
if (условие)
инструкция
В данном случае условие может быть любым выражением. Оно вычисляется и преобразуется к логическому типу. Если результат преобразования равен true, выполняется инструкция. Если false – код пропускается.
У преобразования типов в JavaScript есть много своих особенностей. Рекомендуется в качестве условия использовать только те выражения, которые возвращают true или false. Например:
if (name == «Ivan»)
console.log(«Hello, » + name);
На самом деле, ложных значений в языке JavaScript не очень много. Если бы в предыдущем примере переменная name была равна строке «Anton», сравнение name == «Ivan» вернуло бы значение false. При преобразовании к логическому типу значение false принимают следующие значения:
- 0
- «» (пустая строка)
- null
- undefined
- NaN
Все остальные значения становятся true. Важно, что любой объект или массив в таком контексте также равны true – даже если это пустой объект {} или массив []:
if ([]) {
// выполнится всегда
}
В предыдущем примере использовались фигурные скобки { }. Как правило, именно такая форма записи применяется при использовании логических операторов. Это блок кода, который вмещает в себя любое количество инструкций. Если фигурные скобки опустить, к условному оператору будет относиться только первая инструкция после if (..):
if (role == «admin»)
ban(user1); // выполнится только в случае role == «admin»
ban(user2); // выполнится всегда
ban(everybody); // также выполнится всегда
По сути, написанный выше код аналогичен такому:
if (role == «admin») {
ban(user1);
}ban(user2);
ban(everybody);
Блок else
Вместе с инструкцией if может использоваться блок else. Он не является обязательным, но при этом очень удобен. Блок else выполняется в том случае, если условие в if оказалось ложным. Пример:
if (currentYear == 2021) {
console.log(«все хорошо»);
} else {
console.log(«2020 еще с нами»);
}
Есть возможность проверить и сразу несколько условий. Для этого используется конструкция else if:
if (city == «Moscow») { // 1
console.log(«Столица»);
} else if (city == «Saint-Petersburg») { // 3
console.log(«Северная столица»);
} else {
console.log(«Другой город»);
}
По сути, else if не является отдельной конструкцией языка JavaScript. В строке 1 происходит проверка условия в if. Если оно ложно, выполняется блок после else. А так как весь блок if..else в строке 3 является одной инструкцией, в фигурные скобки его заключать не нужно. Для наглядности код выше можно переписать так:
if (city == «Moscow») {
console.log(«Столица»);
} else {
if (city == «Saint-Petersburg») {
console.log(«Северная столица»);
}
else {
console.log(«Другой город»);
}
}
Таким образом, весь последний блок if..else является инструкцией, которая выполняется внутри первого else.
Количество блоков else if не ограничено. Однако если проверок слишком много, в некоторых случаях удобнее использовать switch.
Тернарный оператор ?:
Иногда в зависимости от результата выполнения if..else происходит присваивание значения некоторой переменной. Если это единственная операция, которую нужно произвести, удобным вариантом будет тернарный оператор ?:. Он позволит сократить код и может сделать его более читаемым.
Выглядит его использование так:
let value = условие ? значение 1 : значение 2;
Если выражение в «условии» приводится к true, вся конструкция возвращает значение 1 в качестве результата. Если к false, вернется значение 2. Пример:
let mark = (answer == «Albert») ? 5 : 2;
Если переменная answer равна «Albert», переменной mark присвоится число 5. Иначе – число 2.
При использовании традиционного оператора if..else код выглядел бы следующим образом:
let mark;
if (answer == «Albert) {
mark = 5;
} else {
mark = 2;
}
Как можно видеть, при использовании тернарного оператора код гораздо короче и понятнее. Правда, если есть несколько вложенных else if, применение тернарного оператора дает трудночитаемый код:
let price = (phone == «iPhone») ? 130000 : (phone == «Samsung») ? 70000 : (phone == «OnePlus») ? 30000 : (phone == «Xiaomi») ? 5000 : NaN;
Здесь логика такая же, как в else if. Если проверка дает false, вычисляется целое выражение после :, которое само может состоять из нескольких проверок. Правда, в таких ситуациях более уместен оператор switch.
Оператор выбора switch
Конструкция switch удобна тогда, когда нужно проверить одну переменную на равенство нескольким другим значениям. В базовом виде она выглядит так:
switch(x) {
case «val 1»:
..
break;case «val 2»:
..
break;default:
..
break;
}
Важно, что проверка на равенство здесь происходит без приведения типов – как при использовании оператора сравнения ===. При выполнении кода последовательно производится сравнение переменной x с каждым результатом выражения после слова case. Если сравнение дает true, выполняется код после двоеточия.
Стоит обратить внимание на ключевое слово break. Оно позволяет покинуть конструкцию switch после выполненного кода. Если его не использовать, выполнение продолжится до конца всего блока – будут выполнены все последующие case и default.
Пример кода с использованием оператора switch:
switch(position) {
case «Начальник»:
alert(«Здравствуйте, уважаемый шеф»);
break;
case «Заместитель»:
console.log(«Доброе утро, Иван Сергеевич»);
break;
default:
console.log(«Проходите»);
break;
}
