что такое тернарный оператор js

Условное ветвление: if, ‘?’

Иногда нам нужно выполнить различные действия в зависимости от условий.

Инструкция «if»

В примере выше, условие – это простая проверка на равенство ( year == 2015 ), но оно может быть и гораздо более сложным.

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

Преобразование к логическому типу

Инструкция if (…) вычисляет выражение в скобках и преобразует результат к логическому типу.

Давайте вспомним правила преобразования типов из главы Преобразование типов:

Таким образом, код при таком условии никогда не выполнится:

…а при таком – выполнится всегда:

Блок «else»

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

Несколько условий: «else if»

Блоков else if может быть и больше. Присутствие блока else не является обязательным.

Условный оператор „?“

Иногда нам нужно определить переменную в зависимости от условия.

Так называемый «условный» оператор «вопросительный знак» позволяет нам сделать это более коротким и простым способом.

Этот пример будет делать то же самое, что и предыдущий:

Но скобки делают код более читабельным, поэтому мы рекомендуем их использовать.

Несколько операторов „?“

Поначалу может быть сложно понять, что происходит. Но при ближайшем рассмотрении мы видим, что это обычная последовательная проверка:

Вот как это выглядит при использовании if..else :

Нетрадиционное использование „?“

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

Не рекомендуется использовать оператор вопросительного знака таким образом.

Вот, для сравнения, тот же код, использующий if :

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

Источник

Принятие решений в вашем коде — условные конструкции

Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в JavaScript работают так называемые «условия».

Выбор одного условия.

Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых («стоит ли мне съесть одну печеньку или две?») до жизнеопределяющих («стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?»)

Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом «съесть одну печеньку» будет «все ещё буду чувствовать себя голодным», а результатом «съесть две печеньки» будет «буду чувствовать себя сытым, но мама меня поругает за то, что я съел все сладости».

Базовый if. else синтаксис выглядит как pseudocode:

Стоит заметить, что else и второй блок скобок < >не обязателен — следующий код так же будет работать:

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

И, наконец, иногда вы можете встретить код if. else без фигурных скобок в сокращённой форме:

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

Реальный пример

Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка. Родитель может сказать: «Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь». В JavaScript, мы можем представить это так:

Примечание: вы можете увидеть больше в полной версии этого примера на GitHub (также посмотреть как он работает вживую.)

else if

В предыдущем примере предоставлено два выбора, или результата — но что, если мы хотим больше, чем два?

Примечание об операторах сравнения

Примечание: Просмотрите материал по предыдущей ссылке, если вы хотите освежить свою память.

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

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

Несмотря на то, что весь код работает вместе, каждый условный оператор if. else работает полностью отдельно от другого.

Логические операторы: И, ИЛИ и НЕ

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

Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:

Давайте посмотрим на быстрый пример оператора ИЛИ:

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

Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами || (ИЛИ). Например.

В данном примере условие в if(. ) всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:

Оператор switch

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

В этом случае нам поможет оператор switch – он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:

Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант default необходим.

Пример оператора switch

Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:

Источник

Тернарный оператор в JavaScript: за, против, подводные камни

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Перевод первой части статьи «Rethinking the JavaScript ternary operator». Автор статьи — Джеймс Синклер, веб-разработчик из Австралии. В настоящее время Джеймс — Senior Software Engineer в Atlassian.

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

С учетом вышесказанного становится ясно, почему многие люди относятся к тернарному оператору с некоторой опаской. Да, конечно, он более краткий, чем if-предложение. Но вместе с тем тернарные операторы легко могут превратить код в нечитаемую абракадабру. Так что самый мудрый совет здесь — подходить к выбору с осторожностью. Отдавайте предпочтение if-предложениям, а тернарные операторы используйте только тогда, когда они не ухудшают читаемость.

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

Проблема использования тернарного оператора

Почему люди относятся к тернарному оператору с такой опаской? Он чем-то плох? Не может же быть такого, чтобы каждый отдельный программист проснулся однажды утром и подумал: «А возненавижу-ка я тернарный оператор!» Очевидно, что у людей есть какие-то причины для такой нелюбви. Давайте рассмотрим некоторые из этих причин.

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

На практике мы пишем что-то вроде этого:

Если первое выражение истинно, оператор возвращает значение второго выражения. В противном случае возвращается значение третьего. Для обособления этих выражений нам нужны два символа. Никакой другой оператор не составляется из нескольких символов.

Но это не единственная странность. Большинство бинарных операторов имеют дело с какими-то постоянными типами. Арифметические операторы работают с числами. Булевы операторы работают с булевыми выражениями. Побитовые операторы тоже работают с числами. Для всех них тип одинаковый с обеих сторон. Но у тернарного оператора и типы странные. Если применяется тернарный оператор, второе и третье выражение могут иметь любой тип. Но первое выражение интерпретатор всегда считает булевым. Это уникально. И странно для оператора.

Тернарный оператор нелегок для начинающих

Итак, тернарный оператор странный. Не удивительно, что люди критикуют его, утверждая, что он только путает новичков. Тут надо много всего держать в памяти. Если видите знак вопроса, надо поискать глазами двоеточие. И, в отличие от if-предложения, тернарный оператор трудно читать как псевдоанглийский. Допустим, у нас есть вот такое if-предложение:

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

Сложность для чтения

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

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

Конечно, мы можем немного улучшить ситуацию, добавив разделение строк. Prettier сделает это так:

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

Но читать все равно тяжело. Вообще программисту очень просто перейти некую грань и поместить слишком много всего в тернарные выражения. А чем больше вы в них помещаете, тем сложнее их читать.

Отдельная проблема — вложенные тернарные операторы. При их чтении очень легко пропустить двоеточие. В примере, приведенном выше, немного помогает разделение строк. Но вы легко можете промахнуться и сделать вот так:

Разумеется, это надуманный пример. Можно сказать, подмена тезиса. Я намеренно написал плохой код, чтобы проиллюстрировать проблему. Но суть остается. Программист запросто может написать нечитаемые тернарные выражения. Особенно со вложенными тернарными операторами. А читаемость имеет значение. Как сказал Мартин Фаулер, «Любой дурак может написать код, понятный компьютеру. Хорошие программисты пишут код, понятный людям».

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

Но насколько они безопасны?

Ненадежность if-предложений

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

И чем больше я размышляю над этой темой, тем больше склоняюсь к выводу, что ни одно из этих допущений не является верным. Есть вполне достойные причины использовать именно тернарный оператор. И эти причины не имеют ничего общего с написанием более короткого кода. Дело в том, что if-предложения и тернарные выражения — просто разные вещи. Они отличаются не немножко, а очень сильно.

Для иллюстрации давайте рассмотрим пример. Вот два варианта кода.

Первый — с if-предложением:

А второй — с тернарным оператором:

Но если посмотреть с другой стороны, эти примеры отличаются. И первую подсказку нам дает let в if-предложении.

В чем разница? Если говорить коротко, if-предложение — это предложение, а тернарное выражение — это выражение.

Это важная концепция. Выражение вычисляется в значение, а предложение — нет. Нельзя назначить результат предложения как значение переменной. Результат предложения нельзя передать в функцию в качестве аргумента. Предложение не вычисляется в значение. С помощью предложений можно сделать что-то полезное только потому, что их использование имеет побочные эффекты.

Что такое побочный эффект? Это то, что ваш код делает помимо вычисления значения. Варианты того, что он может делать:

Все это — побочные эффекты.

Тут читатель может вопросить: «Ну и что? Кому какое дело? В конечном итоге, мы же и пишем код ради этих побочных эффектов, верно? Важно то, что задача выполнена!»

С одной стороны — да, значение имеет именно то, что задача решена. Важно то, что мы имеем рабочий код. Тут не поспоришь. Но откуда вы знаете, что он рабочий? И откуда вы знаете, что ваша программа делает только то, что, по вашему мнению, должна делать? Как вы можете быть уверены, что она, помимо основной работы, не майнит Dogecoin и не стирает таблицы базы данных?

Это, кстати, основная идея функционального программирования. Мы достигаем уверенности в своем коде путем пристального внимания к побочным эффектам. Там, где это в принципе возможно, мы предпочитаем работать с чистыми функциями. Если функция чиста, мы знаем, что она не делает ничего, кроме вычисления и возврата значения.

Что это означает в контексте if-предложений и тернарных выражений? Это означает, что мы должны относиться к if-предложениям с известной опаской. Давайте еще раз рассмотрим пример, который уже приводили.

Можно ли сказать, что я советую никогда не пользоваться if-предложениями? Вовсе нет. Но нужно понимать, что они из себя представляют. Каждый раз, когда видите такое предложение, вы должны спрашивать себя, какой побочный эффект здесь есть. И если вы не можете ответить на этот вопрос, вы не понимаете этот код.

Рассматриваем тернарные выражения еще раз

Похоже, у нас есть веские поводы относиться к if-предложениям с подозрением. Но как насчет тернарных выражений? Всегда ли они лучше? И да, и нет. Все критические замечания, которые мы рассматривали ранее, никуда не делись. Но тернарные выражения по крайней мере имеют преимущество: они являются выражениями. Это означает, что они менее подозрительны, как минимум — в том, что касается побочных эффектов. Но побочные эффекты — не единственная причина, по которой стоит отдать предпочтение коду с выражениями.

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

Мы могли бы взять это выражение и передать его в качестве аргумента в функцию. Или скомбинировать его с другими выражениями, применив еще какие-нибудь операторы. Для осуществления сложных вычислений мы можем комбинировать выражения, пока не дойдем до нужного уровня сложности. Компоновка выражений — отличный способ написания кода.

Вы можете спросить, что в этом особенного. Ведь if-предложения тоже компонуются! Мы прекрасно можем вставить внутрь if-предложения цикл for. А в цикл for без всяких проблем можем вставить предложение case-switch. Используя предложения, мы можем создавать другие, более сложные предложения. Что же такого особенного в выражениях?

Преимущество выражений в том, что мы называем ссылочной прозрачностью. Это свойство означает, что мы можем взять значение выражения и использовать его в любом месте, где мы могли бы использовать само это выражение. И мы с полной уверенностью можем сказать, что результат будет таким же. Абсолютно. Всегда. 100%. Каждый раз.

Возможно, вы задаетесь вопросом, как это связано с компоновкой. Ссылочная прозрачность поясняет, чем компоновка предложений отличается от компоновки выражений. Я не придумал лучшей аналогии, чем кубики LEGO и пакеты в супермаркете.

Пакеты и кубики

Предложения компонуются так, как компонуются пакеты. Я прекрасно могу помещать одни пакеты в другие. Причем эти «другие» пакеты могут содержать и какие-то другие вещи. Я даже могу бережно завернуть каждый отдельный предмет в отдельный пакетик, а затем положить их стопочкой в другой пакет. Результат даже может быть эстетично привлекательным. Но все эти пакеты не имеют никаких реальных связей друг с другом. Их объединяет только вложенность. В их объединении нет никакого организационного принципа.

Аналогичным образом можно создавать вложенные предложения. То есть предложения с блоками, например, if-предложения с циклами for. Но они никак не будут связаны между собой. Эти блоки — просто контейнеры для чего угодно. В этом, конечно, ничего плохого нет. Но это другая компоновка, не такая, как у выражений.

Выражения скорее напоминают кубики LEGO. Способы их составления ограничены. Выступы сверху в одних кубиках соединяются с выемками снизу других. Будучи соединенными, кубики формируют новую фигуру. И эту фигуру можно заменить любой другой фигурой, имеющей ту же конфигурацию. Посмотрите на рисунок внизу. У нас есть две скомпонованные фигуры. И хотя они составлены из разных блоков, в результате получились фигуры одинаковой формы. Они взаимозаменяемы. Аналогично взаимозаменяемы выражение и его вычисленное значение. Не важно, как мы его вычислили, важен результат.

Да, эта аналогия не совершенна. Назначение пакетов в супермаркете и кубиков LEGO абсолютно разное. Но это лишь аналогия, она передает идею. Компоновка выражений имеет определенные преимущества. Мы не имеем этих преимуществ, когда компонуем if-предложения. А поскольку тернарный оператор это выражение, он имеет преимущество перед if-предложениями.

Означает ли это, что всегда следует отдавать предпочтение тернарным операторам? Они определенно лучше? К сожалению, ответ — нет. В JavaScript, как и в большинстве других языков, вы пользуетесь полной свободой вызывать побочные эффекты. Даже внутри выражений. Но цена этой свободы — необходимость постоянной бдительности. Вы никогда не знаете, где может проявиться неожиданный побочный эффект. Например:

Но мы не можем и полностью отказаться от тернарных операторов. Потому что if-предложения — то НЕ «то же самое, только более многословно». И когда вы видите в коде тернарный оператор, задумайтесь: возможно, у автора были причины сделать именно такой выбор. Возможно, у него были и другие резоны помимо краткости.

Конец первой части. Во второй части автор расскажет, как сделать if-предложения более безопасными, а тернарные выражения — более читаемыми.

Источник

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

Дата публикации: 2016-10-18

От автора: приветствую вас, друзья. В этой статье мы с вами рассмотрим еще один условный оператор JavaScript — это тернарный оператор. Этот оператор в некоторых случаях может быть хорошей альтернативой оператору if.

Итак, начнем. Тернарный оператор записывается вопросительным знаком (?). Этот оператор является альтернативным вариантов конструкции if…else. В чем же смысл использования тернарного оператора? Он позволяет немного сократить ваш код, фактически записывая условие в одну строчку кода.

Давайте посмотрим пример. Мы определяем простейшее условие проверки пароля из примера в предыдущей статье.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Условная конструкция заняла четыре строки кода, которые при желании можно сократить до двух строк:

Тернарный оператор позволяет сократить условие до одной строки:

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

Фактически тернарный оператор (?) спрашивает что-то и, если ответ Да, тогда выполнится код, который идет после оператора, если же ответ Нет, тогда выполняется код, который идет после двоеточия (:).

Ну и, конечно же, результат работы тернарного оператора JavaScript можно записать в переменную, чтобы работать с ним далее:

Обратите внимание, я заключил условие в скобки. Делать так не обязательно, но я специально это сделал, поскольку, как мне кажется, это немного улучшило читабельность кода. Вот, собственно, и все, что вам пока следует знать о тернарном операторе JavaScript. К слову, этот условный оператор, как и оператор if, есть не только в JavaScript. К примеру, они есть также и в PHP, при этом их синтаксис идентичен. Поэтому, поняв работу условных операторов JavaScript, можно считать, что вы знакомы с работой этих операторов и в PHP.

На этом мы завершаем нашу статью. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Источник

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

Тернарный (или условный) оператор существует во многих языках программирования — например, в C++, Java, Python, PHP и других. Разберёмся, как он работает в JavaScript.

Все операторы различаются по количеству аргументов, к которым они применяются. Например, существует оператор «-», который меняет знак числа на противоположный. Если такой оператор применяется к одному числу, то есть у него один аргумент — он называется унарным.

Кроме унарных операторов, существуют операторы с двумя аргументами — бинарные. Например, бинарный «+» складывает два аргумента:

И, наконец, тернарный оператор:

Это единственный оператор с тремя аргументами, что отражено в названии. Первый аргумент — это условие. Если оно истинно (равно true ), оператор вернёт второй аргумент — выражение1. В ином случае он вернёт третий аргумент — выражение2.

По сути оба фрагмента кода выполняют одно и то же действие — проверяют условие, а затем присваивают переменной первое или второе выражение в зависимости от истинности этого условия. Разница лишь в форме записи.

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

Значение, возвращаемое тернарным оператором, можно записать в переменную — этот вариант мы уже рассмотрели в примере выше. Кроме этого, его можно использовать в функциях при возвращении значения с помощью return :

Также возможно использование множественных тернарных операций. В этом случае несколько операторов «?» будут идти подряд:

Что выбрать: тернарный оператор или if

При выборе за основной показатель нужно взять читабельность кода. Чем код понятнее, нагляднее, тем удобнее его рефакторить и поддерживать. Тернарный оператор может как сделать код проще, так и необоснованно его усложнить. Это зависит от ситуации.

Посмотрим ещё раз на самый первый вариант, уже разобранный выше. Здесь переменной присваивается значение в зависимости от условия, и это пример грамотного использования тернарного оператора. В таком случае он позволяет избавиться от громоздкой условной конструкции и сделать код проще и короче.

Но есть варианты, когда использование оператора усложняет код. В большинстве случаев это относится к множественным тернарным операциям, о которых речь шла выше. Ещё к таким вариантам стоит отнести использование тернарного оператора для выполнения целых фрагментов кода в зависимости от условия, а не простого присвоения значения переменной. Рассмотрим пример:

Тем не менее не стоит отказываться от тернарного оператора. Он может помочь сделать код понятным и лаконичным. Главное — знать, в каких конкретно ситуациях его полезно использовать, и не злоупотреблять.

Источник