Умовні вирази в JavaScript

Умовні вирази працюють з умовами - виразами, які повертають значення типу 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; // невизначений
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; // невизначений
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