2 / Условные конструкции

Пожалуй, самая важная конструкция любого языка программирования — это условная конструкция. Другими словами, ты говоришь JS, что нужно выполнить какое-либо действие при определённом условии.

Например, возьмём бытовую ситуацию, когда нам надо решить, брать или нет зонт. Если на улице идёт дождь, то мы берём зонт. Это и есть условие, при котором мы выполняем действие «‎взять зонт»‎.

Конструкция if (если)

Давай разберём следующую функцию:
function math(a, operation, b) {
if (operation == "-") {
return a - b;
}
return a + b;
}
Вызови функцию: math(5, "+", 3). В консоль выведется 8.

А теперь вызови: math(5, "-", 3). В консоль выведется 2.

Функция math принимает 3 параметра: a, b, как и раньше, но между ними добавился operation. В зависимости от значения operation функция либо сложит a + b, либо вычтет a - b.

Условная конструкция начинается со слова if (если).

Условие пишется в круглых скобках. Условие отвечает на вопрос «‎да»‎ или «‎нет» (истина или ложь).

Если ответ «‎да» (истина), то выполняется первый сценарий в фигурных скобках. А если «‎нет» (ложь), то пропускаем этот блок.

Обрати внимание, чтобы передать оператор в параметр, его необходимо писать, как строку, в кавычках "-". JS не поймёт, почему мы используем оператор вне математического выражения, и выдаст ошибку.

Итак, в функции выше у нас написано:
function math(a, operation, b) {
if (operation == "-") { // если operation равно "-"
return a - b; // вернуть a - b и завершить функцию
} // конец условия
return a + b; // вернуть a + b, если условие равно «‎нет» (ложь)
}
В условии мы написали двойное равно ==. Это не ошибка.

Дело в том, что в JS двойное равно — это оператор сравнения.
operation = "-" // это оператор присваивания
operation == "-" // это оператор сравнения
Результат выражения operation == "-" либо «‎да» (истина), либо «нет» (ложь).
Упражнения
2.1.1. Напиши в консоли браузера следующие выражения. Если браузер в ответ выведет true, значит, это истина. Если false — значит, ложь.
  • 1 == 1 Ответ: true
  • 1 == 2 Ответ: false
  • 1 = 1 Ответ: ошибка Uncaught SyntaxError: Invalid left-hand side in assignment — в JS нельзя присваивать числу другое значение
  • "a" == "a" Ответ: true
  • "a" == "b" Ответ: false
  • "a" = "a" Ответ: ошибка Uncaught SyntaxError: Invalid left-hand side in assignment — в JS нельзя присваивать строке другое значение
  • operation = "-" Ответ: "-" — в параметре operation записано значение "-" Далее в кэше браузера сохранилось значение operation = "-", теперь надо сравнить это значение с такой же строкой "-".
  • operation == "-" Ответ: true — в параметре operation хранится значение "-"
  • operation == "+" Ответ: false — в параметре operation хранится другое значение, потому ответ false (ложь).

Конструкция if-else (если-иначе)

Давай сделаем простейший калькулятор. Параметру operation присваиваем знак сложения, вычитания, умножения или деления.

Чтобы задать несколько условий, необходимо использовать конструкцию else if после закрывающей фигурной скобки.

А если надо обработать несколько условий? Если operation равен минусу "-" — вычитаем. Если звёздочке "*" — умножаем и так далее.

Для этого после закрывающей фигурной скобки можно написать слово else и следом ещё одно условие if:
function math(a, operation, b) {
if (operation == "-") {
return a - b;
}
else if (operation == "*") {
return a * b;
}
else if (operation == "/") {
return a / b;
}
else if (operation == "+") {
return a + b;
}
return "Ошибка: Неизвестная операция";
}
  • Вызывая math(4, "+", 2), выведется: 6
  • Вызывая math(4, "-", 2), выведется: 2
  • Вызывая math(4, "*", 2), выведется: 8
  • Вызывая math(4, "/", 2), выведется: 2
  • Вызывая math(4, "%", 2), выведется: "Ошибка: Неизвестная операция"
Упражнения
2.2.1. Напиши функцию, которая принимает названия животного (собака, кошка, свинья, утка), а возвращает, как это животное говорит (гав, мяу, хрю, кря).
  • Например: say("кошка");, возвращает: мяу
2.2.2. Напиши функцию, которая принимает название цвета на английском (red, green, blue, yellow), а возвращает на русском (красный, зелёный, синий, жёлтый).
  • Например: translate("blue");, возвращает: синий
2.2.3. Напиши функцию, которая принимает название страны (Россия, Украина, Беларусь, Казахстан), а возвращает название столицы (Москва, Киев, Минск, Нур-Султан).
  • Например: capital("Казахстан");, возвращает: Нур-Султан

Блок else

В задаче мы указали необходимые нам условия, но остались те условия, которые мы не обговорили. Чтобы их описать в JS, необходимо сократить конструкцию else if до else. Указав else, мы говорим JS: во всех других случаях используй это действие. Также else всегда пишется последним.
function math(a, operation, b) {
let result; // объявляем новую переменную "result"
if (operation == "-") { // если "operation" равен "-"
result = a - b; // записываем в переменную "result" разность a - b
}
else if (operation == "*") { // если "operation" равен "*"
result = a * b; // записываем в переменную "result" произведение a * b
}
else if (operation == "/") { // если "operation" равен "/"
result = a / b; // записываем в переменную "result" частное a / b
}
else { // иначе (если "operation" равен чему-то другому)
result = a + b; // записываем в переменную "result" сумму a + b
} // конец условия
return result; // возвращаем значение "result"
}
В указанном примере есть слово let. Оно служит для объявления новой переменной. Таким образом мы сообщаем JS, что далее в функции мы будем использовать переменную с именем result.

Если параметр operation равен строке с оператором минус "-", тогда сработает формула a - b и потом результат будет записан в переменную result.
function math(a, operation, b) {
let result; // объявляем новую переменную "result"
if (operation == "-") { // если "operation" равен "-"
result = a - b; // записываем в переменную "result" разность a - b
}
else if (operation == "*") { // если "operation" равен "*"
result = a * b; // записываем в переменную "result" произведение a * b
}
else if (operation == "/") { // если "operation" равен "/"
result = a / b; // записываем в переменную "result" частное a / b
}
else { // иначе (если "operation" равен чему-то другому)
result = a + b; // записываем в переменную "result" сумму a + b
} // конец условия
return result; // возвращаем значение "result"
}
Если в интернете или документации ты встретишь var, то это устаревший способ объявлять переменную и не рекомендуется к использованию. Используй let.
Упражнения
2.2.4. Напиши функцию, которая принимает имя и время суток (утро, день, вечер, ночь), а возвращает приветствие с обращением по имени (Доброе утро, <имя>!, Добрый день, <имя>!, ...). Если в качестве времени суток указать что-то неизвестное, функция возвращает Добрый день, <имя>!.
Например: hello("Маша", "вечер"); Возвращает: Добрый вечер, Маша! Например: hello("Ваня", "???"); Возвращает: Добрый день, Ваня!
2.2.5. Напиши функцию, которая принимает название населённого пункта и тип (мегаполис, город, село), а возвращает описание (<название> огромный мегаполис!, <название> красивый город!, <название> тихое село). Если в качестве типа указать что-то неизвестное, функция возвращает <название> неизвестный населённый пункт.
Например: descr("Москва", "мегаполис"); Возвращает: Москва огромный мегаполис!
Например: descr("Укромное", "???"); Возвращает: Укромное неизвестный населённый пункт
2.2.6. Напиши функцию, которая принимает сумму и название валюты (рубль, доллар, евро), а возвращает эту же сумму с добавленным символом валюты (, $, ). Причём символ рубля должен идти после числа, а символы доллара и евро — перед числом. Если в качестве валюты указать что-то неизвестное, функция возвращает просто сумму.
Например: money(1000,"доллар"); Возвращает: $1000
Например: money(1000, "рубль"); Возвращает: 1000 ₽
Например: money(1000,"донг"); Возвращает: 1000

Теперь добавим проверку деления на ноль:
function math(a, operation, b) {
let result;
if (operation == "-") {
result = a - b;
}
else if (operation == "*") {
result = a * b;
}
else if (operation == "/") {
if (b == 0) {
return"Ошибка: Делить на 0 нельзя";
}
else {
result = a / b;
}
}
else {
result = a + b;
}
return result;
}
Как видно, мы внутрь условия if (operation == "/") просто добавили ещё одно условие: если b == 0, вернуть строку с ошибкой.
Таким образом, в JS есть возможность вкладывать условия друг в друга.

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

В примерах выше много повторяющихся сравнений: если operation == "-", если operation == "*", если operation == "/".

JS поддерживает ещё одну условную конструкцию, которая может избавить нас от однотипных сравнений:
function math(a, operation, b) {
let result;
switch (operation) {
case"+":
result = a + b;
break;
case"-":
result = a - b;
break;
case"*":
result = a * b;
break;
case"/":
result = a / b;
break;
}
return result;
}
Вызови math(4, "+", 2) и проверь результат.

  • С помощью слова switch мы указываем, какую переменную будем проверять.
  • Далее в теле switch указываются варианты значений после селектора case. Например, строчка case "+": означает то же самое, что и operation == "+".
  • Слово break означает, что нужно прервать switch.

Если break не указывать, тогда браузер продолжит выполнять команды, указанные в следующем блоке case.

Вызови math(4, "%", 2).

  • Выведется undefined. Это означает, что switch не нашёл среди перечисленных селекторов case подходящий. Поэтому браузер не присвоил переменной result никакого значения и оно осталось неопределённым undefined.
  • Чтобы исправить отсутствие оператора %, добавим в switch специальный блок default, который сработает во всех других случаях.
function math(a, operation, b) {
let result;
switch (operation) {
case"+":
result = a + b;
break;
case"-":
result = a - b;
break;
case"*":
result = a * b;
break;
case"/":
result = a / b;
break;
default:
return"Ошибка: Неизвестная операция";
break; // break можно не писать, так как функция перестанет выполняться выше
}
return result;
}
Слово default является аналогом слова else в конструкции if-else. В случае, если никакое условие case не удовлетворено, выполнится этот блок.
Упражнения
2.3.1. Напиши функцию, которая принимает на вход число от до 4. Если — выводит строчку: "Продолжайте движение прямо". Если — выводит строчку: "Поверните направо". Если — выводит строчку: "Развернитесь". Если — выводит строчку: "Поверните налево".
2.3.2. Напиши функцию, которая принимает на вход один параметр — строку: Если "Привет!" — выводит строчку: "Привет!". Если "Как дела?" — выводит строчку: "Спасибо! У меня всё хорошо. А как у тебя дела?". Если "Как тебя зовут?" — выводит строчку: "Меня зовут JavaScript. А тебя?". В других случаях — выводит строчку: "Прости, но я не понимаю".
2.3.3. Напиши функцию, которая принимает на вход два числа. Первое число показывает, сколько раз надо умножить второе число само на себя. Функция возвращает результат умножения. Первое число может принимать значение от до 3, в противном случае выводится ошибка. Например, если первое число 3, а второе 5, то результат будет 5 * 5 * 5 * 5.

Операторы сравнения

Чтобы проверить, что переменная не равна какому-то значению, используется оператор != (не равно):
function div(a, b) {
if (b != 0) {
return a / b;
} else {
return "Ошибка: Делить на 0 нельзя";
}
}
Данная функция принимает два параметра и b.

Если b не равно 0, делим на и возвращаем результат.

Иначе возвращаем текст с ошибкой.

Чтобы проверить, что переменная больше или меньше какого-то значения, используются операторы и >. Прямо как в школьной математике.
function max(a, b) {
if (a > b) {
return a;
} else {
return b;
}
}
Данная функция принимает параметры и и возвращает наибольшее число.

Если a и b будут равны, функция вернёт значение b, потому что условие a > b будет ложно (a не больше b).

Для нестрогих равенств "меньше либо равно" и "больше либо равно" используются операторы <= и >=.
function max(a, b) {
if (a >= b) {
return a;
} else {
return b;
}
}
Данная функция похожа на предыдущую, но в случае равенства и b функция вернёт значение a.
Упражнения
2.4.1. Напиши функцию, которая принимает на вход число. Если оно положительное, его же и выводит. Если оно отрицательное, выводит его без минуса.
2.4.2. Напиши функцию, которая принимает на вход три числа и выводит их через пробел в порядке возрастания.
2.4.3. Напиши функцию, которая принимает возраст и пол (мж).
Если возраст меньше 12, возвращает строку: ребёнок. Если возраст меньше 20, возвращает строку: подросток. Если возраст меньше 30, для м возвращает строку: молодой человек, для ж — строку: девушка. Если возраст меньше 60, для м возвращает строку: мужчина, для ж — строку: женщина. Иначе для м возвращает строку: пожилой человек, для ж — строку: пожилая женщина.

Например: state(45, "м"); Возвращает: мужчина
2.4.4. Напиши функцию, которая принимает название предмета (физика, английский, математика) и балл за экзамен.
Если предмет — физика. Если балл меньше 85, возвращает строку на физика не поступил. Если балл больше либо равен 85, возвращает строку на физика поступил.

Если предмет — английский. Если балл меньше 80, возвращает строку на филолога не поступил. Если балл больше либо равен 80, возвращает строку на филолога поступил.

Если предмет — математика. Если балл меньше 75, возвращает строку на экономиста не поступил. Если балл больше либо равен 75, возвращает строку на экономиста поступил.

Например: exams("английский", 90); Возвращает: на филолога поступил
2.4.5. Напиши функцию, которая принимает 6 параметров: день, месяц и год рождения, сегодняшний день, месяц и год, а возвращает возраст (относительно сегодняшней даты).
Если месяц рождения меньше сегодняшнего, возвращает: сегодняшний год минус год рождения.

Если месяц равен сегодняшнему и если день меньше сегодняшнего, возвращает: сегодняшний год минус год рождения.

Если день больше сегодняшнего, возвращает: сегодняшний год минус год рождения и ещё минус 1.

Если день равен сегодняшнему, возвращает: сегодняшний год минус год рождения и добавляет строку: ! С днём рождения!.

Иначе возвращает: сегодняшний год минус год рождения и ещё минус 1.

Например, если сегодня 01.06.2020: age(1, 6, 1980, 1, 6, 2020); Возвращает: 40! С днём рождения!