3. Условия (if/else/switch)

JavaScript: Мозги. Урок 2: Условия (if/else/switch)

Условия – это сердце логики в программировании. Они позволяют вашему коду принимать решения, выполнять разные действия в зависимости от определенных обстоятельств. В этом уроке мы разберем операторы if, else и switch, которые позволяют создавать разветвления в коде.

Оператор if

Самый простой способ ввести условие в JavaScript – использовать оператор if. Он проверяет, является ли выражение истинным (true). Если да, то выполняется блок кода, следующий за if.

let age = 20;

if (age >= 18) {
  console.log("Вы совершеннолетний.");
}

В этом примере, если переменная age больше или равна 18, в консоль будет выведено сообщение “Вы совершеннолетний.”.

Оператор else

Оператор else используется в сочетании с if. Он позволяет выполнить блок кода, если условие в if оказалось ложным (false).

let age = 15;

if (age >= 18) {
  console.log("Вы совершеннолетний.");
} else {
  console.log("Вы несовершеннолетний.");
}

Теперь, если age меньше 18, будет выведено сообщение “Вы несовершеннолетний.”.

Оператор else if

Для более сложных условий можно использовать else if. Он позволяет проверить несколько условий последовательно.

let score = 75;

if (score >= 90) {
  console.log("Отлично!");
} else if (score >= 70) {
  console.log("Хорошо!");
} else if (score >= 50) {
  console.log("Удовлетворительно.");
} else {
  console.log("Неудовлетворительно.");
}

В этом примере, будет выведено “Хорошо!”, так как score больше или равно 70, но меньше 90.

Оператор switch

Оператор switch – это альтернатива цепочке if/else if/else, особенно когда нужно сравнить одну переменную с несколькими значениями.

let day = "понедельник";

switch (day) {
  case "понедельник":
    console.log("Начало рабочей недели.");
    break;
  case "пятница":
    console.log("Скоро выходные!");
    break;
  default:
    console.log("Обычный день.");
}

Важно помнить про break в каждом case. Без него, выполнение кода “провалится” в следующий case. default срабатывает, если ни один из case не подошел.

Жизненный пример

Условия используются повсеместно в веб-разработке. Например, в интернет-магазине можно использовать if/else для отображения разной информации о товаре в зависимости от того, авторизован пользователь или нет.

let isLoggedIn = true;

if (isLoggedIn) {
  // Показать кнопку "Добавить в корзину"
  document.getElementById("addToCartButton").style.display = "block";
} else {
  // Показать кнопку "Войти"
  document.getElementById("loginButton").style.display = "block";
}

Во фреймворках React и Vue условия часто используются для рендеринга разных компонентов в зависимости от состояния приложения. Например, отображение модального окна только тогда, когда определенная переменная установлена в true.

Ключевые моменты

• if – выполняет код, если условие истинно.
• else – выполняет код, если условие в if ложно.
• else if – проверяет несколько условий последовательно.
• switch – альтернатива if/else if/else для сравнения переменной с несколькими значениями.
• Не забывайте про break в операторе switch.
• Условия – основа логики в программировании.

Интерактивный пример