Тернарный оператор ? : (также называют “условный оператор” и “вопросительный знак”) используется как сокращенная версия более привычного оператора условия if..else...

Тернарный оператор принимает 3 аргумента:

1. Условие, которое мы проверяем.
2. 1-е значение - возвращается, если наше условие выполняется
3. 2-е значение – возвращается, если наше условие не выполняется

Синтаксис выглядит следующим образом:

условие ? 1-е значение : 2-е значение

Символ знак вопроса ? соответствует условию if, символ : соответствует else.

1const hungry = true;
2const eat = hungry ? 'время обеда' : 'придется поработать';
3console.log(eat);
4// возвращается 'время обеда'

Что выбрать: тернарный оператор или if

До появления “условного оператора” мы могли бы проверить данное условие, используя конструкцию if..else...

1const hungry = true;
2let eat;
3if (hungry) {
4  eat = 'время обеда';
5} else {
6  eat = 'придется поработать';
7}
8console.log(eat);
9// получаем 'время обеда'

В случаях, когда требуется проверить несколько условий, можно указать последовательность “тернарных операторов” в одной строке.

1const price = 55;
2const action =
3  price < 10
4    ? 'Покупаю!'
5    : price < 20
6    ? 'Требуем увеличить размер скидки'
7    : price < 50
8    ? 'Дороговато!'
9    : 'Отказываюсь от покупки!';
10
11console.log(action);
12// 'Отказываюсь от покупки!'

В данном примере мы последовательно проверяем несколько условий:

• Если стоимость продукта ниже 10 Рублей, то мы решаем купить его.
• В противном случаем двигаемся дальше и смотрим стоит ли выбранный товар менее 20 Рублей.
• Если товар стоит менее 20 Рублей, то требуем увеличить размер скидки!
• В противном случае переходим к следующему условию и проверяем стоит ли наш товар менее 50 Рублей.
• Если стоимость ниже 50 Рублей – то выражаем наше недовольство завышенной ценой – 'Дороговато'.
• Если стоимость оказывается выше 50 Рублей – то отказываемся от покупки товара.

Те же самые проверки можно произвести с помощью условий if..else:

1const price = 12;
2let action;
3
4if (price < 10) {
5  action = 'Покупаю!';
6} else if (price < 20) {
7  action = 'Требуем увеличить размер скидки';
8} else if (price < 50) {
9  action = 'Дороговато!';
10} else {
11  action = 'Отказываюсь от покупки!';
12}
13
14console.log(action);
15// 'Отказываюсь от покупки!'

Какой Вывод Можно Сделать?

Используя тернарный оператор, мы можем немного сократить наш код и записать нужное выражие в одну строчку.