If else в JavaScript: условия на живых примерах

if else — это способ научить программу принимать простые решения. Если сумма заказа больше 5000 — дать скидку. Если email пустой — показать ошибку. Если пользователь нажал правильную кнопку — открыть следующий шаг

Без условий JavaScript умеет только выполнять команды по порядку. С условиями появляется логика

Разберем if else на живых задачах: скидка, проверка формы и выбор сообщения для пользователя

Первый if

const amount = 7900;

if (amount > 5000) {
  console.log("Даем скидку");
}

Читается почти по-русски: если amount больше 5000, выполнить код внутри фигурных скобок

Если сумма будет 3000, сообщение не появится

if else

Добавим второй вариант:

const amount = 3000;

if (amount > 5000) {
  console.log("Даем скидку");
} else {
  console.log("Скидки нет");
}

else срабатывает, если условие в if ложное

else if: несколько вариантов

Например, хотим разные статусы заказа:

const amount = 12000;

if (amount >= 10000) {
  console.log("Большой заказ");
} else if (amount >= 5000) {
  console.log("Средний заказ");
} else {
  console.log("Маленький заказ");
}

Порядок важен. Если сначала проверить amount >= 5000, большой заказ тоже пройдет это условие, и до amount >= 10000 код не дойдет

Проверка формы

HTML:

<input class="email" placeholder="Email">
<button class="send">Отправить</button>
<p class="result"></p>

JavaScript:

const emailInput = document.querySelector(".email");
const sendButton = document.querySelector(".send");
const result = document.querySelector(".result");

sendButton.addEventListener("click", () => {
  const email = emailInput.value;

  if (email === "") {
    result.textContent = "Введите email";
  } else {
    result.textContent = "Форма готова к отправке";
  }
});

Мы не отправляем настоящую форму, но тренируем важный принцип: сначала проверяем данные, потом действуем

Несколько условий через && и ||

&& означает "и":

const amount = 7900;
const isPaid = true;

if (amount > 5000 && isPaid === true) {
  console.log("Показываем бонус");
}

Оба условия должны быть истинными

|| означает "или":

const role = "admin";

if (role === "admin" || role === "manager") {
  console.log("Доступ разрешен");
}

Достаточно одного истинного условия

!: отрицание

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Показываем кнопку входа");
}

!isLoggedIn означает "если пользователь не авторизован"

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

Сравнение: == и ===

В JavaScript есть == и ===

Я бы с самого начала привыкал к строгому сравнению:

if (status === "paid") {
  console.log("Заказ оплачен");
}

=== сравнивает и значение, и тип. Это помогает избежать странных сюрпризов

Пример:

console.log(5 == "5");  // true
console.log(5 === "5"); // false

Для учебного кода и реальных проектов почти всегда лучше начинать с ===

Практический пример: калькулятор доставки

HTML:

<input class="amount" type="number" placeholder="Сумма заказа">
<label>
  <input class="is-city" type="checkbox">
  Доставка по городу
</label>
<button class="calculate">Рассчитать</button>
<p class="delivery-result"></p>

JavaScript:

const amountInput = document.querySelector(".amount");
const cityCheckbox = document.querySelector(".is-city");
const calculateButton = document.querySelector(".calculate");
const deliveryResult = document.querySelector(".delivery-result");

calculateButton.addEventListener("click", () => {
  const amount = Number(amountInput.value);
  const isCity = cityCheckbox.checked;

  if (amount >= 5000 && isCity) {
    deliveryResult.textContent = "Доставка бесплатная";
  } else if (amount >= 5000 && !isCity) {
    deliveryResult.textContent = "Скидка на доставку 50%";
  } else {
    deliveryResult.textContent = "Доставка платная";
  }
});

Здесь уже реальная логика: сумма заказа и чекбокс вместе влияют на результат

Частые ошибки

Один знак равно вместо сравнения

Неправильно:

if (status = "paid") {
  console.log("Оплачен");
}

Так мы присваиваем значение, а не сравниваем

Правильно:

if (status === "paid") {
  console.log("Оплачен");
}

Сравнение числа и строки

Значение из input приходит строкой:

const amount = amountInput.value;

Перед числовым сравнением лучше:

const amount = Number(amountInput.value);

Неверный порядок else if

Проверяй более узкие или большие условия раньше:

if (amount >= 10000) {
  // большой заказ
} else if (amount >= 5000) {
  // средний заказ
}

Слишком сложное условие в одну строку

Если условие стало длинным, вынеси части в переменные:

const hasBigOrder = amount >= 5000;
const canUseBonus = isLoggedIn && hasBigOrder;

if (canUseBonus) {
  console.log("Бонус доступен");
}

Мини-задания

1. Если возраст меньше 18, показать "Доступ ограничен".
2. Если сумма заказа больше 10000, показать "Подарок в заказе".
3. Если email пустой или пароль пустой, показать ошибку.
4. Если роль admin, открыть доступ к настройкам.
5. Сделать проверку промокода.

Пример промокода:

const promo = "START";

if (promo === "START") {
  console.log("Скидка 10%");
} else {
  console.log("Промокод не найден");
}

Ответы на эти вопросы могут быть для вас полезными

Что делает if else в JavaScript?

if else позволяет выполнить разный код в зависимости от условия. Если условие истинное, выполняется блок if, иначе блок else

Чем отличается == от ===?

== сравнивает с приведением типов. === сравнивает строго: и значение, и тип. Для старта лучше использовать ===

Как проверить несколько условий?

Через && для "и" и || для "или". Например: amount > 5000 && isPaid

Почему условие с input работает странно?

Потому что значение из поля ввода приходит строкой. Для чисел используй Number(input.value)

Можно ли писать if внутри if?

Да, но если вложенность растет, код становится труднее читать. Иногда лучше использовать else if, отдельные функции или заранее подготовленные переменные

Что почитать дальше по JavaScript

Чтобы двигаться по теме без рывков, рядом лучше открыть:

• JavaScript с нуля: меняем текст на странице по клику — применить условия в первом интерфейсном примере.
• События и клики в JavaScript: addEventListener без путаницы — использовать условия внутри обработчиков событий.
• ООП в JavaScript без академического тумана — перейти от условий к объектам и методам.
• Promise и AJAX в JavaScript: первый запрос через fetch — обрабатывать разные результаты ответа сервера.