Синтаксис if else. Условные операторы в Javascript - Конструкция IF-ELSE - Условия в Javascript - Основы. использование фигурных скобок

Начинаем изучать тему условных операторов в JavaScript . Здесь мы будем рассматривать конструкцию If-Else . В переводе на русский язык это условие читается как Если-То .

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

Например, если вечером будет ясно, то мы пойдём в парк.

если этот автомобиль стоит меньше 1000$, то я его куплю и т.п.

Таким образом, как Вы уже, наверное, поняли условие «Если» и следствие «То» сплошь и рядом встречаются в нашей жизни. То есть наше поведение в различных ситуациях в основном зависит от каких-либо условий.

То же самое относится и к языкам программирования. В них есть специальные конструкции, которые позволяют задавать определённые условия и выполнять действия, если указанные условия выполняются или не выполняются .

Давайте попробуем реализовать какой-нибудь простой пример применения условных операторов, а точнее конструкции If-Else в JavaScript .

Для начала рассмотрим, как работает оператор If в JavaScript

Для этого ниже сначала приведём пример, а затем его разберём.

var pogoda = "ясно" ; /* создаём переменную pogoda и присваиваем ей значение "ясно" */

if(pogoda == "ясно" ) /* создаём условие: если pogoda равно "ясно" - ИСТИНА*/

{ /* то... */

document .write ();

Мы с семьей вечером идем в Парк

На что следует обратить внимание в примере выше ?

Во-первых , на знаки равенства == и присваивания = в JavaScript . Их следует различать: то есть сначала мы создаём переменную и присваиваем ей значение. Затем в условии If мы говорим уже о равенстве.

Во-вторых , когда говорится о выполнении или же невыполнении условия, заключённого в фигурные скобки {} , то следует понимать, что язык JavaScript воспринимает условие либо как Истину , либо как Ложь . То есть если условие Истинно , как в нашем случае, то выполняется действие, заключённое в фигурные скобки {} .

Если же условие Ложно , как в примере ниже, то условие, заключённое в фигурных скобках {} , выполняться не будет.

var pogoda = "пасмурно" ;

if(pogoda == "ясно" ) /* теперь условие ЛОЖЬ: pogoda не равно "ясно" */

document .write ("Мы с семьей вечером идем в Парк" );

Вот так работает условный оператор If : если условие Истина - действие выполняется, если Ложь - не выполнятся. Всё просто.

Теперь поговорим о том, как работает конструкция If-Else в JavaScript . Else переводится как «Иначе» .

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

Продолжим работать с примерами, приведёнными ранее.

Если вечером будет ясно, то мы пойдём в парк, иначе (если будет пасмурно) мы останемся дома и будем смотреть телевизор .

Или если этот автомобиль стоит меньше 1000$, то я его куплю, иначе (если он стоит дороже ) я на эти деньги отправлюсь в путешествие .

В JavaScript также есть такая возможность - предоставлять альтернативу (делать что-то другое) , если условие не выполняется. В JavaScript мы можем создавать подобные условия при помощи конструкции If-Else . Давайте обратимся к примеру.

var pogoda = "пасмурно" ; /* переменной pogoda присваиваем значение "пасмурно" */

if(pogoda == "ясно" ) /* создаём условие: если pogoda равно "ясно" - это ИСТИНА */

document .write ("Мы с семьей вечером идем в Парк" );

else /* иначе - если pogoda не равно "ясно" - это ЛОЖЬ */

{
document .write ("

" + "Мы остаёмся дома - смотреть телевизор" );
}

Мы остаёмся дома - смотреть телевизор

Разберём приведённый пример.

Итак, если условие Истинно , то выполняется действие, следующее после оператора If , заключённое в фигурные скобки {} .

Если же условие Ложно , то выполняется действие, следующее после оператора Else , также заключённое в фигурные скобки {} .

Мы рассмотрели, как работает простая, но часто использующаяся в JavaScript конструкция If-Else . И здесь, на будущее, следует сказать о том, что каким бы сложным ни было условие, в первую очередь имеет значение то, что Истинно оно или Ложно .

Для закрепления пройденного материала «Условные операторы в Javascript - Конструкция IF-ELSE » рассмотрим ещё один пример.

Только теперь используем условие If-Else при работе с числами.

var count = 10 ;

if(count = 3 ) /* создаём условие: если число элементов массива friends больше или равно 3, то....*/

document .write ("Это большой массив, в котором как минимум 3 элемента" );

else /* иначе... */

{
document .write ("Это маленький массив, в котором менее 3-х элементов" );

В данном примере мы сначала объявляем четыре переменные с помощью ключевого слова var, и сразу присваиваем им числовые значения. Далее с помощью операторов инкремента и декремента мы меняем значения чисел. Информация выводится с помощью функции Echo (смотрите статью " "). Что бы не писать лишний раз имя объекта, я использовал конструкцию with{} .

Логические операторы

Логические операторы используются при проверке условия, что бы не повторяться, я сделаю сокращение: левый операнд – Л.О., а правый операнд – П.О.

&& - Логическое "И"
|| - "ИЛИ"
! - "НЕ"
> - Л.О. больше П.О.
>= - Л.О. больше или равен П.О.
< - Л.О. меньше П.О.

= 5 && a= 5 || b== 100 ) //истина msg2 = "TRUE" ; else msg2 = "FALSE" ; Popup (msg2, 5 , title, vbInformation) ; //условный оператор js if else if (! a) //ложь msg3 = "TRUE" ; else msg3 = "FALSE" ; Popup (msg3, 5 , title, vbInformation) ; if (a&= 100 ) //ложь msg4 = "TRUE" ; else msg4 = "FALSE" ; Popup (msg4, 5 , title, vbInformation) ; }

Как и в предыдущем скрипте, тут я использовал конструкцию with для сокращения программного кода. Однако, для вывода информация мы воспользовались функцией Popup (смотрите статью " "). В результате, диалоговые окна закроются автоматически через несколько секунд. Обратите внимание, что в данном примере мы не использовали фигурные скобки в условном операторе js if, они актуальны только тогда, когда нужно выполнить не одну строку кода, а несколько.

Напоследок, давайте рассмотрим такой практический пример, как решение квадратного уравнения:

// Решение квадратного уравнения // uravnenije_if_else.js // *********************************************************** var a, b, c, d, x, x1, x2; //Объявляем переменные a=- 2 ; b= 6 ; c= 20 ; //Идет поиск дискриминанта d= Math .pow (b, 2 ) - 4 * a* c; if (d== 0 ) { x= b/ (2 * a) ; msg= "Уравнение имеет одно решение, x ровно " + x } else { if (d> 0 ) { x1= (- b+ Math .sqrt (d) ) / (2 * a) ; x2= (- b- Math .sqrt (d) ) / (2 * a) ; msg= "Уравнение имеет два решения \n x1 ровно " + x1 + "\n x2 ровно " + x2; // условный оператор if else js } else msg= "Решения нет" ; } WScript.Echo (msg) ;

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

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

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

Оператор if/else

Оператор if - это базовый управляющий оператор, позволяющий интерпретатору JavaScript принимать решения или, точнее, выполнять операторы в зависимости от условий. Оператор if имеет две формы. Первая:

if (выражение) оператор

В этой форме сначала вычисляется выражение. Если полученный результат является истинным, то оператор выполняется. Если выражение возвращает ложное значение, то оператор не выполняется. Например:

If (username == null) // Если переменная username равна null или undefined username = "Alex"; // определить ее

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

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

if (выражение) оператор1 else оператор2

Эта форма выполняет оператор1, если выражение возвращает истинное значение, и оператор2, если выражение возвращает ложное значение. Например:

If (n == 1) console.log("Получено 1 новое сообщение."); else console.log("Получено " + n + " новых сообщений.");

Оператор else if

Оператор if/else вычисляет значение выражения и выполняет тот или иной фрагмент программного кода, в зависимости от результата. Но что если требуется выполнить один из многих фрагментов? Возможный способ сделать это состоит в применении оператора else if. Формально он не является самостоятельным оператором JavaScript; это лишь распространенный стиль программирования, заключающийся в применении повторяющегося оператора if/else:

If (n == 1) { // Выполнить блок 1 } else if (n == 2) { // Выполнить блок 2 } else if (n == 3) { // Выполнить блок 3 } else { // Если ни один из предыдущих операторов else не был выполнен, выполнить блок 4 }

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

Оператор switch

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

Оператор switch предназначен именно для таких ситуаций. За ключевым словом switch следует выражение в скобках и блок кода в фигурных скобках:

switch(выражение) { инструкции }

Однако полный синтаксис оператора switch более сложен, чем показано здесь. Различные места в блоке помечены ключевым словом case , за которым следует выражение и символ двоеточия.

Когда выполняется оператор switch, он вычисляет значение выражения, а затем ищет метку case, соответствующую этому значению (соответствие определяется с помощью оператора идентичности ===). Если метка найдена, выполняется блок кода, начиная с первой инструкции, следующей за меткой case. Если метка case с соответствующим значением не найдена, выполнение начинается с первой инструкции, следующей за специальной меткой default: . Если метка default: отсутствует, блок оператора switch пропускается целиком.

Работу оператора switch сложно объяснить на словах, гораздо понятнее выглядит объяснение на примере. Следующий оператор switch эквивалентен повторяющимся операторам if/else, показанным в предыдущем примере:

Switch(n) { case 1: // Выполняется, если n === 1 // Выполнить блок 1 break; // Здесь остановиться case 2: // Выполняется, если n === 2 // Выполнить блок 2 break; // Здесь остановиться case 3: // Выполняется, если n === 3 // Выполнить блок 3 break; // Здесь остановиться default: // Если все остальное не подходит... // Выполнить блок 4 break; // Здесь остановиться }

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

В случае отсутствия операторов break оператор switch начнет выполнение блока кода с меткой case, соответствующей значению выражения, и продолжит выполнение операторов до тех пор, пока не дойдет до конца блока. В редких случаях это полезно для написания программного кода, который переходит от одной метки case к следующей, но в 99% случаев следует аккуратно завершать каждый блок case оператором break. (При использовании switch внутри функции вместо break можно использовать оператор return. Оба этих оператора служат для завершения работы оператора switch и предотвращения перехода к следующей метке case.)

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

Function convert(x) { switch(typeof x) { // Преобразовать число в шестнадцатеричное целое case "number": return x.toString(16); // Вернуть строку, заключенную в кавычки case "string": return """ + x + """; // Любой другой тип преобразуется обычным способом default: return x.toString(); } } console.log(convert(1067)); // Результат "42b"

Обратите внимание, что в двух предыдущих примерах за ключевыми словами case следовали числа или строковые литералы. Именно так оператор switch чаще всего используется на практике, но стандарт ECMAScript позволяет указывать после case произвольные выражения.

Оператор switch сначала вычисляет выражение после ключевого слова switch, а затем выражения case в том порядке, в котором они указаны, пока не будет найдено совпадающее значение. Факт совпадения определяется с помощью оператора идентичности ===, а не с помощью оператора равенства ==, поэтому выражения должны совпадать без какого-либо преобразования типов.

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

Как объяснялось ранее, если ни одно из выражений case не соответствует выражению switch, оператор switch начинает выполнение оператора с меткой default:. Если метка default: отсутствует, тело оператора switch полностью пропускается. Обратите внимание, что в предыдущих примерах метка default: указана в конце тела оператора switch после всех меток case. Это логичное и обычное место для нее, но на самом деле она может располагаться в любом месте внутри оператора switch.

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

Оператор if

Оператор if является наиболее простым из операторов ветвлений.

Синтаксис оператора if:

Оператор if сначала вычисляет условное выражение указанное в круглых скобках, результатом этого выражения является булево значение. Если полученный результат является истинным (true), то инструкция выполняется. Если выражение возвращает ложное значение (false), то инструкция не выполняется. В качестве условия может применяться выражение любой сложности.

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

Следующий код демонстрирует применение оператора if:

Операторы if могут быть вложенными в другие операторы if:

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

Оператор if else

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

Синтаксис оператора if else:

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

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

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

Последний else не относится к if($a) , так как он находится не во внутреннем блоке, поэтому ближайший к нему получается if($i) . Оператор else расположенный внутри блока относится к if($b) , потому что этот if - является ближайшим к нему.

Конструкция elseif/else if

Оператор if/else вычисляет значение условного выражения и выполняет тот или иной фрагмент программного кода. Но что, если требуется выполнить один из многих фрагментов? Если вам нужно проверить несколько условий подряд, то для этого подойдет конструкция elseif или else if (это одна и та же конструкция, просто по разному записана). Формально она не является самостоятельной конструкцией PHP - это лишь распространенный стиль программирования, заключающийся в применении повторяющихся операторов if/else . Она позволяет проверять дополнительные условия, пока не будет найдено истинное или достигнут блок else . Конструкция elseif/else if должна располагаться после оператора if и перед оператором else , если такой имеется.

Здесь проверяется три условия, и, в зависимости от значения переменной $username , выполняются разные действия.

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

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax if (condition) statement1 condition An expression that is considered to be either truthy or falsy . statement1 Statement that is executed if condition is truthy . Can be any statement, including further nested if statements. To execute multiple statements, use a block statement ({ ... }) to group those statements. To execute no statements, use an empty statement. statement2 Statement that is executed if condition is falsy and the else clause exists. Can be any statement, including block statements and further nested if statements. Description

Multiple if...else statements can be nested to create an else if clause. Note that there is no elseif (in one word) keyword in JavaScript.

If (condition1) statement1 else if (condition2) statement2 else if (condition3) statement3 ... else statementN

To see how this works, this is how it would look if the nesting were properly indented:

If (condition1) statement1 else if (condition2) statement2 else if (condition3) ...

To execute multiple statements within a clause, use a block statement ({ ... }) to group those statements. In general, it is a good practice to always use block statements, especially in code involving nested if statements:

If (condition) { statements1 } else { statements2 }

Do not confuse the primitive Boolean values true and false with truthiness or falsiness of the Boolean object. Any value that is not false , undefined , null , 0 , -0 , NaN , or the empty string (""), and any object, including a Boolean object whose value is false, is considered truthy when used as the condition. For example:

Var b = new Boolean(false); if (b) // this condition is truthy

Examples Using if...else if (cipher_char === from_char) { result = result + to_char; x++; } else { result = result + clear_char; } Using else if

Note that there is no elseif syntax in JavaScript. However, you can write it with a space between else and if:

If (x > 50) { /* do the right thing */ } else if (x > 5) { /* do the right thing */ } else { /* do the right thing */ }

Assignment within the conditional expression

It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:

If (x = y) { /* do the right thing */ }

If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:

If ((x = y)) { /* do the right thing */ }

Specifications Specification Status Comment

ECMAScript Latest Draft (ECMA-262)	Draft
ECMAScript 2015 (6th Edition, ECMA-262) The definition of "if statement" in that specification.	Standard
ECMAScript 5.1 (ECMA-262) The definition of "if statement" in that specification.	Standard
ECMAScript 3rd Edition (ECMA-262) The definition of "if statement" in that specification.	Standard
ECMAScript 1st Edition (ECMA-262) The definition of "if statement" in that specification.	Standard	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Server Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js if...else

Chrome Full support 1

Edge Full support 12

Firefox Full support 1

IE Full support 3

Opera Full support Yes

Safari Full support Yes

WebView Android Full support 1

Chrome Android Full support 18

Firefox Android Full support 4

Opera Android Full support Yes

Safari iOS Full support Yes

Samsung Internet Android Full support 1.0

nodejs Full support Yes