Посібник по JavaScript

Умовні оператори дають змогу перевірити деяку умову і залежно від результату перевірки виконати певні дії. Тут ми розглянемо оператор ?: або так званий тернарний оператор і операцію ? ?.

Тернарна операція

Тернарна операція складається з трьох операндів і має таке визначення:

[перший операнд - умова] ? [другий операнд] : [третій операнд]

Залежно від умови в першому операнді тернарна операція повертає другий або третій операнд. Якщо умова в першому операнді дорівнює true, то повертається другий операнд; якщо умова дорівнює false, то третій. Наприклад:

const a = 1;
const b = 2;
const result = a < b ? a: b;
console.log(result); // 1

Тут перший операнд представляє таку умову a < b. Якщо значення константи a менше значення константи b, то повертається другий операнд - a, тобто константа result дорівнюватиме a.

Якщо значення константи a більше або дорівнює значенню константи b, то повертається третій операнд - b, тому константа result дорівнюватиме значенню b.

Як операнди також можуть виступати вирази:

const a = 1;
const b = 2;
const result = a < b ? a + b : a - b;
console.log(result); // 3

У цьому прикладі коду перший операнд являє собою ту саму умову, що й у попередньому прикладі, однак другий і третій операнди представляють арифметичні операції. Якщо значення константи a менше значення константи b, то повертається другий операнд - a + b. Відповідно константа result дорівнюватиме сумі a і b.

Якщо значення константи a більше або дорівнює значенню константи b, то повертається третій операнд - a - b. Відповідно константа result дорівнюватиме різниці a і b.

Оператор ???

Оператор ??? (nullish coalescing operator) дає змогу перевірити значення на null і undefined. Він приймає два операнди:

лівий_операнд ?? правий_операнд

Оператор повертає значення лівого операнда, якщо воно НЕ дорівнює null і undefined. Інакше повертається значення правого операнда. Наприклад:

const result = "hello" ?? "world";
console.log(result); // hello
console.log(0 ?? 5); // 0
console.log("" ?? "javascript"); // "" - порожній рядок
console.log(false ?? true); // false
console.log(null ?? "not null"); // not null
console.log(undefined ?? "defined"); // defined
console.log(null ?? null); // null
console.log(undefined ?? undefined); // undefined

Оператор ??=

Оператор ? ? має модифікацію у вигляді оператора ? ?=, який також дозволяє перевірити значення на null і undefined. Він приймає два операнди:

лівий_операнд ??= правий_операнд

Якщо лівий операнд дорівнює null і undefined, то йому присвоюється значення правого операнда. Інакше лівий операнд зберігає своє значення. Наприклад:

const message = "Hello JavaScript";
let text = "Привіт, робота!"
text ??= message;
console.log(text); // Hello work!

Тут змінна text не дорівнює null або undefined, тому вона зберігає своє значення. Зворотний приклад:

const message = "Hello JavaScript";
let text = null;
text ??= message;
console.log(text); // Hello JavaScript

Тут змінна text дорівнює null, тому за посередництвом оператора ??= вона отримує значення змінної message.