Условные выражения работают с условиями - выражениями, которые возвращают значение типа Boolean - true (условие не верно) или false (условие не верно). Есть два типа условных операций: операции сравнения и логические операции.
Операторы сравнения сравнивают два значения и возвращают значение true или false:
==
Оператор равенства сравнивает два значения, и если они равны, возвращает true, иначе возвращает false:x == 5===
Оператор тождественности также сравнивает два значения и их тип, и если они равны, возвращает true, иначе возвращает false:x === 5!=
Сравнивает два значения, и если они не равны, возвращает true, иначе возвращает false:x != 5!==
Сравнивает два значения и их типы, и если они не равны, возвращает true, иначе возвращает false:x !== 5>
Сравнивает два значения, и если первое больше второго, то возвращает true, иначе возвращает false:x > 5<
Сравнивает два значения, и если первое меньше второго, то возвращает true, иначе возвращает false:x < 5>=
Сравнивает два значения, и если первое больше или равно второму, то возвращает true, иначе возвращает false:x >= 5<=
Сравнивает два значения, и если первое меньше или равно второму, то возвращает true, иначе возвращает false:x <= 5Все операторы довольно просты, наверное, за исключением оператора равенства и оператора тождественности. Они оба сравнивают два значения, но оператор тождественности также принимает во внимание и тип значения. Например:
const income = 100; const strIncome = "100"; const result = income == strIncome; console.log(result); //true
Константа result здесь будет равна true, так как фактически и income, и strIncome представляют число 100.
Но оператор тождественности возвратит в этом случае false, так как данные имеют разные тип:
const income = 100; const strIncome = "100"; const result = income === strIncome; console.log(result); // false
Аналогично работают операторы неравенства != и !==.
Логические операции обычно применяются к значениям типа Boolean - true и false. Результат логических операций также обычно представляет значение типа Boolean - true или false.
Часто этот вид операций используется проверки условий. В JavaScript есть следующие логические операции:
Операция && возвращает true, если оба операнда возвращают true, иначе возвращает false:
console.log(true && true); // true console.log(true && false); // false console.log(false && false); // false
Нередко этот тип операций применяется, если надо проверить истинность двух условий, причем оба условия должны быть истины:
const money = 1000; const age = 21; // проверяем, что age больше 18 и money больше 100 const access1 = age > 18 && money > 100; console.log(access1); // true // проверяем, что age больше 18 и money больше 1000 const access2 = age > 18 && money > 1000; console.log(access2);
В данном случае константа access1 будет равна true, если одновременно и age больше 18, и money больше 100. То есть условно говоря, если челевеку больше 18 лет, и у него больше
100 денежных единиц, то открываем ему доступ. Здесь оба эти условий истинны, поэтому и access1 равна true.
А вот константа access2 будет равна true, если одновременно и age больше 18, и money больше 1000. Здесь второе условие не соблюдается, оно ложно, поэтому и access2 равна
false.
Операция || возвращает true, если хотя бы один из операндов равен true, иначе операция || возвращает false:
console.log(true || true); // true console.log(true || false); // true console.log(false || false); // false
Эта операция также нередко применяется для проверки двух условий, когда достаточно, чтобы только одно условий было истинным, например:
const money = 1000; const age = 21; // проверяем, что age больше 18 или money больше 1000 const access1 = age > 18 || money > 1000; console.log(access1); // true // проверяем, что age больше 22 или money больше 1000 const access2 = age > 22 || money > 1000; console.log(access2); // false
В данном случае константа access1 будет равна true, если одновременно или age больше 18, или money больше 1000. То есть условно говоря, если человеку либо больше 18 лет, либо
у него больше 1000 денежных единиц, то открываем ему доступ. То есть достаточно истинности одного условия. Здесь первое условие истинно, поэтому и access1 равна true.
А вот константа access2 будет равна true, если одновременно и age больше 22, и money больше 1000. Здесь ни первое, ни второе условие не соблюдаются, они ложны, поэтому и
access2 равна false.
Операция ! возвращает true, если операнд равен false, и возвращает false, если операнд равен true:
console.log(!true); // false console.log(!false); // true const isAlive = true; const isDead = !isAlive; console.log(isDead); // false
Выше писалось, что логические операции обычно в качестве операндо принимают значения Boolean - true или false, а результатом операций также обычно являются значения Boolean. Но это обычно, в рельности же операндами и результатами этих операций могут быть произвольные значения. Иногда JavaScript может автоматически преобразовать определенные значения в тип Boolean:
Значение | Во что преобразуется |
null | false |
undefined | false |
0 (в том числе значение NaN) | false |
1 (любое ненулевое значение) | true |
"" (пустая строка) | false |
"некоторый текст" (непустая строка) | true |
{} (любой объект) | true |
И если какие-то операнды не представляют значение Boolean, то в этом случае логические операции действуют в соответствии с некоторыми плавилами.
Если как минимум один операнд операции && не является значением типа Boolean, то выполняются следующие действия:
если первый операнд возвращает false (например, число 0, пустая строка, null, undefined), то операция возвращает первый операнд.
в остальных случаях возвращается второй операнд.
let isAlive; // undefined
let name = "Tom";
const result = isAlive && name;
console.log(result);
Здесь первый операнд операции && - переменная isAlive равна undefined (так как переменная не инициализирована), что при преобразовании к Boolean даст false,
поэтому операция возвратит значение переменной isAlive.
Еще несколько примеров:
console.log(false && "Tom"); // false
console.log("Tom" && null); // null
console.log(true && "Tom"); // Tom
Если один или оба операнда операции || не являются значениями Boolean, то операция выполняет следующие действия:
Если первый операнд оценивается как true (то есть не равен 0, пустой строки, null или undefined), то возвращается первый операнд
Во всех остальных случаях возвращается второй операнд
Примеры:
console.log(false || "Tom"); // Tom
console.log("Tom" || null); // Tom
console.log(true || "Tom"); // true
Если операнд операции отрицания ! не является значением Boolean, то выполняются следующие действия:
Если операнд - пустая строка, то возвращается true, если строка не пустая - то false
Если операнд - число 0, то возвращается true, для всех других чисел возвращается false
Если операнд - объект, возвращается false
Если операнд - значения null, NaN и undefined, возвращается true.
Примеры:
let isAlive; // undefined console.log(!isAlive); // true console.log(!null); // true console.log(!0); // true console.log(!10); // false console.log(!""); // true (пустая строка) console.log(!"Tom"); // false
Выше мы рассмотрели, что логические операции могут принимать значения произвольных типов, а не только Boolean. Казалось бы в этом нет особого смысла. Тем не менее подобные конструкции могут быть очень удобны, когда нам надо проверить условие и в зависимости от проверки выполнить то или иное действие. Например:
const age = 22;
age <= 17 && console.log("Вам меньше 18 лет. Доступ запрещен.");
age > 17 && console.log("Вам больше 17 лет. Доступ разрешен.");
Здесь в зависимости от значения константы age (которая представляет условный возраст) выводим на консоль ту или иную строку (условно в зависимости от возраста разрешаем или запрещаем доступ).
Напомню, что && возвращает второй операнд, если первый равен true. Сначала выполняется первая операцию &&
age <= 17 && console.log("Вам меньше 18 лет. Доступ запрещен.");
Здесь сначала проверяется первый операнд - выражение age <= 17. Если оно истинно (то есть если age меньше 18), то выполняем метод console.log().
Однако поскольку условие из первого операнда НЕ верно (так как age больше 17), поэтому не будет выполнять второй операнд, и операция возвратит false.
Аналогично работает вторая операция && за тем исключением, что она проверяет истинность выражения age > 17 (то есть age должно быть больше 17)
age > 17 && console.log("Вам больше 17 лет. Доступ разрешен.");
Здесь же условие из первого операнда верно, поэтому будет выполняться второй операнд. В итоге на консоль браузера будет выведена строка
Вам больше 17 лет. Доступ разрешен.
Аналогично для построения условных конструкций можно использовать операцию ||, но она возвращает второй операнд, если первый операнд равен false. То есть получается наоброт:
операция && возвращает второй операнд, если условие первого операнда верно, а || - если условие не верно. И мы могли бы переписать предыдущий пример с помощью операции || следующим образом:
const age = 12;
age <= 17 || console.log("Вам больше 17 лет. Доступ разрешен.");
age > 17 || console.log("Вам меньше 18 лет. Доступ запрещен.");
В JavaScript также есть ряд операций, которые сочетают логические операции с присвоением:
&&=
Аналогично выполнению a = a && b:
let x = true; let y = false; y &&= x; console.log(y); // false let c = false; let d = true; c &&= d; console.log(c); // false let a = true; let b = true; a &&= b; console.log(a); // true let e = false; let f = false; e &&= f; console.log(e); // false
||=
a ||= b эквивалентно выражению a = a || b:
let x = true; let y = false; y ||= x; console.log(y); // true let a = true; let b = true; a ||= b; console.log(a); // true let c = false; let d = true; c ||= d; console.log(c); // true let e = false; let f = false; e ||= f; console.log(e); // false