Пошук уроків, статей та іншого контенту
Дізнайтеся як працюють логічні оператори
Логічні оператори використовують для роботи з умовами. Вони допомагають перевірити кілька умов одночасно, вибрати одну з альтернатив або заперечити результат перевірки.
У JavaScript є три основні логічні оператори:
&& — логічне «І»;
|| — логічне «АБО»;
! — логічне «НЕ».
Результатом логічного виразу часто є true або false:
const hasAccess = true;
const isBlocked = false;
console.log(hasAccess); // true
console.log(isBlocked); // false&&Оператор && означає «І». Вираз повертає істину лише тоді, коли всі умови істинні.
const age = 25;
const hasTicket = true;
const canEnter = age >= 18 && hasTicket;
console.log(canEnter); // trueУ цьому прикладі:
age >= 18 повертає true;
hasTicket також має значення true;
обидві умови істинні, тому результат — true.
Якщо хоча б одна умова хибна, весь вираз буде хибним:
const age = 16;
const hasTicket = true;
const canEnter = age >= 18 && hasTicket;
console.log(canEnter); // falseТаблиця результатів оператора &&:
true && true → true;
true && false → false;
false && true → false;
false && false → false.
ifconst username = "Olena";
const password = "secret123";
if (username !== "" && password !== "") {
console.log("Форма заповнена");
}Повідомлення з’явиться лише тоді, коли і username, і password не будуть порожніми.
||Оператор || означає «АБО». Вираз повертає істину, якщо хоча б одна з умов істинна.
const isAdmin = false;
const isModerator = true;
const canManageUsers = isAdmin || isModerator;
console.log(canManageUsers); // trueТаблиця результатів оператора ||:
true || true → true;
true || false → true;
false || true → true;
false || false → false.
ifconst isWeekend = false;
const isHoliday = true;
if (isWeekend || isHoliday) {
console.log("Сьогодні можна відпочити");
}Умова виконається, якщо сьогодні вихідний або свято.
!Оператор ! означає «НЕ». Він заперечує логічне значення:
!true → false;
!false → true.
const isLoggedIn = false;
console.log(!isLoggedIn); // trueЦей оператор часто використовують, щоб перевірити протилежну ситуацію:
const isLoading = false;
if (!isLoading) {
console.log("Дані вже завантажено");
}У прикладі !isLoading означає «завантаження не виконується».
Логічні оператори можна комбінувати в одному виразі:
const age = 22;
const hasDocument = true;
const hasPermission = false;
const canBuyTicket =
age >= 18 && hasDocument && (hasPermission || age >= 21);
console.log(canBuyTicket); // trueРозберімо умову:
age >= 18 — людина повнолітня;
hasDocument — є документ;
hasPermission || age >= 21 — є дозвіл або вік не менше 21 року.
Дужки допомагають явно визначити порядок перевірки та зробити код зрозумілішим.
У логічних виразах оператори мають такий порядок пріоритету:
!;
&&;
||.
Наприклад:
const result = true || false && false;
console.log(result); // trueСпочатку виконується false && false, що дає false. Потім виконується true || false, що дає true.
Проте для зрозумілості краще використовувати дужки:
const result = true || (false && false);
console.log(result); // trueДужки особливо важливі у складних умовах:
const canOpenPage = isAdmin || (isLoggedIn && hasSubscription);Це означає:
адміністратор може відкрити сторінку;
або сторінку може відкрити авторизований користувач із підпискою.
falseУ JavaScript не лише false вважається хибним значенням. Під час перевірки в умові такими значеннями також є:
false;
0;
-0;
"";
null;
undefined;
NaN.
Усі інші значення зазвичай вважаються істинними, зокрема:
непорожній рядок;
будь-яке ненульове число;
масив, навіть порожній;
об’єкт, навіть порожній.
if ("JavaScript") {
console.log("Рядок є істинним");
}
if (0) {
console.log("Цей код не виконається");
}
if ([]) {
console.log("Навіть порожній масив є істинним");
}Для явного перетворення значення на true або false можна використати Boolean():
console.log(Boolean("hello")); // true
console.log(Boolean("")); // false
console.log(Boolean(42)); // true
console.log(Boolean(0)); // falsetrue або falseУ JavaScript оператори && і || можуть повертати самі операнди, а не обов’язково логічне значення.
&&Оператор && повертає перше хибне значення. Якщо всі значення істинні, він повертає останнє значення:
console.log(true && "JavaScript"); // "JavaScript"
console.log(false && "JavaScript"); // false
console.log(10 && 20); // 20||Оператор || повертає перше істинне значення. Якщо всі значення хибні, він повертає останнє значення:
console.log("" || "Гість"); // "Гість"
console.log("Олена" || "Гість"); // "Олена"
console.log(false || 0); // 0Цю властивість часто використовують для значення за замовчуванням:
function greet(name) {
const displayName = name || "Гість";
console.log(`Привіт, ${displayName}!`);
}
greet("Олена"); // Привіт, Олена!
greet(""); // Привіт, Гість!У цьому прикладі, якщо name — порожній рядок або інше хибне значення, використовується "Гість".
Логічні оператори виконуються зліва направо та можуть не перевіряти праву частину виразу.
&&Якщо ліва частина && є хибною, права частина вже не вплине на результат:
const isLoggedIn = false;
isLoggedIn && console.log("Показуємо профіль");Повідомлення не буде виведене, оскільки isLoggedIn має значення false.
Це можна прочитати так: «Якщо користувач увійшов у систему, покажи профіль».
||Якщо ліва частина || є істинною, права частина вже не перевіряється:
const hasName = true;
hasName || console.log("Ім'я не вказано");Повідомлення не буде виведене, оскільки hasName має значення true.
??Оператор ?? називають оператором нульового злиття. Він повертає праве значення лише тоді, коли ліве дорівнює null або undefined.
const username = null;
const displayName = username ?? "Гість";
console.log(displayName); // "Гість"Оператор ?? відрізняється від ||:
const count = 0;
console.log(count || 10); // 10
console.log(count ?? 10); // 0|| вважає 0 хибним значенням і замінює його на 10. Оператор ?? замінює лише null або undefined, тому зберігає 0.
Нижче функція перевіряє, чи може користувач отримати доступ до закритого розділу:
function checkAccess(user) {
const isAdult = user.age >= 18;
const hasAccount = user.email !== "";
const hasSubscription = user.subscription === "premium";
const isAdmin = user.role === "admin";
if (isAdmin || (isAdult && hasAccount && hasSubscription)) {
return "Доступ дозволено";
}
return "Доступ заборонено";
}
const firstUser = {
age: 25,
email: "olena@example.com",
subscription: "premium",
role: "user"
};
const secondUser = {
age: 16,
email: "ivan@example.com",
subscription: "free",
role: "user"
};
console.log(checkAccess(firstUser)); // Доступ дозволено
console.log(checkAccess(secondUser)); // Доступ забороненоКористувач отримує доступ, якщо:
він адміністратор;
або він повнолітній, має електронну пошту та преміумпідписку.
= і ===Оператор = присвоює значення, а === порівнює значення та тип:
const age = 18;
if (age === 18) {
console.log("Вік дорівнює 18");
}Не слід записувати присвоєння замість порівняння:
// Помилка: тут змінній присвоюється значення
if (age = 18) {
console.log("Неправильна перевірка");
}Значення "" і 0 є хибними:
const title = "";
const quantity = 0;
if (!title) {
console.log("Назву не вказано");
}
if (!quantity) {
console.log("Кількість дорівнює нулю або не вказана");
}Якщо потрібно окремо перевірити саме 0, краще зробити це явно:
if (quantity === 0) {
console.log("Товарів немає");
}Складні умови без дужок важче читати й легше зрозуміти неправильно:
const canEdit = isAdmin || isModerator && isLoggedIn;Через пріоритет операторів цей вираз обчислюється як:
const canEdit = isAdmin || (isModerator && isLoggedIn);Якщо саме це й потрібно, краще записати умову з дужками:
const canEdit = isAdmin || (isModerator && isLoggedIn);&& і || завжди повертають true або falseconst name = "" || "Гість";
console.log(name); // "Гість", а не trueЯкщо потрібен саме логічний результат, використовуйте явне перетворення:
const hasName = Boolean(name);
console.log(hasName); // true&& повертає істину, якщо всі умови істинні.
|| повертає істину, якщо хоча б одна умова істинна.
! заперечує логічне значення.
Оператори && і || можуть повертати не лише true або false, а й самі операнди.
Логічні оператори використовують скорочене виконання.
Значення false, 0, "", null, undefined і NaN є хибними в умовах.
Дужки допомагають зробити складні логічні вирази зрозумілими.
?? перевіряє лише null і undefined, тому відрізняється від ||.