Пошук уроків, статей та іншого контенту
Познайомтеся з конструкцією if, яка дозволяє виконувати код лише за певної умови. Навчіться створювати прості перевірки та керувати тим, які частини програми повинні виконуватися.
ifУ програмах часто потрібно виконати певну дію лише за конкретної умови:
показати повідомлення, якщо користувач увійшов у систему;
дозволити купівлю, якщо товар є в наявності;
вивести привітання, якщо зараз ранок;
перевірити, чи достатньо балів для складання тесту.
Для цього в JavaScript використовують умовну конструкцію if.
if (умова) {
// код виконається, якщо умова істинна
}Якщо умова має значення true, JavaScript виконає код усередині фігурних дужок. Якщо умова має значення false, цей код буде пропущено.
const temperature = 25;
if (temperature > 20) {
console.log("На вулиці тепло");
}У цьому прикладі:
У змінній temperature зберігається число 25.
JavaScript перевіряє умову temperature > 20.
Оскільки 25 більше за 20, умова є істинною.
У консоль виводиться повідомлення:
На вулиці теплоЯкщо змінити значення температури:
const temperature = 15;
if (temperature > 20) {
console.log("На вулиці тепло");
}умова буде хибною, тому програма нічого не виведе.
Будь-яка умова після перевірки дає одне з двох логічних значень:
true — істина;
false — хиба.
Наприклад:
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(7 === 7); // true
console.log(7 === 3); // falseЗначення true і false також можна зберігати у змінних:
const hasTicket = true;
if (hasTicket) {
console.log("Можна зайти на концерт");
}Тут умова hasTicket уже має значення true, тому повідомлення буде виведене.
Для створення умов часто використовують оператори порівняння:
| Оператор | Значення | |---|---| | > | більше | | < | менше | | >= | більше або дорівнює | | <= | менше або дорівнює | | === | строго дорівнює | | !== | строго не дорівнює |
Приклади:
const age = 20;
if (age >= 18) {
console.log("Доступ дозволено");
}
if (age !== ับ) {
console.log("Це не має сенсу");
}У другому прикладі допущено помилку: значення ับ не є коректним JavaScript-виразом. Правильний приклад:
const age = 20;
if (age !== 16) {
console.log("Вік не дорівнює 16");
}===Оператор === порівнює і значення, і тип даних:
console.log(5 === 5); // true
console.log(5 === "5"); // falseЧисло 5 і текст "5" мають різні типи, тому результатом буде false.
На початку вивчення JavaScript краще використовувати === та !==, щоб уникати неочікуваного перетворення типів.
if...elseІноді потрібно виконати одну дію, якщо умова істинна, і іншу — якщо умова хибна. Для цього використовують else.
if (умова) {
// код для істинної умови
} else {
// код для хибної умови
}Приклад:
const age = 16;
if (age >= 18) {
console.log("Ви повнолітні");
} else {
console.log("Ви неповнолітні");
}Оскільки 16 >= 18 — це false, виконається код у блоці else.
Конструкція if...else завжди виконує лише один із двох блоків:
блок if, якщо умова істинна;
блок else, якщо умова хибна.
else ifЯкщо потрібно перевірити більше ніж дві ситуації, використовують else if.
const score = 75;
if (score >= 90) {
console.log("Відмінно");
} else if (score >= 70) {
console.log("Добре");
} else if (score >= 50) {
console.log("Задовільно");
} else {
console.log("Тест не складено");
}JavaScript перевіряє умови зверху вниз:
Якщо score >= 90 — виведе "Відмінно" і завершить перевірку.
Якщо перша умова хибна, перевірить score >= 70.
Потім перевірить наступну умову.
Якщо всі умови хибні, виконається else.
Після виконання одного з блоків решта блоків цієї конструкції не виконується.
Розглянемо приклад:
const score = 95;
if (score >= 50) {
console.log("Тест складено");
} else if (score >= 90) {
console.log("Відмінно");
}Програма виведе "Тест складено", тому що перша умова score >= 50 уже істинна. До другої умови JavaScript не дійде.
Правильний порядок — спочатку перевіряти конкретніші або більші значення:
const score = 95;
if (score >= 90) {
console.log("Відмінно");
} else if (score >= 50) {
console.log("Тест складено");
} else {
console.log("Тест не складено");
}Фігурні дужки визначають блок коду, який належить до умови:
const isOnline = true;
if (isOnline) {
console.log("Користувач онлайн");
console.log("Можна надсилати повідомлення");
}Обидві команди виконаються лише тоді, коли isOnline має значення true.
Хоча для однієї команди JavaScript дозволяє не використовувати дужки:
if (isOnline)
console.log("Користувач онлайн");краще завжди ставити фігурні дужки. Так код легше читати, а помилок під час його змінювання буде менше.
Нижче наведено повну програму, яка перевіряє доступ користувача до знижки:
const age = 22;
const hasDiscountCard = true;
if (age >= 60 || hasDiscountCard) {
console.log("Ви отримуєте знижку");
} else {
console.log("Знижка недоступна");
}Умова використовує оператор ||, який означає «або»:
age >= 60 || hasDiscountCardУ цьому випадку знижка доступна, якщо:
користувачеві щонайменше 60 років;
або користувач має дисконтну картку.
Оскільки hasDiscountCard дорівнює true, програма виведе:
Ви отримуєте знижкуДля об'єднання кількох перевірок використовують логічні оператори.
&&Оператор && означає «і». Усі умови зліва та справа мають бути істинними.
const age = 25;
const hasDocument = true;
if (age >= 18 && hasDocument) {
console.log("Реєстрацію дозволено");
} else {
console.log("Реєстрацію заборонено");
}Реєстрацію дозволено лише тоді, коли:
вік не менший за 18 років;
є документ.
||Оператор || означає «або». Достатньо, щоб істинною була хоча б одна умова.
const isAdmin = false;
const isModerator = true;
if (isAdmin || isModerator) {
console.log("Доступ до панелі керування дозволено");
}!Оператор ! заперечує логічне значення:
const isBlocked = false;
if (!isBlocked) {
console.log("Користувач може продовжити");
}!false перетворюється на true, тому повідомлення буде виведене.
falseУ JavaScript деякі значення під час перевірки в if поводяться як false. До них належать:
false;
0;
"" — порожній рядок;
null;
undefined;
NaN.
Наприклад:
const username = "";
if (username) {
console.log("Ім'я введено");
} else {
console.log("Введіть ім'я");
}Порожній рядок вважається хибним значенням, тому виконається блок else.
Інші значення, зокрема непорожні рядки та ненульові числа, зазвичай поводяться як true:
const username = "Олена";
if (username) {
console.log(`Вітаємо, ${username}!`);
}У цьому прикладі рядок непорожній, тому повідомлення буде виведене.
Один if можна розмістити всередині іншого:
const isLoggedIn = true;
const isAdmin = true;
if (isLoggedIn) {
console.log("Користувач увійшов у систему");
if (isAdmin) {
console.log("Доступна панель адміністратора");
}
}Внутрішня умова перевіряється лише тоді, коли зовнішня умова істинна.
Вкладені умови корисні, але не варто робити їх надто глибокими. Якщо перевірок стає багато, код може бути складним для читання.
= замість ===Оператор = присвоює значення, а не порівнює його:
const role = "admin";
if (role = "user") {
console.log("Користувач");
}Так робити не слід. Для порівняння використовуйте ===:
const role = "admin";
if (role === "user") {
console.log("Користувач");
}Не ставте крапку з комою між умовою та блоком:
if (true); {
console.log("Повідомлення");
}У цьому випадку блок із повідомленням фактично не належить до if і виконається незалежно від умови.
Правильний варіант:
if (true) {
console.log("Повідомлення");
}Перевірте, щоб кожна відкривальна дужка { мала відповідну закривальну }:
const age = 20;
if (age >= 18) {
console.log("Доступ дозволено");
} else {
console.log("Доступ заборонено");
}Спочатку розміщуйте точніші умови, щоб загальна умова не перехопила всі випадки:
const number = 10;
if (number > 0) {
console.log("Додатне число");
} else if (number > 5) {
console.log("Число більше за 5");
}У цьому прикладі друга умова ніколи не буде перевірена для додатного числа. Якщо потрібно окремо обробити числа, більші за 5, розташуйте перевірку першою:
const number = 10;
if (number > 5) {
console.log("Число більше за 5");
} else if (number > 0) {
console.log("Додатне число");
}if виконує блок коду лише тоді, коли умова істинна.
else задає дію для випадку, коли умова хибна.
else if дозволяє перевіряти кілька умов.
Для порівняння зазвичай використовують === та !==.
Оператори >, <, >= і <= порівнюють числа та інші значення.
&& означає «і», || — «або», а ! — заперечення.
Фігурні дужки допомагають чітко визначити блок коду умови.
Порядок умов у конструкції if...else if...else має значення.