20. Логические операторы &&, ||, !

Добро пожаловать на урок, посвященный логическим операторам в JavaScript. Эти операторы - основа принятия решений в вашем коде, позволяющая создавать сложные условия и управлять потоком выполнения программы.

Что такое логические операторы?

Логические операторы позволяют нам комбинировать или изменять логические значения (true или false). В JavaScript есть три основных логических оператора:

• && (И): Возвращает true, если оба операнда true.
• || (ИЛИ): Возвращает true, если хотя бы один из операндов true.
• ! (НЕ): Возвращает true, если операнд false, и наоборот.

Примеры кода

Давайте рассмотрим примеры использования этих операторов.

Оператор && (И)

let age = 25;
let hasLicense = true;

// Проверяем, что человек старше 18 лет И имеет водительские права
if (age > 18 && hasLicense) {
  console.log("Может водить машину");
} else {
  console.log("Не может водить машину");
} // Вывод: Может водить машину

В этом примере, код в блоке if выполнится только если age > 18 и hasLicense оба будут true.

Оператор || (ИЛИ)

let isWeekend = true;
let isHoliday = false;

// Проверяем, что сегодня выходной ИЛИ праздник
if (isWeekend || isHoliday) {
  console.log("Можно отдохнуть!");
} else {
  console.log("Нужно работать!");
} // Вывод: Можно отдохнуть!

Здесь, код в блоке if выполнится, если isWeekend или isHoliday хотя бы один будет true.

Оператор ! (НЕ)

let isLoggedIn = false;

// Проверяем, что пользователь НЕ залогинен
if (!isLoggedIn) {
  console.log("Пожалуйста, войдите в систему.");
} else {
  console.log("Добро пожаловать!");
} // Вывод: Пожалуйста, войдите в систему.

Оператор ! инвертирует значение переменной isLoggedIn. Если она false, то !isLoggedIn будет true.

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

Логические операторы широко используются в веб-разработке. Например, при валидации форм:

<input type="text" id="username">
<input type="password" id="password">
<button id="submit">Submit</button>

<script>
  const usernameInput = document.getElementById("username");
  const passwordInput = document.getElementById("password");
  const submitButton = document.getElementById("submit");

  submitButton.addEventListener("click", function() {
    const username = usernameInput.value;
    const password = passwordInput.value;

    if (username !== "" && password !== "") { // Проверяем, что оба поля заполнены
      alert("Форма отправлена!");
    } else {
      alert("Пожалуйста, заполните все поля.");
    }
  });
</script>

В этом примере, мы используем && для проверки, что поля “username” и “password” не пустые перед отправкой формы. Во фреймворках, таких как React, Angular, и Vue.js, логические операторы активно используются для условного рендеринга компонентов, отображения или скрытия элементов интерфейса в зависимости от состояния приложения. Например, можно отобразить сообщение об ошибке, только если определенная переменная имеет значение false.

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

• Логические операторы позволяют создавать сложные условия.
• && (И) требует, чтобы оба операнда были true.
• || (ИЛИ) требует, чтобы хотя бы один операнд был true.
• ! (НЕ) инвертирует логическое значение.
• Эти операторы незаменимы при валидации форм, условном рендеринге и управлении логикой приложения.

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