1. Что такое тернарный оператор?
Тернарный оператор (он же "тернарник", он же "условный оператор" — не путать с if) — это специальная конструкция в JavaScript, которая позволяет записать простейшее условие буквально в одну строку. По сути, это "короткая версия if-else", которая возвращает одно из двух значений в зависимости от условия.
Синтаксис:
условие ? выражение_если_истина : выражение_если_ложь
- Если условие истинно (true), результатом станет выражение_если_истина
- Если условие ложно (false), результатом станет выражение_если_ложь
Почему "тернарный"?
Потому что у него три части: условие, действие при истине, действие при лжи. Если с латинским не очень — не переживайте, это не экзамен по латыни, просто иногда программисты любят "умные" слова.
Пример:
let age = 18;
let access = age >= 18 ? 'Доступ разрешён' : 'Доступ запрещён';
console.log(access); // "Доступ разрешён"
2. Зачем нужен тернарный оператор?
Всё просто: чтобы не писать лишнего! Иногда условия бывают настолько короткими, что писать ради них целый if-else — всё равно что открывать банку с огурцами экскаватором.
Пример без тернарного оператора:
let isMember = true;
let price;
if (isMember) {
price = 100;
} else {
price = 150;
}
console.log(price); // 100
Тот же код с тернарным оператором:
let isMember = true;
let price = isMember ? 100 : 150;
console.log(price); // 100
Видите? Меньше кода — тот же результат!
3. Синтаксис тернарного оператора
Давайте разберём синтаксис подробнее, чтобы не было путаницы:
let переменная = условие ? значение_если_true : значение_если_false
- условие — любое выражение, возвращающее true или false
- значение_если_true — результат, если условие истинно
- значение_если_false — результат, если условие ложно
Ещё один пример:
let temperature = 25;
let weather = temperature > 20 ? 'Тепло' : 'Прохладно';
console.log(weather); // "Тепло"
Внимание:
Тернарный оператор — это выражение, а не инструкция. Это значит, что его можно использовать везде, где можно подставить значение: при присваивании переменной, в аргументах функции, даже внутри шаблонных строк.
4. Тернарный оператор в шаблонных строках и выводе
Тернарник отлично сочетается с шаблонными строками (template literals):
let name = 'Вася';
let isAdmin = false;
console.log(`Привет, ${isAdmin ? 'администратор' : name}!`); // "Привет, Вася!"
В вашем учебном приложении, допустим, мы хотим поприветствовать пользователя по-особому, если он ввёл имя "admin":
let userName = 'admin'; // допустим, это ввёл пользователь
let greeting = userName === 'admin' ? 'Здравствуйте, главный!' : `Привет, ${userName}!`;
console.log(greeting); // "Здравствуйте, главный!"
Тернарный оператор для присваивания значения
В нашем "мини-приложении-анкетке" допустим, мы хотим определить, совершеннолетний ли пользователь, и вывести соответствующее сообщение:
let age = 17;
let message = age >= 18 ? 'Вы совершеннолетний' : 'Вы несовершеннолетний';
console.log(message); // "Вы несовершеннолетний"
5. Вложенные тернарные операторы
Иногда возникает соблазн использовать тернарный оператор "вложенно", то есть в одном из его выражений снова написать тернарник. Это можно, но злоупотреблять не стоит — код становится нечитаемым.
let score = 85;
let grade = score >= 90 ? 'Отлично'
: score >= 75 ? 'Хорошо'
: score >= 60 ? 'Удовлетворительно'
: 'Неудовлетворительно';
console.log(grade); // "Хорошо"
Как это читается:
- Если score >= 90 — "Отлично"
- Иначе, если score >= 75 — "Хорошо"
- Иначе, если score >= 60 — "Удовлетворительно"
- Иначе — "Неудовлетворительно"
Внимание:
Если вы сами не можете быстро понять, что происходит — возможно, лучше написать обычный if-else if-else. Тернарник хорош для простых случаев.
6. Тернарный оператор и side effects
Тернарный оператор возвращает значение, но не всегда его используют по назначению. Например, так делать НЕ надо:
isAdmin ? console.log('Привет, админ!') : console.log('Привет, пользователь!');
Это работает, но выглядит странно. Тернарный оператор — это всё-таки выражение для выбора значения, а не для вызова функций с побочными эффектами (side effects). Для таких случаев лучше использовать обычный if-else:
if (isAdmin) {
console.log('Привет, админ!');
} else {
console.log('Привет, пользователь!');
}
7. Тернарный оператор в реальном приложении
Давайте продолжим развивать наше учебное приложение. Теперь мы хотим, чтобы при выводе информации о пользователе программа показывала, совершеннолетний он или нет, используя тернарный оператор.
// Запросим у пользователя имя и возраст (псевдокод, позже будет через prompt)
let name = 'Ира';
let age = 16;
let status = age >= 18 ? 'совершеннолетний' : 'несовершеннолетний';
console.log(`Пользователь: ${name}, возраст: ${age} (${status})`);
// Пользователь: Ира, возраст: 16 (несовершеннолетний)
Если бы мы писали через if-else:
let status;
if (age >= 18) {
status = 'совершеннолетний';
} else {
status = 'несовершеннолетний';
}
Видно, что с тернарником — компактнее и проще.
8. Типичные ошибки при работе с тернарным оператором
Ошибка №1: Тернарный оператор — не замена любому if-else
Иногда новички пытаются впихнуть в тернарный оператор сложную логику, например, несколько действий подряд или длинные блоки кода. Тернарный оператор — это выражение, а не инструкция. Он предназначен для выбора значения, а не для выполнения большого количества команд. Если внутри тернарника у вас уже фигурные скобки и несколько строчек — лучше переписать на if-else.
Ошибка №2: Забыли двоеточие или вопросительный знак
Синтаксис тернарника строгий: условие ? если_да : если_нет. Если забыть один из знаков — получите синтаксическую ошибку. Например:
let x = a > b ? 'A' 'B'; // Ошибка! Нет двоеточия.
Ошибка №3: Тернарный оператор возвращает undefined
Если вы пишете тернарный оператор, но не используете его результат (например, просто пишете a > b ? 'A' : 'B'; без присваивания или вывода), то никакого эффекта не будет. Это выражение, а не команда.
Ошибка №4: Вложенные тернарники — нечитаемый код
Если вы вложили три и более тернарных оператора друг в друга, а коллеги начали задавать вопросы, что вообще происходит — возможно, пора переписать на if-else. Тернарный оператор — для простых случаев!
Ошибка №5: Использование тернарного оператора для side effects
Не стоит использовать тернарник для вызова функций с побочными эффектами (например, console.log). Для этого лучше подходит обычный if-else.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ