Тернарный оператор - это, по сути, сокращение от оператора if в Javascript. Это делает наш код более аккуратным и абстрагирует несколько строк кода.

Что такое тернарный оператор и как его использовать?

Вот определение документов Web MDN:

«Условный (тернарный) оператор - единственный оператор JavaScript, который принимает три операнда: условие, за которым следует вопросительный знак (?), затем выражение для выполнения, если условие истинно, за которым следует двоеточие (:), и, наконец, выражение для выполнения, если условие ложное. Этот оператор часто используется как сокращение для оператора if ».

Прочтите это еще раз пару раз, и если вы все еще не понимаете, не беспокойтесь. В этой статье я постараюсь разобрать тернарный оператор. Я столкнулся с тернарным оператором, когда впервые учился программировать. В то время, когда я впервые увидел его, я понятия не имел, как он работает, но мне понравилось, что он сократил решение проблемы Ruby, над которой я работал в то время. Чтобы понять это для себя, я начал заменять старые проблемы, которые я решил, чтобы попытаться лучше понять их. Только когда я поговорил с тренером, я действительно начал лучше понимать, что происходит под капотом.

Тернарный оператор рассматривает три вещи. Во-первых, это условие или, другими словами: начало оператора if. После условия стоит вопросительный знак (?). В качестве примера предположим, что мы хотим создать функцию или программу, которая фильтрует красные и зеленые помидоры, и позвольте вызвать функцию sortTomatoes. У нас будет три помидора: tomatoA, tomatoB и tomatoC. А затем предположим, что для сортировки красных и зеленых помидоров мы хотим, чтобы наша функция вела себя следующим образом: если помидор красный, значит, он спел, и мы пропускаем его через фильтр, а если он не красный, то он незрелый и поэтому не проходит через фильтр.

let tomatoA = {color : "red"}
let tomatoB = {color : "green"}
let tomatoC = {color : "red"}

const sortTomatoes = (tomato) => {
   if (tomato.color === "red"){
      // if it's true
      return "the tomato is ripe!"
   } 
      // if it's false
      return "Green Alert!" 
}

В приведенном выше коде мы видим наш пример обработки помидоров с помощью оператора if. Теперь давайте сделаем рефакторинг этого кода троичным.

const sortTomatoes(tomato){
   (tomato.color === red) ? "The tomato is ripe!" : "Green Alert!"
} 
//Results: 
//input: tomatoA => "The tomato is ripe!"
//input: tomatoB => "Green Alert"
//input: tomatoC => "The tomato is ripe!"

В приведенном выше коде у нас есть три операнда в тернарном выражении:
1) Условие (tomato.color === red)
2) Возвращаемое значение: “The tomato is ripe!” и
3) Возвращаемое значение: “Green Alert!”.

Так что же здесь происходит? В приведенном выше коде есть условие, которое необходимо выполнить. Вопрос (оператор ?) задает вопрос: «истинно или ложно условие?»; В данном случае «красный помидор?». Далее у нас есть два значения, разделенных двоеточием (:). В случае нашего примера выше, два значения являются строками. Значение слева от двоеточия возвращается, если условие истинно, а значение справа возвращается, если условие ложно. подключенные к функции sortTomato, мы получаем сообщение «Помидор спел!», возвращаемый нам, а так как помидорB является «зеленым», мы получаем «Зеленое предупреждение!» в качестве результата, когда у нас в качестве входных данных используется помидор B. Если вам интересно, «Что, если помидор любого другого цвета?» В этом случае выходом нашей функции будет «Зеленое предупреждение!». Пока помидор имеет любой цвет, кроме красного, в нашем условии он будет возвращаться как false, таким образом возвращая значение справа от двоеточия (:).

Надеюсь, это было полезно. Есть некоторая мысль о троичных - что, хотя они делают наш код более лаконичным, их трудно читать. Я намерен сделать так, чтобы через практику и многократное знакомство с троицами постепенно появлялись все чаще и чаще. Я закончу здесь.

Ресурсы, указанные ниже:
Условный (тернарный) оператор