Что такое тернарный оператор?

условный (тернарный) оператор - единственный оператор JavaScript, который принимает три операнда: условие, за которым следует вопросительный знак (?), Затем выражение для выполнения, если условие истинно, за которым следует двоеточие. (:), и, наконец, выражение, которое нужно выполнить, если условие ложно. - МДН

После описания тернарный оператор будет записан так:

condition ? ifTrue : ifFalse

В чем разница между тернарным оператором и оператором if?

Разница между ними в том, что If - это оператор, а тернарный оператор - это выражение; последний возвращает значение, а первый - нет.

Где использовать тернарный оператор?

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

Идеальным использованием тернарного оператора будет случай, подобный этому:

let patronAge = 18;
let canDrink = false;
if (patronAge <= 21){
canDrink = true;
}
console.log(canDrink)
//Do More Stuff

Мы можем сократить приведенный выше пример до следующего:

const patronAge = 18;
let canDrink = false;
canDrink = (patronAge <= 21 ? true : false);
//Do More Stuff

Но тернарный оператор можно использовать и более интересными способами.

Например, мы могли бы выборочно отобразить значок Font Awesome на основе логического свойства props с помощью этой строки:

<FontAwesomeIcon icon={props.dark ? faMoon : faSun} size=”1x” />

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

<div className={!props.dark ? “light” : “dark”}>
<! — Stuff Here →
</div>

Множественные операции

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

const patronAge = 18;
let canDrink = false;
patronAge <= 21 ? ((canDrink = true), alert(“Cannot Drink”))
: ((canDrink = false), alert(“Cannot Drink”));
//Do More Stuff

Вот где мы и попадаем в то, когда не следует использовать тернарный оператор.

Где не использовать тернарный оператор.

Тернарные операторы - это довольно мило, но они являются инструментами, которые следует использовать при необходимости. Точно так же, как вы не использовали бы молоток для выпечки торта, вам не следует использовать тернарный оператор во всех возможных ситуациях. То, что вы можете его использовать, не означает, что вы должны его использовать. В приведенном выше примере кода я показал, как можно разрешить выполнение нескольких операций в тернарном операторе, но приведенный выше код не очень удобочитаем. Весь смысл использования тернарного оператора состоит в том, чтобы избавиться от лишнего. Иногда попытки избавиться от лишних слов делают код менее читаемым. Мы можем взять приведенный выше код и реорганизовать его так:

const patronAge = 18;
let canDrink = false;
if (patronAge <= 21) {
canDrink = true;
alert(“Cannot Drink”);
} else {
canDrink = false;
alert(“Cannot Drink”);
}

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

Заключение

На мой взгляд, тернарные операторы должны заменить однострочные присвоения переменных и однострочные условные выражения при написании кода, как в моем случае. Но как только наш синтаксический сахар начинает мешать читабельности нашего кода, именно здесь нам следует подумать о возвращении к операторам if, if…else и if…else if.

Не стесняйтесь оставлять комментарии, если у вас есть какие-либо вопросы, предложения или что-то еще!