Курс →React JS

для начинающих
от платформы StackDev.ru

Тернарный оператор (условный оператор Javascript).

Дата:
Javascript

Тернарный оператор ? : (также называют “условный оператор” и “вопросительный знак”) используется как сокращенная версия более привычного оператора условия 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// 'Отказываюсь от покупки!'

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

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