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("Значення існує.");
}

автор: Bond правити

Порада

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

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

автор: Bond правити

Порада

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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)