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

Java | Amber | Комментировать запись

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

Для примера рассмотрим онлайн-формы: если все поля содержат требуемую информацию, форму можно отправить; но если обязательные поля формы не заполнены, отправить ее не получится.

Для выполнения таких задач используются условные операторы, которые являются неотъемлемой частью всех языков программирования.

Условные операторы выполняют конкретное действие в зависимости от того, какой результат получила предыдущая задача – true или false.

Вот несколько примеров использования условных операторов в JavaScript:

• Проверка местоположения пользователя и переключение языка (в зависимости от страны).
• Отправка формы или отображение предупреждения рядом с незаполненными обязательными полями.
• Открытие выпадающего меню при событии клика (или его закрытие, если он уже открыт).
• Отображение рекламы алкогольных напитков, если пользователь достиг возраста употребления алкоголя.

Условные операторы являются частью логики, играют важную роль в принятии решений и управлении потоком компьютерной программы. Для наглядности условные операторы можно сравнить с серией книг «Выбери себе приключение».

В этом мануале вы ознакомитесь с условными операторами, ключевыми словами if, else и else if и тернарным оператором.

Оператор if

Основным условным оператором является оператор if. Оператор if оценивает выражение как истинное или ложное и выполняет действие только в том случае, если выражение возвращает true. В случае ложного результата оператор проигнорирует выражение, и программа перейдет к следующему разделу.

Оператор if – это ключевое слово if, условие в скобках и код, который нужно выполнить, в фигурных скобках.

if () {}

К примеру:

if (condition) {
// code that will execute if condition is true
}

Содержимое оператора if имеет отступы, а фигурные скобки, содержащие исполняемый блок кода, не заканчиваются точкой с запятой.

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

// Set balance and price of item
const balance = 500;
const jeans = 40;
// Check if there are enough funds to purchase item
if (jeans <= balance) {
console.log("You have enough money to purchase the item!");
}
You have enough money to purchase the item!

Баланс пользователя – 500. Пользователь хочет купить джинсы за 40. Используя оператор меньше или равно, мы можем проверить, меньше ли цена джинсов суммы средств на счете пользователя. Поскольку jeans <= balance оценивается как true, блок кода будет выполнен.

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

// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log("You have enough money to purchase the item!");
}

Поскольку phone <= balance оценивается как false, программа проигнорирует этот блок кода и перейдет к следующей задаче.

Оператор else

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

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

Оператор else пишется после оператора if и не имеет условий в круглых скобках. Синтаксис базового выражения if…else выглядит так:

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

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

// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log("You have enough money to purchase the item!");
} else {
console.log("You do not have enough money in your account to purchase this item.");
}
You do not have enough money in your account to purchase this item.

Поскольку условие if не было выполнено, код переходит к оператору else.

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

Выражения else if

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

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

if (condition a) {
// code that will execute if condition a is true
} else if (condition b) {
// code that will execute if condition b is true
} else if (condition c) {
// code that will execute if condition c is true
} else {
// code that will execute if all above conditions are false
}

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

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

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

Приложение будет следовать таким условиям:

• 90 и свыше – А.
• 80-89 баллов – B.
• 70-79 баллов – С.
• 60-69 баллов – D.
• 59 баллов и ниже – F.

Создайте файл grades.js и поместите в него простой набор операторов.

// Set the current grade of the student
let grade = 87;
// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
console.log("A");
} else if (grade >= 80) {
console.log("B");
} else if (grade >= 70) {
console.log("C");
} else if (grade >= 60) {
console.log("D");
} else {
console.log("F");
}
B

Сначала программа сравнит заданное значение с самым высоким баллом (больше или равен 90). После этого оператор else if проверит остальные оценки.

Заданное значение 87 также технически соответствует группам C, D и F, но программа остановится на первом соответствии условия и выведет B.

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

Тернарный оператор используется как сокращение оператора if … else.

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

(condition) ? expression on true : expression on false

В приведенном выше выражении сначала записывается условие, за ним следует символ ?. Первое выражение должно быть истинным, а второе – ложным. По сути, это оператор if…else с более компактным синтаксисом.

Для примера попробуйте создать программу, которая будет проверять, достиг ли пользователь 21 года.

Если да, программа выведет «You may enter», если нет, она выведет в консоль «You may not enter». Создайте файл age.js и добавьте в него код:

// Set age of user
let age = 20;
// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";
// Print output
oldEnough;
'You may not enter.'

Поскольку пользователю меньше 21 года, программа выведет «You may not enter».

 Заключение

Условные операторы позволяют управлять потоком программ. Они являются одним из основных составляющих большинства программ и присутствуют практически во всех языках программирования.