Условные операторы. Функции и условия if-else в JavaScript Сокращенная запись if else

В этой статье рассмотрим условные и логические операторы языка 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"

Начинаем изучать тему условных операторов в 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-х элементов" );

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

В программировании это тоже встречается очень часто. Для этого существуют два условных операторов, это 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.

В JavaScript есть конструкция условий, которая влияет на выполнения ход программы. Если (по английски if) что-то есть, что-то истинно, тогда делать одно, иначе (по английски else) - делать другое.

Инструкция if

Давайте сразу рассмотрим схему работы инструкции if , она проста и не требует больших объяснений.

If (условие) { код для выполнения, если условие истинно }

Всё просто: если условие истинно, тогда код в блоке {...} выполняется.

Var digit = 4; if (digit == 4) { document.write("Значение переменной digit равно 4."); }

Можно сделать немного странный код:

Var digit = 4; if (true) { document.write("Условие истинно."); }

Инструкция else

В паре с инструкцией if может использоваться инструкция else . Она переводится как "иначе" и задаёт альтернативный код.

Var digit = 4; if (digit

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

После инструкции else может идти новая инструкция if. Так мы выполним проверку множественных условий.

Var digit = 4; if (digit

В JavaScript нет инструкции elseif (одним словом), как в PHP.

Если вам нужно выполнить только одну инструкцию, то фигурные скобки блока {...} не нужны. В нашем примере их можно не писать:

Var digit = 4; if (digit

Ложь в JavaScript

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

Повторим что есть ложь в JavaScript.

• Число 0 (ноль).
• Пустая строка "".
• Логическое значение false:)
• Значение null.
• Значение undefined.
• Значение NaN (Not a Number - не число).

Всё остальное является истиной.

Пара возможных ошибок:

If ("false") document.write("Это истина.
"); if (false) document.write("Это истина.

");

Тут нужно отличить строку "false" (взята в кавычки), от значения булевого типа false.

If (" ") document.write("Это истина.
"); else document.write("Это ложь.
");

Тут нужно отличить строку " " (внутри пробел), от пустой строки "". Пробел внутри строки делает её не пустой, а содержащий символ. Для интерпритатора не важно буква или пробел - символ есть символ.

Другие условные конструкции в JavaScript

• Консрукция switch JavaScript .
• Оператор вопросительный знак

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

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

Условные инструкции

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

Инструкция if

Инструкция if имеет две формы. Синтаксис первой формы:

Выражение в круглых скобках называется условием выполнения инструкции if или кратко условием . Сначала вычисляется значение выражения. Полученное значение, если необходимо, неявно преобразуется к булеву типу. Если результатом вычисления выражения является значение true , то инструкция выполняется. Если выражение возвращает false , то инструкция не выполняется:

If (true) alert("Выполнено!"); if (false) alert("Не выполнится!");

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

If (true) { var str = "Hello!"; alert(str); }

Синтаксис второй формы:

If (выражение) инструкция; else инструкция;

Ключевое слово else позволяет добавить инструкцию, выполняемую в том случае, если условие имеет ложное значение:

If (false) alert("Не выполнится"); else alert("Выполнится");

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

Var num = 2; if (num == 1) { alert("значение num: " + num); } else if (num == 2) { alert("значение num: " + num); } else { alert("Не знаю такого числа!"); }

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

Var num = 2; if (num == 1) { alert("значение num: " + num); } else { if (num == 2) { alert("значение num: " + num); } else { alert("Не знаю такого числа!"); } }