dr.Brain

doctor Brain

мир глазами веб-разработчика

Тернарные операторы в JavaScript

Что такое тернарные операторы в Javascript. Как их использовать. И почему они так полезны.

dr.Brain

время чтения 3 мин.

Photo by Jon Tyson on Unsplash

Тернарный или, другими словами, условный оператор - единственный оператор в JavaScript, принимающий три операнда. В определенной степени он является заменой условного оператора if

Давайте посмотрим на эту функцию:

function findBiggerNumber (num1,num2) {
    if (num1 > num2) {
        return num1;
    }
}
let biggerNumber = findBiggerNumber(someNumber1, someNumber2);

Нашли ошибку? Если нет, посмотрите еще. Замечание: Я спешил закончить проект, устал и, видимо поэтому, был невнимателен.

Итак, вернемся к функции, размещенной выше, основной целью которой является “найти наибольшее значение”. И она, как и положено, вернет num1, если значение этой переменной будет больше. Но я абсолютно забыл про num2 и вероятность того, что условие может быть и не выполнено. Для опытного разработчика такая ошибка выглядит очень странно, но Вы даже не представляете (а может быть и отлично представляете), как лего ее совершить, учитывая, что JavaScript не предъявляет никаких требований к значениям, возвращаемым функциями, и никогда не покажет Вам в таком случае никакого предупреждения.

А нужно было сделать следующее:

function findBiggerNumber (num1, num2) {
    if (num1 > num2) {
        return num1;
    } else {
        return num2;
    }
}
let biggerNumber = findBiggerNumber(someNumber1, someNumber2);

Примечание: в случае, если переменные равны, будет все равно, значение которой из них вернет функция, поэтому вернем num2.

Теперь все работает правильно. Однако, решение стало слишком сложным для столь незначительной задачи. Конечно, можно удалить пробелы и переносы строк, сделав код нечитаемым, но это неверный путь. Вот так, мы и подошли к необходимости воспользоваться тернарными операторами.

Тернарный означает три, в то время как бинарный - два. Действительно, тернарный оператор содержит три операнда. Значительное большинство операторов, с которыми мы постоянно работаем, являются бинарными - это +, -, *, >, < и другие. Для бинарных операторов нужно всего два операнда. В свою очередь, тернарный оператор содержит один дополнительный операнд. Вот отличный пример:

let biggerNumber = num1 > num2 ? num1 : num2

Небольшая строка. Но она выполняет абсолютно те же функции, что и рассмотренная выше функция и занимает значительно меньше места. Это удивительно.

Давайте разберемся более подробно:

{condition} ? {expression if true} : {expression if false}

или на русском:

{условие} ? {выражение1 если условие выполнено} : {выражение2 если условие не выполнено}

Первым операндом (компонентом) является условие. Второй операнд - выражение, которое возвращает значение, если условие выполнено (true). И, наконец, третий операнд - это альтернативное выражение, которое возвращает значение, если условие не выполнено (false).

Использование тернарного оператора вместо функции, приведенной выше, имеет два явных преимущества:

  1. В результате всегда возвращается значение. В противном случае JavaScript выдаст синтаксическую ошибку. Это отличная профилактика нашей глупости или невнимательности.
  2. Код становится более компактным без ущерба для читабельности.

Все просто - не так ли? Напомню: тернарные операторы лучше всего использовать для коротких простых условий и выражений. Для сложных логических решений оставьте не менее нужные и полезные операторы if или switch.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.