Тернарный оператор
В этой статье я расскажу о тернарном операторе в 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 предпочтительнее.