Использование условного оператора ?: в JavaScript

Быстрый ответ

Условный оператор ? : в JavaScript — это тернарный оператор, который позволяет кратко представить логику if-else. Принцип его работы заключается в следующем шаблоне: условие ? истина : ложь. Например, определение победителя в зависимости от результатов сравнения a > b может быть записано так:

let winner = a > b ? 'a победил!' : 'b победил!';
// a и b – участники боксерского поединка!

В данном контексте переменная winner получит значение 'a победил!', если условие a > b верно, и значение 'b победил!', если нет.

Освоив этот оператор, вы сможете писать более чистый и выразительный код. Он особенно полезен при использовании во встроенных выражениях и может быть хорошей альтернативой менее кратким конструкциям if или цепочкам логических операторов "или" (||).

Расширенные методы использования: хитросплетения и подводные камни

Несмотря на свою простоту, при использовании тернарного оператора важно обеспечить читаемость кода. Рассмотрим некоторые вариации его использования и возможные ошибки:

Эффективное присваивание значений по умолчанию с помощью тернарного оператора

Для задания значений по умолчанию тернарный оператор можно использовать более лаконично, чем if-else:

let username = inputUsername ? inputUsername : 'гость';
// Альтернативный короткий вариант с использованием '||'
username = inputUsername || 'гость';
// Значение по умолчанию 'гость', как в гостевом зале 😉

Подробнее об этом расскажет наш спикер на видео

Цепочки и вложенность: следует использовать с осторожностью

Цепочки тернарных операторов для нескольких условий приемлемы, но могут привести к сложности кода:

let grade = score > 90 ? 'A+' :
            score > 80 ? 'A' : 
            score > 70 ? 'B' : 'C';
// Похоже на игру "угадай оценку" 🎮

Не только присваивание: применение тернарного оператора в действии

Тернарный оператор можно использовать для вызова функций в зависимости от определенных условий:

isMember ? extendSubscription() : displaySignUpForm();
// Проверяем статус пользователя: продлим подписку или выведем форму регистрации.

Правая ассоциативность: приоритет вычисления выражений

Тернарный оператор ассоциируется справа налево, что означает, что в цепочках он группируется с правой стороны на левую:

let category = age > 60 ? 'Старший' :
               age > 21 ? 'Взрослый' :
               age > 18 ? 'Молодежь' : 'Подросток';
// Свежий взгляд на определение возрастной категории. 😇

Сложные случаи: изучите всё об использовании тернарного оператора

Чтобы отточить навыки использования тернарного оператора, рассмотрим несколько сложных примеров:

Исключение избыточности

Избегайте повторений в блоках trueCase и falseCase и осуществите рефакторинг при возможности:

// Избегайте повторения, лучше упростите!
let fee = userType === 'ребенок' ? getFeeForChild() : getFeeForAdult();

// Элегантный вариант
let fee = getFee(userType);

Тернарный оператор и шаблонные строки

Используйте тернарный оператор с вместе с шаблонными строками для достижения большей выразительности кода:

let greeting = `Желаю вам ${new Date().getHours() > 17 ? 'хорошего вечера' : 'хорошего дня'}.`;
// Благодаря встроенному определению времени суток язык становится более выразительным! 🎉

Комбинирование с стрелочными функциями

В ES6 и новее тернарный оператор отлично совместим со стрелочными функциями:

const canVote = age => age >= 18 ? 'Да' : 'Нет';
// Функциональный вопрос "Можно ли мне голосовать?". 😉

Тернарный оператор: не всегда лучший выбор

Важно знать, в каких случаях тернарный оператор не является наилучшим решением. Если условия или выражения становятся слишком сложными, то предпочтительнее использовать традиционные управляющие структуры:

// В сложных случаях лучше применять блок if-else
let mode;
if (isRelaxed && hasTime()) {
   relax();
   mode = 'Режим отдыха';
} else {
   prepareToDoList();
   mode = 'Режим работы';
}
// Не забывайте, что смена труда и отдыха ведет к успешной жизни! 👨‍💻

Визуализация

Воспринимайте светофор как регулятор движения на перекрестке:

Светофор = 🚦 Поворотник
Выбор пути:
  – Зеленый свет (вперед): 🟢 ➡️ Путь A
  – Красный свет (стоп): 🔴 ➡️ Путь B

Условный (тернарный) оператор значительно упрощает эту систему:

let direction = lightIsGreen ? 'Путь A' : 'Путь B';

🚦 Он ведет ваш код как светофор!

На перекрестке программирования:
🟢 (условие выполняется) ➡️ 🛣️ (выберем путь A)
🔴 (условие не выполняется) ➡️ 🚧 (выберем путь B)

Полезные материалы

1. Условный (тернарный) оператор – JavaScript | MDN — детальное руководство MDN по условному (тернарному) оператору в JavaScript.
2. Условное ветвление: if, '?' — подробнейшее описание синтаксиса if-else и тернарного оператора на JavaScript.info, прекрасном ресурсе для изучения как основ, так и углубленных аспектов JavaScript.
3. Сравнения и логические операторы JavaScript — визуальные примеры сравнения и логических операторов, включая тернарный, представленные W3Schools.
4. Как применять условный оператор ? : в JavaScript? — Stack Overflow — дискуссии в сообществе Stack Overflow, где можно найти практические советы и примеры использования тернарного оператора.
5. JavaScript – Операторы — серия уроков от TutorialsPoint о разнообразных операторах JavaScript вместе с пояснениями, включая условный оператор.
6. ECMAScript 6: Нововведения: Обзор и сравнение — полезная статья для тех, кто хотел бы знать, как ECMAScript 6 (ES6) продолжает развитие JavaScript, включая стрелочные функции, которые часто используются вместе с тернарным оператором.
7. Как составлять условные выражения в JavaScript | DigitalOcean — глубокое исследование от DigitalOcean, которое поможет вам стать мастером написания условных выражений в JavaScript.