Условные операторы: if и ?

Hola! Надеюсь, что ты прекрасно отдохнул на выходных и готов к порции новых знаний =)

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

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

Для этого в JavaScript существует два оператора: if и ? (да-да, именно, вопросительный знак).

Оператор if (если)

Сразу же к примеру:

let age = prompt('Какой сейчас век?', '');

if (age == 21) {
  alert('Верно, сейчас XXI век');
}

Поясню за promt. Это функция, которую предоставляет JS для того чтобы взаимодействовать с пользователем.

При запуске этого кода, у тебя на экране появится окно с вопросом: Какой сейчас век?. И ниже, в этом же окне будет доступно поле для ввода ответа.

Ответ, который ты введешь автоматически запишется в переменную age после нажатия кнопки OK. Кстати, что бы ты не ввел в это поле : строку, число, да что угодно – promt приведет это к типу String. Т.е, переменная age будет иметь тип String. Надеюсь, что ты понял, как работает promt.

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

if (age == 21) {
  alert('Верно, сейчас XXI век');
} 

Ты можешь видеть, что после оператора if идет выражение в скобках – это обязательное условие, чтобы оператор начал работать. В скобках мы указываем то выражение, которое хотим проверить на истинность (живой пример).

После скобок оператор if будет ожидать действие, которое нужно выполнить в том случае, если выражение в скобках будет истинным (читать про преобразование типов), т.е. выдаст нам логическое true. Здесь есть 2 варианта как написать это действие:

первый вариант:
if (age == 21) alert('Верно, сейчас XXI век');

второй вариант:
if (age == 21) {
   alert('Верно, сейчас XXI век');
}

Разница между этими двумя – присутствие или отсутствие фигурных скобок.

Первый вариант подразумевает, что при выполнении условия ты хочешь чтобы выполнилась только одна команда. Любая последующая операция, в таком случае, будет выполняться всегда, вне зависимости от условия. Пример:

if (age == 21) alert('Верно, сейчас XXI век');
alert('Я буду появляться вне зависимости от выполнения/невыполнения условия');

В данном случае, вторая функция alert будет выполняться всегда, вне зависимости от того, выполнилось условие age == 21 или нет (живой пример).

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

if (age == 21) {
   alert('Верно, сейчас XXI век');
   alert('Я буду появляться только если выполнится условие');
}

В этом случае обе команды выполнятся только в том случае, когда условие будет выполнено.

Всегда и везде, рекомендую тебе использовать фигурные скобки, даже, если ты хочешь выполнить только одну команду. Использовать фигурные скобки считается лучшей практикой (best practice).

У оператора if имеется младший братюня – оператор else. Теперь о нем.

Оператор else (иначе)

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

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

if (age == 21) {
   alert('Верно, сейчас XXI век');
} else {
   alert('Неверно! Ты ответил неправильно!');
}

Получается, что если мы ответим неправильно и условие не выполнится, т.е. вернет нам логическое false, то отработает блок else и у тебя на экране появится окно с сообщением: "Неверно! Ты ответил неправильно!" (живой пример).

Еще один момент – иногда нужно проверить несколько условий сразу же. Для этого можно использовать блок else if. Пример:

if (age == 21) {
   alert('Верно, сейчас XXI век');
} else if (age < 21) {
   alert('Ты указал век меньше, чем текущий');
} else if (age > 21) {
   alert('Ты указал век больше, чем текущий');
} else {
  alert('Скорее всего, ты ввел не число');
}

Когда используется блок else if все условия проверяются поочередно друг за другом сверху-вниз. Если какое-либо условие выполняется, то все дальнейшие условия игнорируются (живой пример).

Оператор '?'

Этот оператор называют тернарным (состоящим из трех частей). Это единственный оператор, который имеет 3 операнда.

Зачем этот оператор нужен? Представь ситуацию, что тебе нужно записать значение в переменную, но это значение зависит от условий.

Используя условный оператор if мы можем это сделать так:

let temperature = prompt('Сколько градусов за окном?', '');
let weather = null;

if (temperature >= 0) {
   weather = 'больше 0';
} else {
   weather = 'меньше 0';
}

alert('Температура сегодня: ' + weather);

Если температура больше, либо равна нолю, то в переменную weather мы записываем значение true, иначе записываем в нее значение false.

Не кажется ли тебе, что достаточно много кода ради такого простого действия.

Поэтому, чтобы такого не было придумали тернарный оператор ?.

Ведь если использовать его, получится намного короче:

let temperature = prompt('Сколько градусов за окном?', '');
let weather = (temperature >= 0) ? 'больше или равна 0' : 'меньше 0';

alert('Температура сегодня: ' + weather);

Первым операндом оператора ? является условие, которое мы проверяем. Затем ставится сам оператор ?, после него пишем то, что хотим присвоить в переменную weather в случае выполнения условия, а после : пишем то, что хотим присвоить в случае, если условие не выполнилось.

Разберем поподробнее эту строку:

let weather = (temperature >= 0) ? 'больше 0' : 'меньше 0';

Следует читать и понимать эту строку так: ЕСЛИ temperature >= 0, ТО в переменную weather мы записываем значение 'больше 0', ИНАЧЕ записываем значение 'меньше 0' (живой пример).

Я выделил жирным 3 момента. При разборе таких выражений читай их именно так. Перед условием проговаривай слово ЕСЛИ, тернарный оператор ? заменяй на слово ТО, а знак : заменяй на слово ИНАЧЕ. Если запомнишь, то будешь без труда понимать эту конструкцию.

Согласись, что так код выглядит намного достойнее.

Также как и операто��ом if, тернарным оператором ? можно проверять несколько условий сразу. Усовершенствуем пример выше:

let temperature = prompt('Сколько градусов за окном?', '');

let weather = (temperature > 0) ? 'больше 0' : 
    (temperature == 0) ? 'равна 0' : 
    (temperature < 0) ? 'меньше 0' : 
    'Ты точно ввел только цифры? =)';

alert('Температура сегодня: ' + weather);

Выглядит, наверное немного страшно (живой пример). Но, поверь, тут опять нет ничего страшного) Хотя, признаюсь честно, что когда я только начинал постигать JS, то эта конструкция вселяла в меня некий ужас, так как мне казалось, что в этом очень просто запутаться. Но, оказалось, все намного проще.

Здесь мы использовали тернарный оператор аж целых 3 раза. Сейчас объясню, как это работает с множественными условиями.

let weather = (temperature > 0) ? 'больше 0' : 
    (temperature == 0) ? 'равна 0' : 
    (temperature < 0) ? 'меньше 0' : 
    'Ты точно ввел только цифры? =)';

Этим кодом мы говорим JavaScript-у: если переменная (temperature > 0) , то присвой в переменную weather значение 'больше 0'. Если это не так, то проверь условие (temperature == 0) и если оно истинно, то присвой в переменную weather значение 'равна 0'. Если и это условие не проходит, то мы просим JS проверить следующее условие (temperature < 0) и в случае его выполнения присвоить значение 'меньше 0'. Ну, а если все условия проверены, но ни одно не оказалось истинным, мы просим, чтобы JS записал в переменную weather значение 'Ты точно ввел только цифры? =)'.

Думаю, что на сегодня хватит. В статье везде оставил ссылки на куски кода в онлайн-редакторе и подписал их как "живой пример". Ты можешь перейти по ссылке, посмотреть код и запустить его нажав кнопку Run

Домашнее задание

1. Что выведется на экран, если выполнить этот код:

if ('') {
  alert('1');
}

2. Используя if .. else, напиши код, который задаст вопрос пользователю(с помощью prompt()) и примет ответ. В зависимости от ответа, выведи на экран с помощью alert(): а) если пользователю больше или равно 18, то выведи: "разрешено посещение сайта" б) если пользователю меньше 18, то выведи: "запрещено посещать сайт"

3. Потренируйся самостоятельно с тернарным оператором ?

Выполненным домашним заданием вы можете поделить в комментариях к этому посту.