Тернарный оператор JS

Тернарный оператор — это короткая запись условного оператора if...else. Он есть во многих языках программирования. Часто применятся при написании кода, для упрощения в том случае, если вам не нужно делать несколько операций при выполнении условия

Синтаксис тернарного оператора в JS такой:

'ваше_условие' ? 'в_случае_true' : 'в_случае_false'

Кавычки конечно же ставить не нужно, это просто для наглядности.

Примеры

Давайте рассмотрим теперь на примере:

let isUserHaveAccess, age = 17;

if (age >= 18) {
  isUserHaveAccess = true;
} else {
  isUserHaveAccess = false;
}  

Теперь запишем то же самое с помощью тернарного оператора:

isUserHaveAccess = age >= 18 ? true : false

Это очень простой пример, даже его можно упростить и написать без использования тернарного оператора. Но сейчас о другом. Как вы видите переменной isUserHaveAccess мы присваиваем булево значение в зависимости от возраста пользователя.

age >= 18 это наше условие, а дальше мы в переменную присваиваем true или false в зависимости от того выполнилось условие или нет.

Это может быть и число и любой другой тип данных. Также это не обязательно должно быть присвоение какой-то переменной.

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

function checkNum(num) {
  return num >= 0 ? 'positive' : 'negative'
}

console.log(checkNum(10)); // 'positive'
console.log(checkNum(-1)); // 'negative'

В этом примере мы проверяем число большо оно или меньше нуля и если true, т.е. больше нуля — возвращаем строку 'positive', а если меньше нуля, т.е. условие не было выполнено — 'negative'

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

return (
  {isLoading ? <Loader /> : <MyComponent />}
)

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

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

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

(age > 18 && age < 65) ? true : false

Двойной тернарный оператор

Двойной (или вложенный) тернарный оператор можно сделать, но главное, чтобы это не вредило читабельности кода. Даже при выборе между тернарным оператором и классическим условием if...else всегда руководствуйтесь тем, что код должен оставаться читабельным (особенно если вы на проекте работаете не сам(-а).

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

let age = 25;
let string = age < 18
                ? 'ребенок'
                : (age > 18 && age < 65)
                    ? 'рабочий'
                    : 'пенсионер'

В таком случае лучше воспользоваться конструкцией if...else