Тернарний оператор

JavaScriptJunior~1 хв читання

Оператор ?:, або тернарний оператор (ternary operator), - це скорочена форма умовного оператора if...else. Він дозволяє записати умову, перевірку і два варіанти результату в один рядок.

Синтаксис

javascript

умова ? вираз_якщо_істина : вираз_якщо_хибно

Принцип роботи

Спочатку обчислюється умова.
Якщо вона істинна (true), повертається перший вираз.
Якщо хибна (false), повертається другий вираз.

Приклад

javascript

const age = 20;

const message = age >= 18
  ? 'Доступ дозволено'
  : 'Доступ заборонено';

console.log(message); // "Доступ дозволено"

Тут age >= 18 - це умова. Оскільки вона істинна, повертається перша частина ('Доступ дозволено').

Те саме з `if...else`

javascript

let message;

if (age >= 18) {
  message = 'Доступ дозволено';
} else {
  message = 'Доступ заборонено';
}

Оператор ?: - це просто компактний запис if...else.

Приклад з функцією

javascript

function checkAccess(role) {
  return role === 'admin'
    ? 'Повний доступ'
    : 'Обмежений доступ';
}

console.log(checkAccess('admin')); // "Повний доступ"

Тернарний оператор повертає значення

На відміну від if, тернарний оператор - це вираз, а не просто команда. Тобто його можна використовувати прямо в присвоєнні, в аргументах функцій тощо:

javascript

console.log(5 > 3 ? 'Так' : 'Ні'); // "Так"

Вкладені тернарні оператори (обережно!)

Іноді трапляються вкладені тернарні вирази:

javascript

const age = 25;

const category = age < 13
  ? 'дитина'
  : age < 20
    ? 'підліток'
    : 'дорослий';

console.log(category); // "дорослий"

Працює коректно, але втрачає читабельність, тому для складних умов краще використовувати звичайний if...else.

Приклад з логікою у виразах

javascript

const user = { name: 'Tim', premium: true };

const label = user.premium ? 'Premium' : 'Standard';
console.log(label); // "Premium"

Комбінація з `&&` і `||`

Тернарник часто використовується разом з іншими логічними операторами:

javascript

const access = user && user.isAdmin ? 'OK' : 'DENIED';

Підсумок

Частина	Що робить
`умова`	Перевіряється на true/false
`? вираз1`	Виконується, якщо умова істинна
`: вираз2`	Виконується, якщо умова хибна

Приклади тернарного оператора

javascript

let score = 75;
let result = score >= 60 ? 'Склав' : 'Не склав';
console.log(result); // "Склав"

let color = (score > 90) ? 'green' : (score > 70) ? 'orange' : 'red';
console.log(color); // "orange"

Коротко

Запис	Значення
`a ? b : c`	Якщо `a` істинно → повернути `b`, інакше → `c`
Повертає	Результат обраного виразу
Можна використовувати в	Присвоєннях, функціях, шаблонах, JSX тощо

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.