Пошук уроків, статей та іншого контенту
Закріпіть використання тернарного оператора condition ? value1 : value2 на практичних прикладах. Дізнайтеся, коли він робить умовну логіку компактнішою, а коли краще використовувати звичайний if...else.
Тернарний оператор — це короткий спосіб записати просту умовну логіку.
Він має три частини:
condition ? value1 : value2condition — умова, яку потрібно перевірити;
value1 — результат, якщо умова істинна;
value2 — результат, якщо умова хибна.
Тернарний оператор повертає одне з двох значень, тому його зручно використовувати під час присвоєння змінній, повернення результату з функції або виведення повідомлення.
if...elseРозглянемо звичайну умовну конструкцію:
const age = 20;
let message;
if (age >= 18) {
message = "Доступ дозволено";
} else {
message = "Доступ заборонено";
}
console.log(message);Той самий код із тернарним оператором:
const age = 20;
const message = age >= 18
? "Доступ дозволено"
: "Доступ заборонено";
console.log(message);У другому прикладі змінній message одразу присвоюється результат перевірки.
Загальна форма:
const result = condition ? valueIfTrue : valueIfFalse;Наприклад:
const temperature = 25;
const weather = temperature > 20
? "Тепло"
: "Прохолодно";
console.log(weather); // ТеплоJavaScript спочатку перевіряє умову temperature > 20.
Якщо результат true, змінна weather отримує значення "Тепло".
Якщо результат false, змінна weather отримує значення "Прохолодно".
Тернарний оператор добре підходить для перетворення логічного значення на текст:
const isOnline = true;
const status = isOnline ? "Користувач онлайн" : "Користувач офлайн";
console.log(status); // Користувач онлайнТакож його можна використовувати для вибору класу, тексту кнопки або іншого значення:
const isMenuOpen = false;
const buttonText = isMenuOpen ? "Закрити меню" : "Відкрити меню";
console.log(buttonText); // Відкрити менюТернарний оператор часто використовують у функціях:
function getAccessMessage(age) {
return age >= 18
? "Ви можете переглядати цей контент"
: "Цей контент доступний лише повнолітнім";
}
console.log(getAccessMessage(25));
console.log(getAccessMessage(16));У цьому випадку функція повертає один із двох рядків залежно від значення age.
Уявімо, що магазин надає знижку постійним клієнтам:
const price = 1000;
const isRegularCustomer = true;
const finalPrice = isRegularCustomer
? price * 0.9
: price;
console.log(`Фінальна ціна: ${finalPrice} грн`);Якщо isRegularCustomer дорівнює true, ціна зменшується на 10%. В іншому випадку покупець сплачує повну ціну.
Зверніть увагу: тернарний оператор може повертати не лише рядки, а й числа, логічні значення, об’єкти та інші значення JavaScript.
const password = "javascript123";
const message = password.length >= 8
? "Пароль достатньо довгий"
: "Пароль має містити щонайменше 8 символів";
console.log(message);Властивість length повертає кількість символів у рядку. Якщо їх щонайменше вісім, користувач отримує повідомлення про успішну перевірку.
function getNumberType(number) {
return number % 2 === 0 ? "Парне число" : "Непарне число";
}
console.log(getNumberType(8)); // Парне число
console.log(getNumberType(5)); // Непарне числоОператор % повертає залишок від ділення. Якщо залишок від ділення на 2 дорівнює 0, число є парним.
Тернарний оператор можна використовувати всередині шаблонного рядка:
const userName = "Олена";
const isAdmin = false;
console.log(
`${userName} має роль: ${isAdmin ? "адміністратор" : "користувач"}`
);Результат:
Олена має роль: користувачЦе зручно, коли потрібно вставити одне з двох значень без створення додаткової змінної.
Іноді потрібно вибрати одне значення з кількох варіантів. Для цього можна використати вкладений тернарний оператор:
const score = 85;
const grade = score >= 90
? "Відмінно"
: score >= 75
? "Добре"
: score >= 60
? "Задовільно"
: "Незадовільно";
console.log(grade); // ДобреТакий запис працює, але його складніше читати. Для кількох умов зазвичай краще використати if...else if...else:
const score = 85;
let grade;
if (score >= 90) {
grade = "Відмінно";
} else if (score >= 75) {
grade = "Добре";
} else if (score >= 60) {
grade = "Задовільно";
} else {
grade = "Незадовільно";
}
console.log(grade); // ДобреТернарний оператор доречний, коли:
є одна проста умова;
потрібно вибрати одне з двох значень;
результат потрібно одразу присвоїти змінній;
потрібно повернути одне з двох значень із функції;
короткий запис залишається зрозумілим.
Наприклад:
const isAdult = age >= 18 ? true : false;Але в цьому випадку тернарний оператор взагалі не потрібен, оскільки сама умова вже повертає логічне значення:
const isAdult = age >= 18;if...elseЗвичайна умовна конструкція краща, коли:
потрібно виконати кілька інструкцій;
є більше ніж два варіанти;
умови складні;
використання тернарного оператора погіршує читабельність;
у кожній гілці потрібно змінити кілька змінних або виконати дії.
Наприклад:
const balance = 500;
let message;
if (balance >= 1000) {
message = "Покупку схвалено";
console.log("Застосовано спеціальну пропозицію");
} else {
message = "Недостатньо коштів";
console.log("Запропоновано поповнити баланс");
}
console.log(message);Переписувати такий код через тернарний оператор не варто, оскільки він призначений насамперед для вибору значення, а не для виконання складної послідовності дій.
Нижче наведено невелику програму, яка формує повідомлення про замовлення:
const orderAmount = 1200;
const isMember = true;
const discount = isMember ? 0.1 : 0;
const deliveryCost = orderAmount >= 1000 ? 0 : 100;
const total = orderAmount - orderAmount * discount + deliveryCost;
const membershipMessage = isMember
? "Для вас застосовано знижку 10%"
: "Знижка для учасників не застосована";
console.log(`Сума товарів: ${orderAmount} грн`);
console.log(membershipMessage);
console.log(`Доставка: ${deliveryCost} грн`);
console.log(`До сплати: ${total} грн`);У цьому прикладі тернарний оператор використано для трьох простих виборів:
визначення розміру знижки;
визначення вартості доставки;
формування повідомлення для клієнта.
:Тернарний оператор завжди має містити двокрапку між двома результатами:
const message = age >= 18 ? "Дозволено" : "Заборонено";Неправильний варіант:
// Помилка: відсутнє значення для випадку false
const message = age >= 18 ? "Дозволено";Умова записується перед ?, а два можливі результати — після нього:
const result = condition ? valueIfTrue : valueIfFalse;Наприклад:
const number = 10;
const result = number > 5 ? "Більше за 5" : "5 або менше";Такий код може бути важким для читання:
const message = age >= 18
? isMember
? "Повнолітній учасник"
: "Повнолітній користувач"
: "Неповнолітній користувач";Якщо умови починають вкладатися одна в одну, краще перейти до if...else або заздалегідь винести частини логіки в окремі змінні.
Тернарний оператор не слід використовувати для складних побічних ефектів:
// Такий запис складно читати
isLoggedIn ? console.log("Вхід") : console.log("Потрібно увійти");Зрозуміліший варіант:
if (isLoggedIn) {
console.log("Вхід");
} else {
console.log("Потрібно увійти");
}ifТернарний оператор є виразом, тому він повертає значення:
const result = isReady ? "Готово" : "Не готово";if є умовною конструкцією, яка керує виконанням інструкцій:
if (isReady) {
console.log("Готово");
} else {
console.log("Не готово");
}Створіть програму, яка:
має змінну userName;
має змінну hasNotifications;
за допомогою тернарного оператора створює повідомлення:
"У вас є нові сповіщення", якщо значення дорівнює true;
"Нових сповіщень немає", якщо значення дорівнює false;
виводить повідомлення разом з іменем користувача.
Приклад розв’язання:
const userName = "Андрій";
const hasNotifications = true;
const notificationMessage = hasNotifications
? "У вас є нові сповіщення"
: "Нових сповіщень немає";
console.log(`${userName}: ${notificationMessage}`);Тернарний оператор має форму condition ? value1 : value2.
Він перевіряє умову та повертає одне з двох значень.
Його зручно використовувати під час присвоєння змінної, повернення значення з функції або формування повідомлення.
Тернарний оператор добре підходить для коротких і зрозумілих умов.
Для складної логіки, кількох інструкцій або великої кількості умов краще використовувати if...else.
Вкладені тернарні оператори варто застосовувати обережно, щоб не погіршувати читабельність коду.