Далее на странице...
Здесь начинается более интересная работа с кодом. Мы научимся принимать решения, а именно: работать с выражениями 'if-else'. Теперь код будет выглядеть более реальным.
Допустим нужно написать программу, которая проверяет можно ли молодой женщине (пусть ее имя Сара) получить водительские права или нет. Если можно, то нужно вывести эту информацию в консоль. А если нет, то нужно выяснить, сколько лет ей осталось, до момента получения разрешения на управление автомобилем.
В Европе официально можно начинать вождение с 18 лет. Допустим Саре 19 лет. И мы уже знаем, как сравнить это число с числом 18.
const age = 19;
const isAgeEnough = age >= 18;
Знак сравнения больше или равно включает также и 18. Таким образом, это выражение означает, что если возраст женщины 18 или более лет, то в результате мы получим истину - true. Если же возраст равен 17, 16 годам или еще меньше, то в результате мы получим ложь - false.
Оператор if
Таким образом, в результате выполнения выражения const isAgeEnough = age >= 18 мы имеем булеву переменную, которою можно использовать для принятия решений. Для этого в свою очередь используется оператор if. If переводится как 'если'.
Оператор if работает следующим образом.
Сначала нужно написать ключевое слово if и потом открыть скобки (), в которых содержится условие, которое анализируется.
Если условие возвращает истину, то есть если в круглых скобках содержится , то выполняется блок, заключенный в фигурные скобки {}. Это может быть любой код, который мы сюда впишем.
Пример 1.1
if (/* условие */) {
/* код, который будет выполняться, если условие истинно */
}
Теперь нам нужно составить условие. Как это сделать?
Под условием подразумевается то, что в итоге является логическим/булевым значением.
Поэтому в нашем случае в качестве условия будет фигурировать переменная isAgeEnough, которая, как мы уже выяснили, всегда является булевой переменной.
Итак, если значение переменной isAgeEnough всегда истинно - . То код, заключенный в фигурных скобках (какое-либо действие) будет выполняться. Если же оно ложно - , тогда действие не будет выполнено.
Пример 1.2
const age = 19;
const isAgeEnough = age >= 18; /* переменная isAgeEnough принимает значение true или false */
/* если true, то .... */
if (isAgeEnough) {
console.log('Sarah can start driving license');
}
Результат
Sarah can start driving license
В нашем случае условие выполняется - переменная isAgeEnough принимает значение . И в консоли мы увидим сообщение о том, что Сара может получить водительские права. Потому что ее возраст 19 лет. Это больше, чем 18.
То есть в примере: isAgeEnough = age >= 18 - это истина - .
И таким образом выражение if (isAgeEnough) звучит так: если isAgeEnough - истина, то выполняется действие в фигурных скобках, то есть в нашем случае, выводится строка в консоль. В данном случае - это одна строка, но их может быть и несколько.
Если переменной age присвоить другое значение, например 15, то в сравнении: isAgeEnough = age >= 18 - будет ложь - . И тогда код в фигурных скобках не будет выполняться.
Пример 1.3
const age = 15;
const isAgeEnough = age >= 18; /* переменная isAgeEnough принимает значение true или false */
if (isAgeEnough) {
console.log('Sarah can start driving license');
}
Результат
В результате мы ничего не увидим, но зато это означает, что наш код работает.
На практике условие всегда пишется сразу в круглых скобках if (age >= 18). Это более распространенное явление, нежели указывать в скобках переменную.
Пример 1.4
const age = 19;
if (age >= 18) { /* условие возвращает true или false */
console.log('Sarah can start driving license');
}
Результат
Sarah can start driving license
Это выражение if (age >= 18) возвращает или (истину или ложь). И от этого зависит, будет ли выполняться код, заключенный в фигурные скобки или нет. Так работает оператор if.
Оператор else
Вернемся к варианту задачи, когда возраст девушки меньше 18 лет. Потому что здесь мы можем сделать кое-что еще - добавить блок 'else'. Else переводится как 'иначе'.
Для этого нужно написать ключевое слово else сразу после первого блока 'if'. После ключевого слова else добавляется новый блок с фигурными скобками.
Пример 2.1
const age = 15;
if (age >= 18) {
console.log('Sarah can start driving license');
} else {
/* блок 'else' */
}
Как вы думаете, для чего нужен этот блок?
Так вот блок 'else' выполняется, когда условие if (age >= 18) возвращает ложь - .
Итак, в последнем примере, возраст девушки меньше 18 лет. Значит условие if (age >= 18) возвращает false. Поэтому мы знаем, что блок 'if' выполняться не будет. А блок 'else', наоборот, будет выполнен - это любой код, заключенный в фигурных скобках, после ключевого слова else.
Теперь, используя блок 'else', можно закончить с задачей: нам осталось выяснить, сколько лет осталось Саре до возможности получения водительских прав. В примере для построения строки используем шаблонные литералы.
Пример 2.2
const age = 15;
if (age >= 18) {
console.log('Sarah can start driving license');
} else {
const yearLast = 18 - age;
console.log(`Sarah is too young. Wait another ${yearLast} years`)
}
Результат
Sarah is too young. Wait another 3 years
В примере условие if (age >= 18) возвращает ложь - . А значит, выполняется код блока 'else', то есть код расположенный в фигурных скобках после ключевого слова else.
Следует иметь в виду, что блок 'else' не является обязательным. Сначала его не было и у нас все работало.
То есть если блока 'else' нет, и условие возвращает ложь, то JavaScript ничего не делает, а просто перемещается на строку, следующую после блока 'if'.
Теперь вы знаете, что такое условия в JavaScript и как работает выражение 'if', 'else'. Это одна из наиболее важных вещей в программировании.
Нам все время нужно будет принимать решения при работе с кодом, что, по сути, мы и сделали здесь. Мы смогли выполнить определенные части нашей программы при помощи составления условий.
Структура управления if-else
Утверждение/выражение 'if', 'else' - конструкция такого типа официально называется управляющая структура/структура управления.
Еще раз смотрим общий код этой структуры:
if(){
} else {
}
Управляющая структура/структура управления 'if', 'else'. Это название обосновано тем, что эта конструкция позволяет иметь больше контроля над выполнением кода.
Выражение 'if', 'else' означает, что код не будет выполняться по линейному пути.
В приведенных примерах Javascript не выполняет код линейно. Теперь мы можем контролировать блоки кода, который должен выполняться и который выполняться не должен. Это дает больше контроля/управляемости над работой кода. Вот почему это называется управляющая структура/структура управления.
Примеры конструкции if-else
Рассмотрим еще один пример работы с условиями посредством конструкции if else.
Создаем еще одну переменную и назовем ее birthYear - год рождения девушки.
const birthYear = 1991;
Что нужно сделать дальше? Это создать переменную с именем century, означающую "Век", в котором Сара была рождена. В данном случае 1991 год - это 20 век. Если год ее рождения, например, 2005, то соответственно - это 21 век.
Чтобы сделать это, воспользуемся снова выражением 'if', 'else'. При этом нам следует указать: если год рождения девушки меньше или равен 2000, то century = 20, что означает 20 век. Иначе 'else' переменная century = 21.
Пример 3.1
const birthYear = 1991;
if (birthYear <= 2000) {
let century = 20;
} else {
let century = 21;
}
console.log(century);
Результат
'Uncaught ReferenceError: century is not defined'
В результате мы видим ошибку. Переменная century не определена.
В данном случае переменную century нужно определить заранее, за пределами блока 'if', 'else' и сделать ее пустой. Это еще один пример того в чем состоят различия между ключевыми словами var, let и const. Эта тема будет рассмотрена глубже, но позже.
А сейчас нужно знать следующее: переменная, объявленная при помощи ключевого слова let внутри любого блока, не доступна за пределами блока. В нашем случае это переменная century внутри блока if{} или блока else{}. И она не доступна за пределами этих блоков, поэтому мы не можем вывести ее в консоль.
Итак, переменную century следует определить заранее - до конструкции 'if', 'else'. Смотрим, пример:
Пример 3.2
const birthYear = 1991;
let century;
if (birthYear <= 2000) {
century = 20;
} else {
century = 21;
}
console.log(century);
Результат
20
Теперь все работает. Сара рождена в 20 веке.
Проверяем код еще раз. Меняем год рождения:
Пример 3.3
const birthYear = 2002;
let century;
if (birthYear <= 2000) {
century = 20;
} else {
century = 21;
}
console.log(century);
Результат
21
И теперь все верно. Девушка рождена в 21 веке. Вторая часть условия - блок 'else' работает.
Пока не нужно волноваться/задумываться о том факте, что переменная century была объявлена за пределами блока. Здесь важно понимать логику работы конструкции 'if', 'else'.
Подводим итог
Итак, при работе с кодом мы можем принимать решения, используя конструкцию 'if', 'else'. Для этого:
1. Мы пишем ключевое слово if, затем открываем скобки (), в которых должно быть условие.
2. Условие - это по существу какой-либо код, который возвращает true или false (истину или ложь). В наших примерах - это выражение birthYear <= 2000. И это хороший пример условия. Потому что оператор <= будет возвращать или . Отсюда вывод: операторы сравнения/равенства мы можем использовать при составлении условий.
3. Если условие истинно, то выполняется блок кода в фигурных скобках {}, следующий за ключевым словом if. Код может быть любым, неважно, сколько строк он будет занимать.
4. Если условие ложно, то выполняется блок кода, следующий за ключевым словом else. В этом случае JavaScript пропускает первый блок кода - следующий за ключевым словом if.
5. Блок 'else' не является обязательным. Или же он может присутствовать, но не содержать код для выполнения - быть пустым.
Это в двух словах о том, как работают утверждения 'if', 'else'. Важно это понять.
В следующей статье нас ждет небольшая задача.
