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

В этой статье я расскажу о тернарном операторе в JavaScript.

Что это такое и что он решает.

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

Сравнение.

// Traditional approach
if (condition) {
returnExpressionIfTrue ;
}
else {
returnExpressionIfFalse
}
// Ternary operator
(condition) ? returnExpressionIfTrue : returnExpressionIfFalse;

Вышеприведенный код показывает, насколько просто использовать тернарный оператор и насколько он понятен и чище.

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

Варианты использования тернарного оператора

  • Выполнение выражений на основе условий
  • Проверка ложных значений (Null или undefined)
  • Присвоение значений на основе условия

Выполнение выражений на основе условий

  • Операции могут быть легко условно выполнены с использованием этого оператора. Это значительно сократит количество строк кода.
// Ternary operator used to return function based on condition
const run = () => {
const hungry = true;
return hungry ? eat() : workout()
}
// The eat section will be executed as the condition is valid

Проверка нулевого или неопределенного значения

  • Другим распространенным случаем, когда можно использовать тернарный оператор, является установка значения по умолчанию, если переменная/объект пуста.
// Lets create a sample user object
const user = { name: 'Taylor Swift' };
// Assume you want to print the age of the above
console.log(user.age); // Returns undefined
// Using the ternary operator we can set a default value
console.log(user.age ? user.age : 20);
// 20 will be output as age is undefined

Присвоение значений на основе условия

  • Могут быть случаи, когда нам нужно присвоить какое-то значение переменной на основе определенного условия. Традиционный подход состоял бы в том, чтобы просто использовать оператор if else, но тернарный оператор делает его намного проще.
let response;
let message;
// lets assume that the response is a success
response = 'SUCCESS';
message = response === SUCCESS ? 'Response received' : 'Error in response';

Пример, когда тернарный оператор не является предпочтительным выбором

Использование вложенных троичных элементов

Вложенный тернарный оператор просто заменяет другой тернарный оператор внутри себя, который используется для оценки нескольких условий. Придумайте пример условия с несколькими операторами else if.

const mark = 65;
let grade =
mark >= 80 ? 'A' : mark >= 70 ? 'B' : mark >= 60 ? 'C' : mark >= 40
? 'D' : 'F';

В приведенном выше блоке кода показан тернарный оператор, используемый вместо нескольких операторов else if. Кто-то, кто очень хорошо знаком с тернарным оператором, мог бы понять это, но это очень сложно понять, и на это уйдет много времени. Для такого случая более предпочтителен случай switch или даже блоки else if.

Заключение

Тернарный оператор сделает жизнь очень удобной для любого разработчика, поскольку он короче, чем традиционные операторы if … else, и его легче понять тому, кто читает код. Однако имейте в виду, что могут быть случаи, когда операторы if … else или switch case предпочтительнее.