css.in.ua
Підтримати

JS об'єкт if...else

Загальний опис

if...else — це умовна конструкція, яка дозволяє виконувати певний блок коду залежно від того, чи є задана умова істинною (true). Вона починається з ключового слова if, за яким у круглих дужках (()) записується умова. Якщо умова істинна, код у фігурних дужках ({}) після if виконується. Якщо умова хибна, виконується альтернативний блок після ключового слова else.

Наприклад:

const age = 18;
if (age >= 18) {
  console.log("Ви повнолітній.");
} else {
  console.log("Ви неповнолітній.");
}

У цьому прикладі перевіряється, чи дорівнює або перевищує змінна age значення 18. Якщо так, виводиться повідомлення "Ви повнолітній", інакше — "Ви неповнолітній".

Можна також додавати кілька умов за допомогою конструкції else if:

const temperature = 25;
if (temperature > 30) {
  console.log("Дуже спекотно.");
} else if (temperature > 15) {
  console.log("Комфортна температура.");
} else {
  console.log("Холодно.");
}

У цьому випадку перевіряються кілька умов: якщо температура перевищує 30, виконується перший блок; якщо значення більше 15, але не перевищує 30, виконується другий блок; інакше — останній.

Конструкція if...else також може бути вкладеною:

const userLoggedIn = true;
const userRole = "admin";
if (userLoggedIn) {
  if (userRole === "admin") {
    console.log("Ласкаво просимо, адміністраторе!");
  } else {
    console.log("Ласкаво просимо, користуваче.");
  }
} else {
  console.log("Будь ласка, увійдіть у систему.");
}

Це дозволяє створювати складну логіку для різних сценаріїв.

Порада:

Будьте обережні з "порожніми" значеннями. Значення null, undefined, 0, false, NaN і порожній рядок ("") вважаються хибними у if. Для перевірки використовуйте чіткі умови:

if (value !== undefined && value !== null) {
  console.log("Значення існує.");
}
Порада:

Використовуйте тернарний оператор для простих умов. Якщо потрібен лише один рядок для істинного або хибного випадку, тернарний оператор є більш компактним:

const message = age >= 18 ? "Доступ дозволено" : "Доступ заборонено";
console.log(message);
Порада:

Не забувайте про приведення типів. JavaScript автоматично приводить типи у виразах if. Наприклад, if ("0") буде істинним, оскільки рядок "0" вважається правдивим значенням. Використовуйте явне приведення типів для уникнення помилок:

if (Number("0")) { 
  console.log("Це число.");
}

Синтаксис

if (умова) {
  // Код, що виконується, якщо умова істинна
} else {
  // Код, що виконується, якщо умова хибна
}

Переглядачі

Переглядач

1

1

1

3

12
Переглядач

4.4

18

4

1
Переглядач

0.10.0

1.0

Приклади


Користувач вводить суму та вибирає тип користувача зі списку. Скрипт перевіряє, чи коректно введено значення. Потім за допомогою конструкції if...else визначається, яку знижку застосувати до суми, і результат відображається на екрані. Це корисно для інтерактивних веб-додатків, де потрібні динамічні розрахунки.

Цей приклад демонструє перевірку ролі користувача з виведенням різних повідомлень залежно від його статусу.

function checkAccess(user) {
  if (!user) {
    console.log("Помилка: користувач не зареєстрований.");
    return;
  }
  if (user.role === "admin") {
    console.log("Ласкаво просимо, адміністраторе!");
  } else if (user.role === "moderator") {
    console.log("Ласкаво просимо, модераторе!");
  } else {
    console.log("Ласкаво просимо, користуваче.");
  }
}

checkAccess({ role: "admin" }); // Ласкаво просимо, адміністраторе!
checkAccess({ role: "moderator" }); // Ласкаво просимо, модераторе!
checkAccess(null); // Помилка: користувач не зареєстрований.

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

function calculatePrice(quantity, isMember) {
  let pricePerItem = 100;
  if (isMember) {
    pricePerItem *= 0.9; // 10% знижки для членів
  }
  if (quantity > 10) {
    pricePerItem *= 0.85; // 15% знижки для замовлень понад 10 штук
  }
  return quantity * pricePerItem;
}

console.log(calculatePrice(5, true)); // 450 (5 * 90)
console.log(calculatePrice(15, false)); // 1275 (15 * 85)

Методи

Властивості

Спільнота

Зв'язок