JavaScript – язык программирования, базирующийся на создании приложений и веб-сайтов на основе скриптов. JS поддерживает множество библиотек, функций и инструментов, имеет простой и понятный в плане запоминания синтаксис.
В процессе разработки программного обеспечения обычно требуется выбрать одно из нескольких условий для реализации. Соответствующая операция называется ветвлением. Она реализовывается через условные операторы.
Далее предстоит изучить конструкцию if … else в JavaScript. Необходимо рассмотреть несколько возможных вариантов реализации ветвлений, их примеры (example), а также синтаксис. Соответствующие сведения идеально подойдут для новичков. Продвинутым разработчикам работа с if … else не доставит никаких хлопот.
Условные операторы – это…
Условная инструкция (или условный оператор) – это оператор (конструкция), которая в JS обеспечивает выполнение команд и алгоритмов в зависимости от истинности заданного изначально условия (логического выражения). Соответствующая запись отвечает за формирование ветвления в программном коде. Этот прием часто применяется тогда, когда встречается цикл – «петля» будет повторяться до тех пор, пока не достигнет условие остановки.
Тернарный оператор – единственный в JS, у которого осуществляется прием трех операндов. Он обычно применяется разработчиками в качестве укороченной формы записи условного оператора if.
Классификация
Рассматривая записи типа if … else в JS, необходимо понимать – условные операторы бывают нескольких видов. Каждый вариант поддерживает свой собственный синтаксис и области применения.
Записи типа if … else в JavaScript бывают:
- с одной веткой;
- двойными;
- с несколькими ветвями;
- поддерживающие инструкцию выбора дальнейшего действия.
Отдельно выделяется команда, которая носит название «тернарный оператор». Далее предстоит более подробно изучить и научиться использовать все перечисленные варианты ветвления.
Инструкции с If
Изучая оператор if в JavaScript, необходимо обратить внимание на простейшее ветвление. Это – структура с одной «веткой». Функция будет выполняться, если условие, написанное в if = true. Записать соответствующий тип ветвления проще простого. Для этого используется следующая syntax форма:
Записывается простейшее ветвление, начиная с ключевого слова if. Далее команда предусматривает пробел и круглые скобки. Внутри них располагается условие для проверки. В фигурных скобках необходимо создать блок кода, который будет реализован, if condition = true.
В виде условия может быть указано совершенно любое выражение. Если соответствующая запись приводится к истине, блок будет реализован. В противном случае программа будет обрабатывать operator, идущий после if condition.
Наглядные примеры
Оператор if … else с простейшим ветвлением (одной «веткой») используется для решения простейших задач. Пример – когда есть цикл. Для него рассмотренная структура создан условие остановки.
Вот – простейшие наглядные примеры, в которых используется конструкция ветвления с «одной веткой». Первый вариант:
Условие здесь после if = true, поэтому блок кода будет выполнен. Предложенный фрагмент выведет в консоль сообщение «Привет, мир!». Данный код не имеет никакого реального и сложного применения – он взят только для наглядного примера.
Если алгоритм, необходимый для реализации, состоит из одной функции, записывать его можно в одну строку, опуская фигурные скобки. Выглядеть это будет так:
Несмотря на это, рекомендуется не пренебрегать фигурными скобками. Они помогут сделать код более читабельным и понятным.
А вот еще один пример – увеличение значения переменной с именем num на 5, если изначально она больше 4:
Здесь условие будет приведено к истине. Результатом система выводит цифру 13.
Еще один вариант использования простейшего ветвления в JS – с «НЕ operators»:
Если записать соответствующий код в Node JS или иной среде разработки, система выведет на экран сообщение, когда в некотором объекте article отсутствует свойство title или оно является ложным.
Если ввести условие !article.title, то при приведении его к булевому значению система выдаст результат «истина». Свойство title отсутствует в article. Это значит, что article.title вернет undefined. Обратное ему значение – это true.
Двойное ветвление
Двойное ветвление поддерживает два условия, которые будут реализовываться в зависимости от истинности заданного выражение. Структура такого if … else является элементарной. Она не слишком сильно отличается от предыдущего варианта.
Здесь предстоит написать фрагмент, включающий в себя два «смысловых блока»:
- то, что будет обрабатываться системой, если условие – истина;
- фрагмент для else – какие действия выполнять, если условие – ложь.
Записать if … else с несколькими условиями можно так:
Если написать код по предложенному шаблону, система будет всегда выполнять хотя бы одну из частей. Пример – с else или только с if. Одновременно оба алгоритма при двойном ветвлении не могут быть реализованы. Это противоречит принципам оператора.
Чтобы лучше понимать принцип работы if … else, можно сделать такой файл с кодом:
Здесь предлагается сделать следующее:
- Определить, каким будет заданное число.
- Вывести характерное сообщение о четности/нечетности имеющегося элемента.
В предложенной форме if … else система вводит в консоль результат «Число нечетное!». Если значение num поменять на 2, 4 или 6, результатом станет сообщение «Число четное!».
Множественное ветвление
Два условия в ветвлении JavaScript используются для решения более сложных задач. Иногда требуется ввести код с выбором алгоритма из многочисленных доступных вариантов. Такая концепция называется множественным ветвлением. Для нее необходимо писать конструкции типа elseif:
Работает такой фрагмент if else так:
- Если condition1 – это истина, система выполнит соответствующий код в фигурных скобках. Остальные варианты даже не просматриваются в приложении.
- Когда condition is false, система переходит в проверке condition2. Если оно – истина, выполняется соответствующий код.
- Проверки условий conditionN с elseif продолжаются до тех пор, пока не будет обнаружено первое выражение со значением true. Если они отсутствуют – система выполнит требования, написанные в разделе else.
Все это значит, что минимум один из фрагментов кода, которые набрал программист, будет выполнен. При помощи множественных условий else удается создавать весьма сложные выражения и реализовывать сложные задачи.
Вот – пример с else, в котором задаем значение val. В зависимости от него система будет выводить в консоль на печать различные тексты:
А вот – вариант, в котором предыдущую инструкцию можно ввести, используя только if, исключая else:
Необходимо запомнить, что else – это необязательная часть. Фрагмент кода без него выглядит так:
Есть и другие команды, напоминающие if … else, которые использует цикл для формирования ветвления.
Тернарный оператор
Тернарный оператор – некая запись в JavaScript. Она вернет результат первого или второго выражения в зависимости от истинности имеющегося выражения.
Синтаксическая форма записи:
Тернарный оператор – выражение. Он будет в обязательном порядке возвращать значение. Операнда тут три:
- condition – условие, с которым предстоит работать (подобно if … false или true);
- expression1 – выражение, реализуемое при истинности;
- expression2 – операция, выполняемая if … = false.
В качестве разделителей используются символы «вопросительный знак» и «двоеточие». Вот – пример с присваиванием переменной того или иного значения тернарного оператора:
JavaScript поддерживает множественные тернарные операторы, но они используются в основном опытными разработчиками.
Условие switch
Изучая циклы, а также ветвления с if … false, необходимо обратить внимание на инструкцию switch. Она позволяет выбирать алгоритм из нескольких представленных в зависимости от того, какое значение получено в вычисляемом выражении. Решение зависит от строгого соответствия результата case.
Выглядит switch так:
Default, подобно else, является необязательной частью. Данный фрагмент применяется тогда, когда необходимо обозначить, что делать, если система не обнаружит ни одного соответствия с case. Это своеобразная замена else в случае с ранее рассмотренными ветвлениями.
Break – тоже необязательная часть. Она применяется для прерывания реализации switch. После этого система передаст управление приложением фрагменту, написанному после switch-case.
Вот наглядный пример работы со switch без if … else:
Здесь в консоль браузера выводится сообщение о количестве конфет у пользователя. После реализации блока кода срабатывает break. Это приведет к передаче управления console.log и к печати сообщения «Две или три конфеты».
