Какой правильный способ использование if оператора в javascript

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

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

Для этого мы можем использовать инструкцию if и условный оператор ? , который также называют оператором «вопросительный знак».

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

Инструкция if(. ) вычисляет условие в скобках и, если результат true , то выполняет блок кода.

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

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

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

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

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

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

• Число 0 , пустая строка "" , null , undefined и NaN становятся false . Из-за этого их называют «ложными» («falsy») значениями.
• Остальные значения становятся true , поэтому их называют «правдивыми» («truthy»).

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

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

Мы также можем передать заранее вычисленное в переменной логическое значение в if , например так:

Блок «else»

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

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

Иногда нужно проверить несколько вариантов условия. Для этого используется блок else if .

В приведённом выше коде JavaScript сначала проверит year < 2015 . Если это неверно, он переходит к следующему условию year > 2015 . Если оно тоже ложно, тогда сработает последний alert .

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

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

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

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

Оператор представлен знаком вопроса ? . Его также называют «тернарный», так как этот оператор, единственный в своём роде, имеет три аргумента.

Сначала вычисляется условие : если оно истинно, тогда возвращается значение1 , в противном случае – значение2 .

Технически, мы можем опустить круглые скобки вокруг age > 18 . Оператор вопросительного знака имеет низкий приоритет, поэтому он выполняется после сравнения > .

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

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

В примере выше вы можете избежать использования оператора вопросительного знака ? , т.к. сравнение само по себе уже возвращает true/false :

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

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

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

1. Первый знак вопроса проверяет age < 3 .
2. Если верно – возвращает ‘Здравствуй, малыш!’ . В противном случае, проверяет выражение после двоеточия „:“, вычисляет age < 18 .
3. Если это верно – возвращает ‘Привет!’ . В противном случае, проверяет выражение после следующего двоеточия „:“, вычисляет age < 100 .
4. Если это верно – возвращает ‘Здравствуйте!’ . В противном случае, возвращает выражение после последнего двоеточия – ‘Какой необычный возраст!’ .

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

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

Иногда оператор «вопросительный знак» ? используется в качестве замены if :

В зависимости от условия company == ‘Netscape’ , будет выполнена либо первая, либо вторая часть после ? .

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

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

Несмотря на то, что такая запись короче, чем эквивалентная инструкция if , она хуже читается.

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

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

Смысл оператора «вопросительный знак» ? – вернуть то или иное значение, в зависимости от условия. Пожалуйста, используйте его именно для этого. Когда вам нужно выполнить разные ветви кода – используйте if .

If statements in javaScript, and other control flow stuff

In this post I will be writing about javaScript if statements, and other related concerns when working with conditionals in general in a JavaScript programing environment. In many programing languages, in fact just about all of them actually an if statement can be used to check if a certain value, or expression evaluates to a true boolean value value, and in the event that it is true, run some code that would otherwise not run. Thus an if statement is a kind of control flow statement along with other options that come to mind such as switch statements, loops, functions, and other clever ways of controlling the flow or execution of code.

So then in addition to if statements there are also switch statements in javaScript that can also be used as a kind of control flow structure. In addition to these two options there is also yet event more options such as a conditional operator as well that can be used as a short hand for if else statements for example, which is also often very useful when it comes to write expressions. Yet even more tools in the tool box that can be seen as a form of control flow would be various kinds of loops such as while and for loops, and various kinds of structures such as a state machine and so forth.

If statements are a fundamental component of javaScript code, or in any programing language for that matter. So having a solid grasp on how to go about using them is key to writing just about any kind of project. There are additional tolls to work with in javaScript that are also worth mentioning when it comes to controlling the flow of a program other then that of if statements, such as switch statements, or doing something to compartmentalize code into groups using functions and objects. So lets look as some basic examples of if statements in javaScript, and many some additional related things while in the process of doing so.

1 — The basics of if statements in javaScript

If you are reading this post I assume that you are still fairly new to javaScript, or maybe you are like me and have many years of experience but you are just looking for yet even more to learn about general programing topics. Whatever the case might be in this section I will be starting out with just some very basic javaScript if statement examples, as well as other simple examples of other control flow options in general in core javaScript. So these will be some fairly simple examples in this section, but if you have zero experience with javaScript you might still want to start out with a getting started with javaScript type post of some kind or another. If you are a more experience developer then you might consider skipping over this section to get to the good stuff later on in this content.

— These source code examples are up on Github

The source code examples that I am writing about in this section as well as the rest of the post can be fund in my test vjs Github repository. This test vjs repository is also where I am parking all the various source code examples for my many other posts on vanilla javaScript related topics.

1.1 — First basic if statement example

A basic if statement in javaScript would involve using the if keyword followed by a set of parenthesis in which an expression or value will evaluated to a Boolean value that will be used as condition. If the condition is true then the code in the if statement will execute, else it will not.

So the value or expression that evaluates to a value does not have to be a boolean value, as just about any kind of value in javaScript has a true or false equivalent depending on the type and value of what is being evaluated. For example an empty string will evaluate to false, and a string with one or more characters will evaluate to true. So all kinds of expressions and values can be use as a way to control when a set of logic will execute or not in a javaScript if statement.

1.2 — Not using brackets

If statements can have brackets or not, I generally always do use brackets with if statements even if it does have only one line of code because I find that it helps to make things more clear to me. There are a number of other reasons why to avoid doing this that might prove to be more important than just person preference. However this is just one of many things that one might come across when reading code on the open web, and more often than not it might not present a note worthy problem.

These are all examples of javaScript if statements there is also the Conditional operator that can be used in expressions. More on that a little later in this post.

1.3 — Using else after a starting if statement

The else keyword can be used right after an if statement block. This is a good place to park some code that I will want to run if, and only if the expression evaluates to false. So then the use of else differs from just placing some code after an if statement as that code will always run regardless of the boolean state of the if statement, while code in an else block will only run in the event of a false condition of the first opening if statement.

1.4 — The ternary operator

There are if statements, but then there is also the question of an expressions friendly form if an if statement. When it comes to that there is the ternary operator.

1.5 — Using a switch

Another control flow option aside from if statements and the ternary operator would be a switch statement.

1.6 — Object keys, functions, and if statements

I can not say that I use a switch often, in fact when I think about it I never use them. I am not necessary going to get on to some kind of anti switch war path about it mind you, it is just that there are other options that I seem to prefer when it comes to getting into more advanced control flow topics. A switch works by evaluating an expression as a value, and then comparing that value to one or more cases and if one is found that is a match that code will run, if not do code will run or a default case will run. That is all fine and good but why not have an object with key values, and use the in operator with an if statement in the body of a function where I can use the return keyword? In the event that a value is a key of the object return the corresponding key value, and if nothing is there just have some kind of default value for an additional return statement at the bottom of the function.

2 — Functions for the use of control flow

Another major part of control flow beyond just that of an if statement would be the use of one or more functions. There is a whole lot of ground to cover when it comes to functions, so I am not going to be doing them justice in this section for sure that would be a major understatement. However staying on topic with the idea of control flow, it might be called for to have at least a few examples involving functions.

2.1 — Else is not needed when making a function that returns something

If a function that is being made that is using the return keyword to return a result when called then else does not need to be used. The reason why is that return will stop any further execution of any additional code, so it can be used as a way to break out of a function. This differs from blocks of code where I might only want some code to run if and only if a condition is not met.

2.2 — Object keys revisited with and IIFE

In the basic section of this post I introduced a simple example of using a function along with an object as an alternative way of doing more or less the same thing as with a switch statement. In this example I am now taking a second look at this sort of thing and doing just a bit more with it such as enclosing the object as well as the function inside the body of another self executing function called an IIFE. This results in a kind of module design where everything is wrapped up into one nice need little package that can be used by way of a single global variable, also if I enclose something like this along with everything else I am using into the body of another IIFE then I will not be defining any globals at all.

3 — Conditional operator

There is also a conditional operator in JavaScript this is an operator that takes three operands and returns one of two values depending on the boolean value of the left most operand before the question mark symbol that is used. For example say I have an obj value that can end up having a value of undefined in some cases, but I always want it to end up being at least an empty object. One way to do so would be to use a conditional operator to test for undefined, and then return an empty object in that case, or the value that it is all ready in the event that it is not undefined.

Because the conditional operator is a kind of expression it can be used in conjunction with if statements.

So the conditional operator is helpful because I can use it in an expression, doing so with if statements is a little complicated often involving the use of an IIFE in the expression with results in hard to read code that is harder to debug.

4 — State machines as a way to control logic

Another way to control the flow of logic is to use what is often called a state machine. This is typically a collection of two or more methods that will fire only when a variable or object property is a given value that will cause the method to fire, or at least that might be what one is in a very basic form. Really getting into this subject can end up getting a little complex, and as such truly doing it justace would require writitng a whole other post on the topic alone, and maybe event a few such posts.

However the basic idea of a state machine is simple enough, with that said I could just have an object, and a bunch of methods for a bunch of key names of this object. I can then have a property that will be the key name of the current method to fire when a main tick or update method is called. I then have some kind of way to change the value of this property that will control what method to fire each time an update method is called.

In other words something like this maybe.

There are a number of other ways that a state machine could be made like this. There is also thinking more in terms of a collection of objects like this other than just one. So yest this subject can get a little advanced.

State machines come into play when working on some kind of project that is a little advanced in which there are many application states. Such as a state in which assets need to be loaded, and a state that will run when all those assets are done loading. I often work out this kind of system when making canvas games, even ones that do not involve such a task, because it is often just needs to break things down into many different states. For example there might be a main game state, but then there will be another state that will set up some settings before starting a new game in the main game state, and yet another state that is a main title menu, and so forth.

Speaking of canvas examples I have a main post on canvas examples that might be worth checking out, but when it comes to state machines alone I have a single canvas example where that is the focus. In addition I have many canvas examples where a state machine is very much a part of the over all project, one of my best examples thus far might be my pop the lock game that features a fairly complex state machine module.

5 — Array methods, and A word on when not to use if statements

If statements and conditional operators are great, and they should be used when and where called for, which is often. However it is also a good idea to know when not to use them, as often the use of them might be a more complex solution to a problem that can be resolved with something not so complex. In this section I think I will go over at least one example of the use of Array prototype methods when working with an array as a way to do things that would otherwise involve a little more javaScript code and an if statement.

5.1 — The Array.filter prototype method

Say I have an array of mixed values that contain numbers, and all kinds of other types. What I want is to have an array of just numbers from this source array. I could work out a function that will make use of a while loop, to loop over the contents of this source array. Then inside the body of the while loop I can use an if statement with an expression that make use of the typeof operator to check the type of a current element in the source array. In the event that an element is indeed a number I can then push that element to a new array, and then when done return this new array.

That kind of method that makes use of all kinds of core javaScript features will work just fine, but so would another method that makes use of the Array.filter prototype method and a single expression involving the typeof operator in a function that I pass to it.

6 — Conclusion

So the javaScript if statement is one of the many core aspects of javaScript programing, and programing in general actually as just about any language is going to have them. There are other ways of controlling the flow of code though that a new developer should be aware of such the use of switch statements, loops, and state machines. In any case getting comfortable with if statements is a must when it comes to getting up to speed with javaScript, but it is also just one of many little features to be aware of.

Условные операторы в JavaScript

Часто при написании программ различные блоки кода нужно запускать в зависимости от пользовательского ввода или других факторов.

Для примера рассмотрим онлайн-формы: если все поля содержат требуемую информацию, форму можно отправить; но если обязательные поля формы не заполнены, отправить ее не получится.

Для выполнения таких задач используются условные операторы, которые являются неотъемлемой частью всех языков программирования.

Условные операторы выполняют конкретное действие в зависимости от того, какой результат получила предыдущая задача – true или false.

Вот несколько примеров использования условных операторов в JavaScript:

• Проверка местоположения пользователя и переключение языка (в зависимости от страны).
• Отправка формы или отображение предупреждения рядом с незаполненными обязательными полями.
• Открытие выпадающего меню при событии клика (или его закрытие, если он уже открыт).
• Отображение рекламы алкогольных напитков, если пользователь достиг возраста употребления алкоголя.

Условные операторы являются частью логики, играют важную роль в принятии решений и управлении потоком компьютерной программы. Для наглядности условные операторы можно сравнить с серией книг «Выбери себе приключение».

В этом мануале вы ознакомитесь с условными операторами, ключевыми словами if, else и else if и тернарным оператором.

Оператор if

Основным условным оператором является оператор if. Оператор if оценивает выражение как истинное или ложное и выполняет действие только в том случае, если выражение возвращает true. В случае ложного результата оператор проигнорирует выражение, и программа перейдет к следующему разделу.

Оператор if – это ключевое слово if, условие в скобках и код, который нужно выполнить, в фигурных скобках.

if (condition) <
// code that will execute if condition is true
>

Содержимое оператора if имеет отступы, а фигурные скобки, содержащие исполняемый блок кода, не заканчиваются точкой с запятой.

В качестве примера рассмотрим приложение для покупок. Предположим, пользователь, который депонировал определенную сумму средств на свой счет, хотел бы купить товар из магазина. Приложение создается в файле shop.js.

// Set balance and price of item
const balance = 500;
const jeans = 40;
// Check if there are enough funds to purchase item
if (jeans <= balance) <
console.log(«You have enough money to purchase the item!»);
>
You have enough money to purchase the item!

Баланс пользователя – 500. Пользователь хочет купить джинсы за 40. Используя оператор меньше или равно, мы можем проверить, меньше ли цена джинсов суммы средств на счете пользователя. Поскольку jeans <= balance оценивается как true, блок кода будет выполнен.

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

// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) <
console.log(«You have enough money to purchase the item!»);
>

Поскольку phone <= balance оценивается как false, программа проигнорирует этот блок кода и перейдет к следующей задаче.

Оператор else

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

К примеру, программа может сообщить пользователю, какие поля формы были заполнены правильно, а какие – нет. В этом случае нужно использовать оператор else: он выполнит код, если исходное условие не будет выполнено и выражение оценивается как false.

Оператор else пишется после оператора if и не имеет условий в круглых скобках. Синтаксис базового выражения if…else выглядит так:

if (condition) <
// code that will execute if condition is true
> else <
// code that will execute if condition is false
>

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

// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) <
console.log(«You have enough money to purchase the item!»);
> else <
console.log(«You do not have enough money in your account to purchase this item.»);
>
You do not have enough money in your account to purchase this item.

Поскольку условие if не было выполнено, код переходит к оператору else.

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

Выражения else if

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

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

if (condition a) <
// code that will execute if condition a is true
> else if (condition b) <
// code that will execute if condition b is true
> else if (condition c) <
// code that will execute if condition c is true
> else <
// code that will execute if all above conditions are false
>

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

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

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

Приложение будет следовать таким условиям:

• 90 и свыше – А.
• 80-89 баллов – B.
• 70-79 баллов – С.
• 60-69 баллов – D.
• 59 баллов и ниже – F.

Создайте файл grades.js и поместите в него простой набор операторов.

// Set the current grade of the student
let grade = 87;
// Check if grade is an A, B, C, D, or F
if (grade >= 90) <
console.log(«A»);
> else if (grade >= 80) <
console.log(«B»);
> else if (grade >= 70) <
console.log(«C»);
> else if (grade >= 60) <
console.log(«D»);
> else <
console.log(«F»);
>
B

Сначала программа сравнит заданное значение с самым высоким баллом (больше или равен 90). После этого оператор else if проверит остальные оценки.

Заданное значение 87 также технически соответствует группам C, D и F, но программа остановится на первом соответствии условия и выведет B.

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

Тернарный оператор используется как сокращение оператора if … else.

Тернарный оператор записывается с помощью вопросительного знака (?), за которым следует двоеточие (:).

(condition) ? expression on true : expression on false

В приведенном выше выражении сначала записывается условие, за ним следует символ ?. Первое выражение должно быть истинным, а второе – ложным. По сути, это оператор if…else с более компактным синтаксисом.

Для примера попробуйте создать программу, которая будет проверять, достиг ли пользователь 21 года.

Если да, программа выведет «You may enter», если нет, она выведет в консоль «You may not enter». Создайте файл age.js и добавьте в него код:

// Set age of user
let age = 20;
// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? «You may enter.» : «You may not enter.»;
// Print output
oldEnough;
‘You may not enter.’

Поскольку пользователю меньше 21 года, программа выведет «You may not enter».

Заключение

Условные операторы позволяют управлять потоком программ. Они являются одним из основных составляющих большинства программ и присутствуют практически во всех языках программирования.

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

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

Необходимое условие:	Базовая компьютерная грамотность, базовое понимание HTML и CSS, JavaScript first steps.
Цель:	Понять принципы использования операторов условий в JavaScript.

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

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

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

Оператор if . else

Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — if . else оператор.

Базовый if . else синтаксис

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

1. Ключевое слово if расположено перед круглыми скобками.
2. Условие для проверки (condition), расположено внутри круглых скобок (например «это значение больше другого значения?», или «это значение существует?»). Это условие использует операторы сравнения (comparison operators), которые мы изучим позже, и возвратит нам true или false .
3. Внутри скобок < >расположен код, который будет выполняться только в том случае, если условие (condition) верно ( true) .
4. Ключевое слово else (иначе) .
5. Ещё скобки < >, код внутри которых выполнится, только если условие не верно (не true) .

Этот код довольно читабелен — он говорит «if (если) condition (условие) возвращает true (истина) , запусти код A, else (иначе) запусти B»

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

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

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

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

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

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

В этом коде, как показано, всегда будет shoppingDone равный false , что означает разочарование для нашего бедного ребёнка. Мы должны предоставить механизм для родителя, чтобы установить для переменной shoppingDone значение true , если ребёнок помог с покупками.

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

else if

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

Существует способ привязать дополнительные варианты/результаты к вашему if. else — использовать else if . Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между if() < . >и else < . >— проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:

1. Здесь у нас есть элемент HTML <select> который позволяет нам выбирать разные варианты погоды и простой абзац.
2. В JavaScript мы создаём ссылки на элементы <select> и <p> и добавляем обработчик события элемента <select> , чтобы при его изменении значения запускалась функция setWeather() .
3. Когда функция будет запущена, первоначально мы определим значение переменной choice , которая равна выбранному значению в элементе <select> . Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной choice . Обратите внимание, как все условия проверяются в else if() <. >блоках, за исключением первого, который использует if() <. >блок.
4. Последний выбор, внутри else <. >блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет true . В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию «—Сделайте выбор—» которая указана в начале.

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

Операторы сравнения используют для проверки условий внутри наших условных операторов. Сначала мы посмотрели на операторы сравнения в нашей статье Базовая математика в JavaScript — цифры и операторы . Наш выбор это:

• === и !== — проверяет одно значение идентично или не идентично другому.
• < и > — проверяет одно значение меньше или больше, чем другое.
• <= и >= — проверяет одно значение меньше или равно, либо больше или равно другому.

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

Мы хотели бы особо обратить внимание на проверку булевых значений ( true / false ), и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть false , undefined , null , 0 , NaN , или пустая строка ( » ) фактически возвращает true при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она true , или существует (т. е. переменная не равна undefined). Например:

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

Вложенность if . else

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

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

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

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

• && — И; позволяет объединить два или более выражения так, что каждое из них отдельно должно иметь значение true , чтобы в итоге общее выражение имело значение true .
• || — ИЛИ; позволяет объединить два или более выражения так, что одно или несколько из них должно иметь значение true , чтобы в итоге общее выражение имело значение true .

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

Так, для примера, первый блок кода выполнится только в том случае, если choice === ‘sunny’ и temperature < 86 вернут значение true .

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

Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:

В этом фрагменте, если условие ИЛИ возвращает true , оператор НЕ будет отрицать это и выражение вернёт false .

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

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

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

Оператор switch

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

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

1. Ключевое слово switch , за которым следует пара круглых скобок.
2. В скобках приводится выражение или значение.
3. Ключевое слово case , за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.
4. Код, который будет выполняться, если вариант совпадает с выражением.
5. Оператор break , за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора break , и перейдёт к выполнению кода, расположенного после оператора switch.
6. Вариантов выбора (пункты 3–5) может быть любое количество.
7. Ключевое слово default используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после default нет других вариантов выбора, поэтому инструкция break не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.

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

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

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

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

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

Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true , и другое значение/выражение, если условие является false . Часто это очень удобная альтернатива блоку if. else , позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true / false . Общая схема оператора:

Приведём простой пример:

У нас есть переменная isBirthday , если она true , мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.

Пример тернарного оператора

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

Мы используем элемент <select> для выбора темы (чёрная или белая), а также простой <h1> (en-US) для отображения заголовка веб-сайта. Кроме того, у нас есть функция update() , принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.

Наконец, у нас есть обработчик событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === ‘black’ . Если возвращается true , мы запускаем функцию update() с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается false , мы запускаем функцию update() с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.

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

Практическое упражнение: простой календарь

В данном примере вы поможете нам закончить простое приложение календаря. Код включает:

• Элемент <select> , позволяющий пользователю выбирать разные месяцы.
• Обработчик событий onchange для обнаружения изменения значения, выбранного в меню <select> .
• Функция createCalendar() , рисующая календарь и отображающая правильный месяц в элементе <h1> (en-US).

Вы должны написать условную конструкцию в функции обработчика onchange , сразу после комментария // ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ . Конструкция должна:

1. Проверить выбранный месяц (хранящийся в переменной choice . Это будет значение элемента <select> после изменения значения, например, «Январь».)
2. Задать переменную, скажем, days , равную количеству дней в выбранном месяце. Для этого нужно будет проверить количество дней в каждом месяце. Високосный год можно не учитывать.

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

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

Примечание: В HTML коде внутри <select> названия месяцев value=»» введены на русском языке. Соответственно ссылки на них из вашего скрипта так же на русском. Не забываем про синтаксис. (прим. — ConstantineZz)

Практическое упражнение: расширяем выбор цветов

В данном примере вы будете использовать пример тернарного оператора, который мы рассматривали ранее, и превратите тернарный оператор в инструкцию switch, что позволит увеличить количество вариантов выбора для простого веб-сайта. Посмотрите на <select> — на этот раз он включает не два, а целых пять вариантов тем. Нужно добавить инструкцию switch сразу под комментарием // ДОБАВЬТЕ ИНСТРУКЦИЮ SWITCH :

• Она должна принимать переменную choice в качестве входного выражения.
• Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.
• В блоке каждого элемента case необходимо вызывать функцию update() , которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.

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

Заключение

Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или свяжитесь с нами.