Conditional branching: if, ‘?’
Sometimes, we need to perform different actions based on different conditions.
To do that, we can use the if statement and the conditional operator ? , that’s also called a “question mark” operator.
The “if” statement
The if(. ) statement evaluates a condition in parentheses and, if the result is true , executes a block of code.
In the example above, the condition is a simple equality check ( year == 2015 ), but it can be much more complex.
If we want to execute more than one statement, we have to wrap our code block inside curly braces:
We recommend wrapping your code block with curly braces <> every time you use an if statement, even if there is only one statement to execute. Doing so improves readability.
Boolean conversion
The if (…) statement evaluates the expression in its parentheses and converts the result to a boolean.
Let’s recall the conversion rules from the chapter Type Conversions:
- A number 0 , an empty string "" , null , undefined , and NaN all become false . Because of that they are called “falsy” values.
- Other values become true , so they are called “truthy”.
So, the code under this condition would never execute:
…and inside this condition – it always will:
We can also pass a pre-evaluated boolean value to if , like this:
The “else” clause
The if statement may contain an optional else block. It executes when the condition is falsy.
Several conditions: “else if”
Sometimes, we’d like to test several variants of a condition. The else if clause lets us do that.
In the code above, JavaScript first checks year < 2015 . If that is falsy, it goes to the next condition year > 2015 . If that is also falsy, it shows the last alert .
There can be more else if blocks. The final else is optional.
Conditional operator ‘?’
Sometimes, we need to assign a variable depending on a condition.
The so-called “conditional” or “question mark” operator lets us do that in a shorter and simpler way.
The operator is represented by a question mark ? . Sometimes it’s called “ternary”, because the operator has three operands. It is actually the one and only operator in JavaScript which has that many.
The condition is evaluated: if it’s truthy then value1 is returned, otherwise – value2 .
Technically, we can omit the parentheses around age > 18 . The question mark operator has a low precedence, so it executes after the comparison > .
This example will do the same thing as the previous one:
But parentheses make the code more readable, so we recommend using them.
In the example above, you can avoid using the question mark operator because the comparison itself returns true/false :
Multiple ‘?’
A sequence of question mark operators ? can return a value that depends on more than one condition.
It may be difficult at first to grasp what’s going on. But after a closer look, we can see that it’s just an ordinary sequence of tests:
- The first question mark checks whether age < 3 .
- If true – it returns ‘Hi, baby!’ . Otherwise, it continues to the expression after the colon “:”, checking age < 18 .
- If that’s true – it returns ‘Hello!’ . Otherwise, it continues to the expression after the next colon “:”, checking age < 100 .
- If that’s true – it returns ‘Greetings!’ . Otherwise, it continues to the expression after the last colon “:”, returning ‘What an unusual age!’ .
Here’s how this looks using if..else :
Non-traditional use of ‘?’
Sometimes the question mark ? is used as a replacement for if :
Depending on the condition company == ‘Netscape’ , either the first or the second expression after the ? gets executed and shows an alert.
We don’t assign a result to a variable here. Instead, we execute different code depending on the condition.
It’s not recommended to use the question mark operator in this way.
The notation is shorter than the equivalent if statement, which appeals to some programmers. But it is less readable.
Here is the same code using if for comparison:
Our eyes scan the code vertically. Code blocks which span several lines are easier to understand than a long, horizontal instruction set.
The purpose of the question mark operator ? is to return one value or another depending on its condition. Please use it for exactly that. Use if when you need to execute different branches of code.
Условный JavaScript для экспертов
Осваиваем условные выражения для написания более чистого кода
NOP::Nuances of Programming
Условные выражения являются очень важным аспектом в синтаксисе любого языка программирования. Если вы уже некоторое время программируете на каком-либо популярном языке, то уже должны быть знакомы с условными операторами if..elif..else или switch . Они очень полезны для принятия решений в программах.
Например, предположим, что есть сундук с сокровищами, спроектированный таким образом, что только Glad (автор статьи) может его открыть. С точки зрения программы (на языке Python) эта логика может быть представлена в следующем виде:
Несмотря на то, что предыдущий фрагмент кода был написан на Python, речь в данной статье будет идти исключительно о языке JavaScript. Тем не менее, большинство показанных здесь техник могут быть применены и к некоторым другим языкам программирования.
Обещаю, что с этого момента вы не найдете в статье ни единой строки кода, написанной на другом языке, помимо JavaScript.
В данной статье основной акцент будет поставлен скорее на условные выражения (с использованием логических операторов) в JavaScript и на то, как можно их применять, чем на условные инструкции.
Выражения против инструкций
Прежде чем продолжить, необходимо провести различие между выражениями и инструкциями в JavaScript. Вот очень простая аналогия:
Выражения в JavaScript — это как фразы в грамматике, в то время как инструкции в JavaScript подобны предложениям в грамматике.
Выражение — это любая фраза языка JavaScript, которая может быть вычислена интерпретатором для получения значения.
Например: литералы, присваивания, функциональные выражения, логические, побитовые или арифметические операции, доступ к свойствам объекта, вызов функций, запуск кода из строки методом eval и так далее.
В следующем фрагменте кода представлены некоторые JavaScript выражения:
Инструкция — это любое предложение на языке JavaScript или команда, которая может быть выполнена интерпретатором для совершения какого-либо действия или вызова побочного эффекта.
Например: условные выражения, объявление переменных или функций, циклы, throw, return, try/catch/finally и так далее.
Некоторые JavaScript выражения, такие как присваивание или вызов функции могут иметь побочные эффекты и в результате обычно используются в качестве инструкций (инструкции-выражения).
Условия и логические значения
Важнейшим требованием любой условной конструкции является наличие самого условия. Условие — это то, что определяет решение, которое будет принято в программе.
В JavaScript условие может быть любым допустимым выражением. Как правило, каким бы сложным ни было это условное выражение, оно возвращает одно из двух логических значений (booleans): true либо false .
Правильное понимание того, как интерпретатор JavaScript преобразует эти условные выражения в логические (boolean), необходимо для написания корректной логики для условия.
Ниже приведены две основополагающие концепции, которые помогут нам понять эти преобразования:
- Определение истинного(true) и ложного(false) значения
- Понимание короткой схемы вычислений в логических операциях
Истинное против ложного
Каждое значение в JavaScript можно классифицировать как истинное или ложное. Ложные значения в JavaScript следующие:
- '' или "" или « (пустая строка)
- 0 или -0 (число 0)
- null
- undefined
- NaN
- false
Все остальные значения, не указанные в этом списке, являются истинными. Всякий раз, когда JavaScript ожидает логическое значение, истинные значения неявно приводятся к true , а ложные — к false .
Однако, если вы предпочитаете намеренное или явное приведение типа, то вы можете воспользоваться встроенной функцией Boolean для преобразования любого значения в соответствующее логическое значение.
Для этих целей вы также можете использовать оператор логического НЕ ( ! ). Оператор ! преобразует свой операнд в обратное логическое значение, следовательно, он всегда вычисляет логическое значение.
С помощью оператора ! всегда возвращается false для истинных значений и true — для ложных. Чтобы преобразовать значение в соответствующее логическое значение, нужно использовать оператор ! дважды.
Короткая схема вычислений
Для логических операторов И ( && ) и ИЛИ ( || ) необходимо наличие двух операндов. Данные операторы используются для выполнения логических операций над операндами.
Учитывая то, что два операнда являются логическими ( true или false ),
- операция && возвращает true только в том случае, когда оба операнда имеют значение true , в противном случае возвращается false .
- операция || возвращает false только в том случае, когда оба операнда имеют значение false , в противном случае возвращается true .
Обратите внимание, что оператор && имеет более высокий приоритет, чем оператор || , поэтому он обычно вычисляется в первую очередь. В связи с этим, если они используются вместе в одном выражении, можно использовать скобки ( () ) для группирования, изменив тем самым порядок вычисления. Рассмотрим следующий фрагмент кода:
При использовании этих операторов, первый операнд вычисляется всегда. Однако второй операнд может остаться невычисленным, что зависит от результата вычисления первого операнда. Такое поведение называется короткой схемой вычисления.
Операции && и || не всегда возвращают логическое значение. В принципе, они могут произвести любое значение. Вот более краткое описание их поведения на основе короткой схемы вычислений:
- оператор && сначала вычисляет первый операнд. Если полученное значение истинно, то он вычисляет второй операнд и возвращает его значение. Однако, если значение первого операнда ложно, то оператор просто возвращает ложное значение первого операнда, при этом второй операнд не вычисляется.
- Оператор || сначала вычисляет первый операнд. Если полученное значение истинно, то возвращается истинное значение первого операнда, второй операнд не вычисляется. Однако, если значение первого операнда ложно, оператор вычисляет второй операнд и возвращает его значение.
Замена инструкций выражениями
Теперь у вас есть четкое представление о концепции короткой схемы вычислений и о том, каким образом условные выражения преобразуются в логические значения.
Далее вы увидите, как некоторые условные инструкции могут быть преобразованы в простые выражения. Вы также поймете, как такие преобразования помогут сделать ваш код более чистым и компактным.
1. Простая инструкция if
Очень простые инструкции if можно легко заменить условными выражениями, опираясь на концепцию короткой схемы вычислений. Рассмотрим следующий фрагмент кода:
В этом фрагменте инструкция if гарантирует, что функция deletePost() будет вызвана, только если условие вернет true .
Простую инструкцию if можно заменить очень простым условным выражением, как показано в следующем фрагменте кода:
Несмотря на то, что условное выражение работает аналогично предыдущей инструкции if , на самом деле они отличаются.
Условное выражение возвращает значение, а значит его можно присвоить переменной или использовать в любом другом месте, где оно потребуется.
Имейте в виду, что использовать подобные условные выражения нужно осторожно, не забывая о подводных камнях короткой схемы вычислений. Весьма вероятно, что операнд может остаться невычисленным, как мы это видели в предыдущем разделе о короткой схеме вычислений.
2. Инструкции If…Else
Посмотрим на следующий код, определяющий надежность пароля:
Его цель очень проста — проверить, содержит ли пароль более 7 символов. Если да, то присвоить переменной strength значение “Strong” , если нет — “Weak” .
Предыдущий код можно сократить до следующего:
Этот фрагмент кода делает то же самое, что и предыдущий, но в одной строке. Такой код уже выглядит довольно хорошо. Следующий фрагмент проверяет вычисление условного выражения.
Для написания условных выражений if. else такого рода существует способ получше — использование условного оператора, также называемого тернарным оператором. Его синтаксис выглядит следующим образом:
Исходя из этого, предыдущий пример кода может быть переписан с использованием тернарного оператора как указано ниже:
Хотя фрагмент кода, использующий логические операторы, работает аналогично фрагменту кода с применением тернарного оператора (для данного примера), важно знать, что они не являются взаимозаменяемыми.
Гораздо безопаснее использовать тернарный оператор для таких случаев, за исключением того, когда вы действительно знаете, что делаете.
Рассмотрим следующий код, чтобы понять опасность применения логических операторов в подобных случаях:
Вот еще одна хорошо известная условная инструкция, которая обычно встречается в кроссбраузерных AJAX-библиотеках.
При помощи логических операторов предыдущий фрагмент кода можно переписать следующим образом (отступы для читабельности):
Используя тернарный оператор:
Заметьте, что в этом примере кода тернарный оператор является вложенным, что может быть полезно для работы с более сложными if. else условиями.
Советы и альтернативные приёмы
В этом разделе вы увидите некоторые полезные советы и альтернативные приёмы, которые могут пригодиться при работе с условиями и логическими операторами.
Приведение к логическому значению
Вы уже видели, как явно преобразовать значение JavaScript в эквивалентное логическое значение, используя встроенную функцию Boolean или оператор двойное НЕ ( !! ).
Допустим, вы хотите нормализовать значение таким образом, чтобы всегда получать логическое значение:
- если значение логическое (boolean), возвращать это значение как есть
- если значение не логическое, возвращать логическое значение, которое вы выберете по умолчанию — true или false .
Приведенный ниже код показывает, как можно этого добиться (здесь используются функции):
Законы де Моргана
Если вы знакомы с булевой алгеброй, вы должно быть знаете о законах де Моргана. Эти законы также применяются к логическим операторам JavaScript.
Следующий фрагмент кода демонстрирует данные законы:
Логические тождества
При работе с логическими значениями существуют некоторые известные тождества, которые всегда истинны. Поскольку A , B и C являются логическими значениями, код ниже показывает некоторые из этих тождеств.
Множественные тернарные операторы
Во фрагментах кода выше вы видели, что тернарные операторы могут быть вложенными в случае обработки более сложной условной if. else логики.
Тем не менее, вы должны знать некоторые нюансы, касаемо приоритета и ассоциативности тернарного оператора, для того, чтобы эффективно его применять в комплексных выражениях.
- Тернарный оператор имеет более низкий приоритет по сравнению с логическими и значительной частью других операторов. Вследствие этого он вычисляется последним при использовании совместно с более высокоприоритетными операторами.
- Тернарный оператор имеет ассоциативность справа налево.Соответственно, при использовании множественного тернарного оператора в одном выражении они обрабатываются справа налево.
При наличии нескольких тернарных операторов в выражении могут понадобиться скобки ( () ) для изменения порядка вычисления. Вот пример:
Заключение
Я уверен, что теперь, дочитав эту статью до конца, вы сможете найти в своем коде области, где сможете применить данные советы и приёмы и тем самым улучшить код.
Получайте удовольствие от написания кода …
Хорошо знаете JavaScript? Пройдите наш небольшой тест и проверьте свои знания!
JavaScript if, else, and else if
Conditional statements are used to perform different actions based on different conditions.
Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
- Use if to specify a block of code to be executed, if a specified condition is true
- Use else to specify a block of code to be executed, if the same condition is false
- Use else if to specify a new condition to test, if the first condition is false
- Use switch to specify many alternative blocks of code to be executed
The switch statement is described in the next chapter.
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
Note that if is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.
Example
Make a "Good day" greeting if the hour is less than 18:00:
The result of greeting will be:
The else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
Example
If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":
The result of greeting will be:
The else if Statement
Use the else if statement to specify a new condition if the first condition is false.
Syntax
Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
The result of greeting will be:
More Examples
Random link
This example will write a link to either W3Schools or to the World Wildlife Foundation (WWF). By using a random number, there is a 50% chance for each of the links.
Что такое условные операторы в javascript
Условные конструкции позволяют выполнить те или иные действия в зависимости от определенных условий.
Конструкция if..else
Конструкция if..else проверяет некоторое условие и если это условие верно, то выполняет некоторые действия. Простейшая форма конструкции if..else :
После ключевого слова if в круглых скобках идет условие, а после условия — блок кода с некоторыми действиями. Если это условие истинно, то затем выполняются действия, которые помещены в блоке кода
Здесь в конструкции if используется следующее условие: income > 50 . Если это условие возвращает true , то есть если константа income имеет значение больше 50, то браузер отображает сообщение. Если же значение income меньше 50, то никакого сообщения не отображается.
Если блок кода содержит одну инструкцию, как в случае выше, то конструкцию можно упростить, убрав фигурные скобки и поместив действия сразу после условия:
или перенести действия на следующую строку
Причем условия могут быть сложными:
Проверка наличия значения
Конструкция if позволяет проверить наличие значения. Например:
Если переменная myVar имеет значение, как в данном случае, то в условной конструкции она возвратит значение true.
Здесь переменная myVar не имеет значения. (В реальности она равна undefined ) Поэтому условие в конструкии if возвратит false , и действия в блоке конструкции if не будут выполняться.
Но нередко для проверки значения переменной используют альтернативный вариант — проверяют на значение undefined и null :
Выражение else
Выше мы рассмотрели, как определить действия, которые выполняются, если условие после if истинно. Но что, если мы хотим также выполнять еще один набор инструкций, если условие ложно? В этом случае можно использовать блок else . Данный блок содержит инструкции, которые выполняются, если условие после if ложно, то есть равно false :
То есть если условие после if истинно, выполняется блок if. Если условие ложно, выполняется блок else. Например:
Здесь константа income равна 45, поэтому условие после оператора if возвратит false , и управление перейдет к блоку else .
Также если блок else содержит одну инструкцию, то можно сократить конструкцию:
Альтернативные условия и else if
С помощью конструкции else if мы можем добавить альтернативное условие к блоку if. Например, выше в условие значение income может быть больше определенном значению может быть меньше, а может быть равно ему. Отразим это в коде:
В данном случае выполнится блок else if. При необходимости мы можем использовать несколько блоков else if с разными условиями:
True или false
В javascript любая переменная может применяться в условных выражениях, но не любая переменная представляет тип boolean. И в этой связи возникает вопрос, что возвратит та или иная переменная — true или false? Много зависит от типа данных, который представляет переменная:
Если константа/переменная равна false , то возвращается false . Соответствено если константа/переменная равна true , то возвращается true
Возвращает false , если число равно 0 или NaN (Not a Number), в остальных случаях возвращается true
Например, следующая переменная будет возращать false:
Возвращает false , если константа/переменная равна пустой строке, то есть ее длина равна 0, в остальных случаях возвращается true
Всегда возвращает true
Конструкция switch..case
Конструкция switch..case является альтернативой использованию конструкции if..else и также позволяет обработать сразу несколько условий:
После ключевого слова switch в скобках идет сравниваемое выражение. Значение этого выражения последовательно сравнивается со значениями, помещенными после оператора сase. И если совпадение будет найдено, то будет выполняться определенный блок сase.
В конце каждого блока сase ставится оператор break, чтобы избежать выполнения других блоков.
Однако при необходимости можно сразу обработать несколько условий:
В данном случае для условия, когда income равно 100 и 200, выполняются одни и те же действия.
Если мы хотим также обработать ситуацию, когда совпадения не будет найдено, то можно добавить необязательный блок default :