Пошук уроків, статей та іншого контенту
Навчіться записувати прості умовні вирази за допомогою конструкції condition ? value1 : value2. Розберіть ситуації, де тернарний оператор робить код компактнішим, а де звичайний if залишається зрозумілішим.
Тернарний оператор — це короткий спосіб записати просту умовну конструкцію if...else.
Його назва походить від кількості частин, які він має:
умова;
значення, якщо умова істинна;
значення, якщо умова хибна.
Загальний синтаксис:
condition ? valueIfTrue : valueIfFalseТернарний оператор є
присвоїти змінній;
повернути з функції;
передати у функцію;
використати в іншому виразі.
const age = 20;
const message = age >= 18 ? "Доступ дозволено" : "Доступ заборонено";
console.log(message);У цьому прикладі:
age >= 18 — умова;
"Доступ дозволено" — результат, якщо умова істинна;
"Доступ заборонено" — результат, якщо умова хибна.
Оскільки age дорівнює 20, результатом буде:
Доступ дозволеноТой самий код через if...else виглядав би так:
const age = 20;
let message;
if (age >= 18) {
message = "Доступ дозволено";
} else {
message = "Доступ заборонено";
}
console.log(message);Для такого простого випадку тернарний оператор робить код коротшим.
Розгляньмо окремо структуру:
condition ? valueIfTrue : valueIfFalseНаприклад:
const temperature = 25;
const clothes = temperature > 20 ? "футболка" : "куртка";
console.log(clothes);JavaScript перевіряє умову temperature > 20.
Якщо умова має значення true, результатом буде "футболка".
Якщо умова має значення false, результатом буде "куртка".
Тернарний оператор завжди вибирає лише одне з двох значень.
Тернарний оператор зручно використовувати, коли функція повинна повернути одне з двох значень.
function getAccessMessage(isLoggedIn) {
return isLoggedIn ? "Ви увійшли в систему" : "Будь ласка, увійдіть";
}
console.log(getAccessMessage(true));
console.log(getAccessMessage(false));Результат:
Ви увійшли в систему
Будь ласка, увійдітьЕквівалентний варіант через if...else:
function getAccessMessage(isLoggedIn) {
if (isLoggedIn) {
return "Ви увійшли в систему";
} else {
return "Будь ласка, увійдіть";
}
}Обидва варіанти правильні. Тернарний оператор тут підходить, тому що кожна гілка містить лише один простий результат.
Результат тернарного оператора можна передати аргументом іншій функції:
const isDarkTheme = true;
console.log(isDarkTheme ? "Темна тема" : "Світла тема");Також його можна використати під час формування повідомлення:
const userName = "Олена";
const isOnline = false;
const status = isOnline ? "онлайн" : "офлайн";
console.log(`${userName} зараз ${status}`);Результат:
Олена зараз офлайнЯкщо змінна вже містить true або false, її можна безпосередньо використати як умову:
const hasPermission = true;
const result = hasPermission ? "Операцію дозволено" : "Операцію заборонено";
console.log(result);Необов’язково писати так:
const result = hasPermission === true
? "Операцію дозволено"
: "Операцію заборонено";Перший варіант коротший і зрозуміліший.
Умова тернарного оператора не обов’язково має бути явно true або false. JavaScript перетворює значення до булевого типу.
const userName = "";
const greeting = userName ? `Привіт, ${userName}!` : "Ім'я не вказано";
console.log(greeting);Порожній рядок "" є falsy, тому буде вибрано другий результат.
Інший приклад:
const items = [];
const message = items.length > 0 ? "Список не порожній" : "Список порожній";
console.log(message);Тут ми явно перевіряємо довжину масиву, що робить умову зрозумілішою.
Тернарний оператор добре підходить, якщо:
потрібно вибрати одне з двох значень;
кожна гілка коротка;
умова проста;
код залишається легко читати.
Приклади:
const number = 7;
const type = number % 2 === 0 ? "парне" : "непарне";
const score = 82;
const grade = score >= 60 ? "складено" : "не складено";
const isAdmin = false;
const role = isAdmin ? "адміністратор" : "користувач";
console.log(type);
console.log(grade);
console.log(role);if...elseЗвичайний if...else зрозуміліший, якщо умова або дії складні.
Наприклад:
const balance = 150;
let message;
if (balance > 0) {
message = "На рахунку є кошти";
console.log("Можна виконати оплату");
} else {
message = "Рахунок порожній";
console.log("Потрібно поповнити рахунок");
}
console.log(message);У цьому прикладі кожна гілка виконує кілька дій. Тернарний оператор для такого коду був би менш читабельним.
Також if...else краще використовувати, коли потрібно перевірити кілька різних умов:
const score = 78;
let result;
if (score >= 90) {
result = "відмінно";
} else if (score >= 60) {
result = "добре";
} else {
result = "потрібно повторити матеріал";
}
console.log(result);Тернарні оператори можна вкладати один в один:
const score = 78;
const result = score >= 90
? "відмінно"
: score >= 60
? "добре"
: "потрібно повторити матеріал";
console.log(result);Такий код працює, але його складніше читати. Для кількох умов краще використати if...else if...else:
const score = 78;
let result;
if (score >= 90) {
result = "відмінно";
} else if (score >= 60) {
result = "добре";
} else {
result = "потрібно повторити матеріал";
}
console.log(result);Вкладений тернарний оператор допустимий лише тоді, коли структура залишається очевидною. Якщо для розуміння потрібно перечитувати вираз кілька разів, краще обрати if.
ifТернарний оператор призначений для вибору значення. Він не є універсальною заміною для всіх умов.
Невдалий приклад:
const isLoggedIn = true;
isLoggedIn
? console.log("Користувач увійшов")
: console.log("Користувач не увійшов");Цей код працює, але для виконання дій if...else зазвичай читається краще:
const isLoggedIn = true;
if (isLoggedIn) {
console.log("Користувач увійшов");
} else {
console.log("Користувач не увійшов");
}Якщо потрібно просто отримати значення, тернарний оператор доречний:
const isLoggedIn = true;
const message = isLoggedIn
? "Користувач увійшов"
: "Користувач не увійшов";
console.log(message);:У тернарному операторі обов’язково мають бути і ?, і ::
const age = 18;
const message = age >= 18 ? "Дорослий" : "Неповнолітній";Без : вираз буде синтаксично неправильним.
Правильна структура:
const isReady = true;
const status = isReady ? "готово" : "не готово";Після ? записується значення для істинної умови, а після : — значення для хибної.
Не варто записувати в одну конструкцію багато операцій:
const result = condition
? doSomething()
: anotherCondition
? doSomethingElse()
: defaultAction();У складних ситуаціях if...else зазвичай краще показує логіку програми.
Тернарний оператор повертає значення, тому його результат зазвичай потрібно використати:
const age = 25;
const category = age >= 18 ? "дорослий" : "дитина";Сам по собі тернарний вираз без використання результату часто не має сенсу:
age >= 18 ? "дорослий" : "дитина";Нижче програма визначає, чи може користувач оформити замовлення:
const userName = "Андрій";
const cartItems = 3;
const hasAddress = true;
const cartMessage = cartItems > 0
? `У кошику товарів: ${cartItems}`
: "Кошик порожній";
const deliveryMessage = hasAddress
? "Адресу доставки вказано"
: "Додайте адресу доставки";
const orderStatus = cartItems > 0 && hasAddress
? "Замовлення можна оформити"
: "Спочатку перевірте кошик і адресу";
console.log(`Користувач: ${userName}`);
console.log(cartMessage);
console.log(deliveryMessage);
console.log(orderStatus);Результат:
Користувач: Андрій
У кошику товарів: 3
Адресу доставки вказано
Замовлення можна оформитиТернарний оператор має форму condition ? valueIfTrue : valueIfFalse.
Він перевіряє умову та повертає одне з двох значень.
Тернарний оператор є виразом, тому його можна присвоювати змінній або повертати з функції.
Він добре підходить для коротких і простих умов.
Для кількох умов, складних дій або довгих виразів краще використовувати if...else.
Вкладені тернарні оператори варто застосовувати обережно, щоб не погіршувати читабельність коду.