Умовний оператор if else. Функції та умови if-else в JavaScript Умовний вираз javascript

У цій статті розглянемо умовні і логічні оператори мови 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)? "Вiвторок": (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 = "Вiвторок";) 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 = "Вiвторок"; 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 "

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

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

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

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

Починаємо вивчати тему умовних операторів в JavaScript. Тут ми будемо розглядати конструкцію If-Else. У перекладі на російську мову це умова читається як Якщо-Те.

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

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

якщо цей автомобіль коштує менше 1000 $, то я його куплю і т.п.

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

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

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

Для початку розглянемо, як працює оператор If в JavaScript

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

Ми з сім'єю увечері йдемо в Парк

На що слід звернути увагу в прикладі вище?

По-перше, на знаки рівності == і присвоювання = в JavaScript. Їх слід розрізняти: тобто спочатку ми створюємо змінну і присвоюємо їй значення. Потім в умови If ми говоримо вже про рівність.

По-друге, коли йдеться про виконання або ж невиконання умови, укладеного у фігурні дужки (), то слід розуміти, що мова JavaScript сприймає умову абояк Істину, або як Брехня. Тобто якщо умова Істинно, як в нашому випадку, то виконується дія, укладену в фігурні дужки ().

Якщо ж умова Помилково, як в прикладі нижче, то умова, укладену в фігурних дужках (), виконуватися не буде.

Ось так працює умовний оператор If: якщо умова Істина - дія виконується, якщо Брехня - не виконав. Все просто.

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

Давайте знову звернемося до реального життя. У більшості випадків, якщо яка-небудь умова виконується, то ми робимо одну. Якщо ж воно не виконується - «Иначе», то ми робимо інше.

Продовжимо працювати з прикладами, наведеними раніше.

Якщо ввечері буде ясно, то ми підемо в парк, інакше (Якщо буде похмуро)ми залишимося вдома і будемо дивитися телевізор.

Або якщо цей автомобіль коштує менше 1000 $, то я його куплю, інакше (Якщо він коштує дорожче) Я на ці гроші відправлюся в подорож.

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

Ми залишаємося вдома - дивитися телевізор

Розберемо наведений приклад.

Отже, якщо умова Істинно, то виконується дія, наступне після оператора If, укладену в фігурні дужки ().

Якщо ж умова Помилково, то виконується дія, наступне після оператора Else, також укладену в фігурні дужки ().

Ми розглянули, як працює проста, але часто використовується в JavaScript конструкція If-Else. І тут, на майбутнє, слід сказати про те, що яким би складним не було умова, в першу чергу має значення те, що Істинно воно або Помилково.

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

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

Мінлива count менше або дорівнює 10

Тут, як і в попередніх прикладах, все просто. В даному випадку змінна count дорівнює 10, тобто умова ІСТИННО і на екран виводиться відповідне повідомлення.

У прикладі нижче умова не виконується: змінна count більше 10, тобто умова помилковою, а значить, виводиться на екран повідомлення, наступне за оператором Else.

Мінлива count більше 10

Отже, тут ми розглянули найпростіші приклади застосування умовних операторів в JavaScript. Ось так - зовсім не складно, працює конструкція If-Else.

Візьміть масив друзів з попередньої теми: var friends = [ "Олексій", "В'ячеслав", "Григорій", "Настя", "Павло"];

Напишіть умова, яке перевіряє : Якщо кількість елементів в масиві більше або дорівнює 3, то виводиться повідомлення про те, що це великий масив, в якому як мінімум 3 елементи. А інакше, виведіть на екран повідомлення про те, що це маленький масив, в якому менше 3-х елементів.

Перш ніж написати перевірочне умова, необхідно пам'ятати і знати про те, як порахувати число елементів в Масиві. У цьому нам допоможе властивість length.

Це ж завдання можна було виконати трохи інакше, використовуючи більш короткий варіант написання коду. Змінну count, в яку заноситься число елементів масиву створювати не обов'язково. Дивіться приклад нижче ...