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

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

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

Условные операторы - это операторы языка JavaScript (ECMAScript), которые в зависимости от некоторого условия позволяют выполнить одно или несколько определённых инструкций.

Формы условных операторов в JavaScript:

• условный оператор if (с одной ветвью);
• условный оператор if...else (с двумя ветвями);
• условный оператор else if... (с несколькими ветвями);
• тернарный оператор (?: );
• оператор выбора switch .

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

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

If (условие) инструкция

Условный оператор if состоит из:

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

Например:

If (true) count = 4;

В этом примере в качестве условия используется значение true . Это означает, что инструкция count = 4 будет выполняться всегда. Данный пример просто приведен для пояснения принципа работы оператора if , т.к. он лишён всякого смысла.

Например , увеличим значение переменной votes на 1, если она (её тип) является числом:

If (typeof votes === "number") votes++;

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

If (typeof votes === "number") { votes++; console.log("Число голосов: " + votes); }

If (typeof votes === "number") { votes++; }

Оператор if...else

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

Синтаксис:

If (условие) { одно или несколько инструкций (будут выполняться, когда условие равно true или приведено к true) } else { одно или несколько инструкций (будут выполняться, когда условие равно false или приведено к false) }

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

If (number % 2) { console.log("Число нечётное!"); } else { console.log("Число чётное!"); }

Правило приведения условия к true или false

Если выражение в условии оператора if не равно true или false , то JavaScript приведёт его к одному из этих значений. Данное действие он выполняет с помощью так называемого "правила лжи".

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

• false (ложь);
• "" или "" (пустая строка);
• NaN (специальный числовой тип данных «не число»);
• 0 (число «ноль»);
• null («пустое» значение);
• undefined («неопределённое» значение).

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

If (nameUser) { console.log("Привет, " + name + "!"); } else { console.log("Привет, гость!"); }

Если переменная nameUser будет содержать пустую строку , то по правилу лжи, она будет приведена к значению false . Следовательно, в консоль будет выведено сообщение «Привет, гость!» .

А если, например, переменная nameUser будет содержать строку «Тимур» , то выражение в условии будет приведено к значению true . В результате, в консоли отобразится сообщение «Привет, Тимур!» .

Оператор else if... (несколько условий)

Синтаксис:

If (условие1) { инструкции 1 } else if (условие2) { инструкции 2 } else if (условие3) { инструкции 3 //... } else if (условиеN) { инструкции N } else { инструкции, которые будут выполнены, если ни одно из условий не равно true или не приведёно к этом значению }

Условный (тернарный) оператор (?:)

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

Синтаксис:

Условие? выражение1: выражение2

Тернарный оператор состоит из трех операндов, которые разделяются с помощью символов? и: . Условие тернарного оператора задаётся в первом операнде. Его также можно заключить в скобки. Если условие равно true или будет приведено к этому значению будет выполнено выражение1 , иначе - выражение 2 .

Например:

(number > 10) ? console.log("Число больше 10!") : console.log("Число меньше или равно 10");

В JavaScript допустимы множественные тернарные операторы (?:):

Var dayNumber = new Date().getDay(); day = (dayNumber === 0) ? "Воскресенье" : (dayNumber === 1) ? "Понедельник" : (dayNumber === 2) ? "Вторник" : (dayNumber === 3) ? "Среда" : (dayNumber === 4) ? "Четверг" : (dayNumber === 5) ? "Пятница" : (dayNumber === 6) ? "Суббота" : "Неизвестный день недели"; console.log("Сегодня " + day.toLowerCase() + ".");

Вышеприведённый пример, но с использованием множественной записи оператора if...else:

Var dayNumber = new Date().getDay(); if (dayNumber === 0) { day = "Воскресенье"; } else if (dayNumber === 1) { day = "Понедельник"; } else if (dayNumber === 2) { day = "Вторник"; } else if (dayNumber === 3) { day = "Среда"; } else if (dayNumber === 4) { day = "Четверг"; } else if (dayNumber === 5) { day = "Пятница"; } else if (dayNumber === 6) { day = "Суббота"; } else { day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");

Оператор switch

Оператор switch предназначен для выполнения одного варианта инструкций из нескольких в зависимости от значения выражения. Выбор того или иного варианта определяется посредством строгого равенства результата выражения значению случая (case ).

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

Switch (выражение) { case значение1: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение1» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) case значение2: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение2» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) // ... case значениеN: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значениеN» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) default: // инструкции, которые будут выполнены, если результат выражения не равен не одному из значений }

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

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

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

Var countCandyBoys = 1, countCandyGirls = 2, message; switch (countCandyBoys + countCandyGirls) { case 1: message = "Одна конфета"; break; case 2: case 3: message = "Две или три конфеты"; break; case 4: message = "Четыре конфеты"; break; default: message = "Не одна, не две, не три и не четыре конфеты"; } // выведем сообщение в консоль console.log(message);

В вышеприведенном примере вычисленное выражение равно 3. Следовательно, будет выполнены инструкции message = "Две или три конфеты" и break . Инструкция break прервёт дальнейшее выполнение оператора switch и передаст управление инструкции, идущей после него, т.е. console.log(message) . Она выведет в консоль сообщение «Две или три конфеты» .

Например , выведем выведем в консоль текущий день недели:

Var day = ""; switch(new Date().getDay()) { case 0: day = "Воскресенье"; break; case 1: day = "Понедельник"; break; case 2: day = "Вторник"; break; case 3: day = "Среда"; break; case 4: day = "Четверг"; break; case 5: day = "Пятница"; break; case 6: day = "Суббота"; break; default: day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");

Пример, в котором не используется инструкция break :

Var result = "success"; switch (result) { case "success": console.log("Успех!"); case "invalidCaptcha": console.log("Неверная капча!"); default: console.log("Ошибка!"); }

В этом примере выражение оператора switch равно success . Следовательно, будет выполнена инструкция console.log("Успех!") , которая выведет сообщение «Успех!» в консоль. Но так как после неё нет инструкции break , то выполнение скрипта будет продолжено в следующем варианте. Таким образом, инструкции будут выполняться до тех пока пока на пути не встретиться break или не будет достигнут конец оператора switch . В результате выполнения этого примера в консоль будут выведены 3 сообщения: «Успех!» , «Неверная капча!» и «Ошибка!» .

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

Исправленный вариант примера:

Var result = "success"; switch (result) { case "success": console.log("Успех!"); break; case "invalidCaptcha": console.log("Неверная капча!"); break; default: console.log("Ошибка!"); }

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

В JavaScript различают следующие логические операторы:

• && - логическое "И";
• || - логическое "ИЛИ";
• ! -логическое "НЕ".

Если в логическом выражении operand1 && operand2 используются булевы значения, то результатом этого выражения будет значение true , если каждый из них равен true ; иначе значением этого выражения будет значение false .

False && false // false true && false // false false && true // false true && true // true

Если в логическом выражении operand1 && operand2 используются не булевы значения, то результатом этого выражения будет operand1 , если его можно привести к false ; иначе результатом этого выражения будет operand2 .

5 && 0 // 0 1 && 5 // 5 "строка" && undefined // undefined "строка1" && "строка2" // "строка2"

Если в логическом выражении operand1 || operand2 используются булевы значения, то результатом этого выражения будет значение true , если хотя бы один из них равен true ; иначе значением этого выражения будет значение false .

False || false // false true || false // true false || true // true true || true // true

Если в логическом выражении operand1 || operand2 используются не булевы значения, то результатом этого выражения будет operand1 , если его можно привести к true ; иначе результатом этого выражения будет operand2 .

5 || 0 // 5 1 || 5 // 1 "строка" || undefined // "строка" "строка1" || "строка2" // "строка1"

Результатом логического выражения!operand1 будет значение true , если operand1 равно false или его можно привести к этому значению; иначе результатом этого выражения будет значение false .

False // true !true // false !"строка" // false !5 // false"

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

В программировании это тоже встречается очень часто. Для этого существуют два условных операторов, это if-else и switch-case . В этой статье я Вам расскажу об операторе if-else, а в следующей статье об switch-case.

Синтаксис условного оператора if-else следующий:

Если условие истина (true), то выполняется код из блока if, иначе, если условие ложь, то выполняется код из блока else.

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

Var money = 35000; // Допустим у нас есть 35 000 евро //Машину которую мы хотим купить стоит 50 000 евро. И возникает такое условие if(money > 50000){ document.write("Мы можем купить автомобиль"); }else{ document.write("Недостаточно денег для покупки машины"); }

Сохраняем документ, открываем его в браузере и видим, что на странице вывелось такое сообщение "Недостаточно денег для покупки машины". Если же у нас было бы больше 50 000 евро, то выполнился бы код из блока if. Если бы у нас было бы ровно 50 000 евро, то мы также не смогли бы купить автомобиль, потому что 50 000 не больше 50 000. Для того чтобы условие в данном случае было истина, то нужно написать знак больше либо равно (>=).

Замечание! Логическая операция равно пишется двумя знаками равенства (==) . Также присутствует и логическая операция меньше или равно (

использование фигурных скобок

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

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

Внутри if можно написать любые логические операции , будь то они простые или сложные. Можно использовать и операторы AND (&&) и OR (||).

Замечание! Присутствие блока else, не является обязательным .

Например, если a равен b, и c равен d, то выводим соответствующее сообщение, иначе если отсутствует блок else, то просто идем дальше, к следующей строчке.

Var a = 4, b = 4, c = 8, d = 8; if((a == b) && (c == d)) document.write("a равен b И c равен d"); document.write("Следующая строчка кода");

Оператор if - else if - else

После блока if, может последовать один и больше блоков else if, и в конце уже блок else. Это удобно в случае, когда нужно использовать больше чем одно условие.

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

Теперь перейдем к программированию.

Var socket = 2; // Кол-во розеток в доме if(socket == 1)  document.write("

Мы можем подключить только одно устройство

"); else if(socket == 2){ document.write("

Мы можем подключить только две устройства

"); document.write("

Например телевизор и ноутбук

"); }else{ document.write("

Мы можем подключить к электрической сети все устройства из дома

"); }

В зависимости от значения переменной socket, сработает тот или иной блок кода. Как Вы уже наверняка поняли, что если socket равен 1, то сработает первый блок кода. Если socket равен 2, то сработает второй блок кода и если socket имеет любое другое значение (даже отрицательное число) то сработает третий блок кода.

Сокращенная запись if else

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

Например, если значение переменной a больше значения переменной b, то в переменную x запишем такое сообщение, "Переменная a больше переменной b" , иначе запишем что "Переменная a меньше переменной b".

Var a = 50, b = 100, x; x = (a > b) ? "

Переменная a больше переменной b

" : "

Переменная a меньше переменной b

"; //Выводим полученный результат document.write(x);

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

Условный оператор позволяет пропустить или выполнить некоторый блок кода в зависимости от результата вычисления указанного выражения - условия. Можно сказать, что условный оператор является точкой принятия решения в программе, иногда его также называют оператор ветвления. Если представить, что программа - это дорога, а интерпретатор 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 . Для тех кто впервые столкнулся с такой формой записи и ему не очень понятно, как это работает, мы перепишем этот же пример, только в эквивалентной синтаксической форме, полностью показывающей вложенность конструкций:

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

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

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

• && - Логическое "И"
• || - "ИЛИ"
• ! - "НЕ"
• > - Л.О. больше П.О.
• >= - Л.О. больше или равен П.О.
• < - Л.О. меньше П.О.
• <= - Л.О. меньше или равен П.О.
• == - Л.О. равен П.О.
• != - Л.О. не равен П.О.
• |= - Л.О. равен себе ИЛИ П.О.
• &= - Л.О. равен себе И П.О.
• ^= - ИСКЛЮЧАЮЩЕЕ ИЛИ

Теперь рассмотрим следующий скрипт:

//***************************************** // логические операции // logik_if_else.js //***************************************** var a= 10 , b= 100 , WshShell, title, msg1, msg2, msg3, msg4, vbInformation = 64 ; // Создаем экземпляр класса WScript.Shell WshShell = WScript.CreateObject ("WScript.Shell" ) ; title = "Работа с условным оператором IF ELSE JS" ; with(WshShell) { if (a>= 5 && a<= 100 ) //истина msg1 = "TRUE" ; else msg1 = "FALSE" ; Popup (msg1, 5 , title, vbInformation) ; if (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) ;