04. Основы JavaScript (часть 3)

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

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

if

Оператор использует конструкцию типа if(…) {…}. В круглые скобки заключают какие-то условия, в фигурных располагаются действия, которые должны выполнится при соблюдении условий.

let age = 18;

if (age >== 18) {
  alert('Welcome');
}

Как это работает. Оператор if вычисляет выражение и преобразует результат к логическому типу. Действие в фигурных скобках выполняется, если условие истинно (то есть true). В нашем примере это происходит следующим образом:

1. Создаем переменную age и присваиваем ей значение 18.
2. В круглых скобках проверяется условие, а точнее соответствует ли переменная age условию больше и равно. В нашем случае да, соответствует.
3. Так как условие отработало, возвращается true.
4. Выполняется действие в фигурных скобках — вывод диалога.

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

let currentYear = year = 2020

if (currentYear) {
  alert('This is worst year in my life');
}

Такой подход удобно использовать, когда нужно использовать большую цепочку вычислений, которую проще будет сделать вне оператора if.

else

Необязательный блок, который выполняется если условие ложно.

let age = 18;

if (age >== 18) {
  alert('Вы - совершеннолетний!');
} else {
  alert('Вам нужно подрасти!');
}

else if

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

let year = prompt('В каком году появилась спецификация ECMASctipt-2015?',''); 
// здесь используется ввод строки пользователем, его мы разберём позже

if (year < 2015) {
  alert('Это рано..');
} else if (year > 2015) {
  alert('Это поздно..');
} else {
  alert('Верно!');
}

Тернарный оператор «? :»

Неравный оператор позволяет написать конструкцию if в более коротком виде.

Выглядит конструкция так:

let result = условие ? значение1 : значение2

Сначала вычисляется условие, если истина, тогда возвращается значение1, если ложно — значение2. Напишем пример на базе верхнего с конструкцией if else.

let accessAllowed = (age >== 18) ? alert('Вы - совершеннолетний!') : alert('Вам нужно подрасти!');

Логические операторы

В JavaScript есть три логических оператора: || (ИЛИ), && (И) и ! (НЕ).

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

|| (ИЛИ)

Оператор пишется как двойной символ вертикальной черты — ||

let result = a || b

Оператор находит первое истинное значение.

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert('Офис закрыт'); // Единственное истинное значение - isWeekend
}

В приведенном примере есть условный оператор, в котором с помощью оператора ИЛИ происходит поиск истинного значения. Бывают и другое применение, приведенное в примере ниже.

let targetValue = value1 || value2 || value3;

В приведенном примере переменная targetValue получит первое истинное значение. Поиск значения происходит слева направо. Каждый операнд будет конвертироваться в логическое значение. Если результатом будет true, останавливается и возвращает изначальное значение операнда. В том случае, если все операнды окажутся ложными, тогда в качестве результата возвращается последний из них.

alert(null || 1); // 1 (Первое истинное значение)
alert(null || 0 || 1); // 1 (Первое истинное значение)
alert(undifined || null || 0); // 0 (все ложно, возвратится последний)

&& (И)

Оператор пишется как два амперсанда.

let result = a && b;

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert('The time is 12:30');
}

В примере оба значения возвращают true, поэтому мы увидим сообщение.

В отличии от оператора ИЛИ, И находит первое ложное значение.

if (1 && 0) { // вычисляется как true и false. Как известно, у оператора if условие должно быть истинным.
  alert('Сообщение'); // не выводится, так как результат ложный
}

Также как и ИЛИ, оператор находит первое ложное при нескольких подряд операндах.

let targetValue = value1 && value2 && value3;

В приведенном примере переменная targetValue получит первое ложное значение. Поиск значения происходит слева направо. Каждый операнд будет конвертироваться в логическое значение. Если результатом будет false, останавливается и возвращает изначальное значение операнда. В том случае, если все операнды окажутся истинными, тогда в качестве результата возвращается последний из них.

alert(1 && 0); // 0 (Первое ложное значение)
alert(1 && 5); // 5 (Первое ложное значение)

! (НЕ)

Оператор принимает один операнд. Сначала приводит операнд к логическому типу (true/false), а затем возвращает противоположное значение.

alert(!true); // false
alert(!0); // true

Двойной оператор НЕ используется для преобразования к логическому типу.

alert(!!'non-empty string'); // true, так как строка не пуста
alert(!!null); // false, так как null будет преобразовано в 0