В чем разница между логическими операторами && и ||?

Разница между логическими операторами && и ||

&& (AND) и || (OR) — это базовые логические операторы JavaScript, которые используются для комбинирования условий. Хотя оба работают с булевыми значениями, они имеют разную логику и поведение.

Оператор && (AND — "И")

&& возвращает true только если ОБА операнда истинны. Если хотя бы один операнд ложь — результат будет false.

// Базовые примеры
true && true      // true
true && false     // false
false && true     // false
false && false    // false

// С переменными
const age = 25;
const hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("Можете водить машину");
}

Таблица истинности для &&:

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

|| возвращает true если ХОТЯ БЫ ОДИН из операндов истинен. Результат будет false только если оба операнда ложь.

// Базовые примеры
true || true      // true
true || false     // true
false || true     // true
false || false    // false

// С переменными
const isAdmin = false;
const isModerator = true;

if (isAdmin || isModerator) {
  console.log("У вас есть права");
}

Таблица истинности для ||:

Важное свойство: Short-circuit evaluation

Оба оператора используют сокращённое вычисление (short-circuit evaluation). Это означает, что если результат уже определён на первом операнде, второй операнд вычисляться не будет.

Для &&:

// Если первое условие false, второе не проверяется
const user = null;
const result = user && user.name;  // null (второй операнд не вычислялся)

// Реальный пример
if (array.length > 0 && array[0].value > 10) {
  // array[0] не вызовет ошибку, если array пуст
}

Для ||:

// Если первое условие true, второе не проверяется
const userName = user.name || "Аноним";  // "Аноним", если user.name falsy

// Реальный пример с функциями
const config = getUserConfig() || getDefaultConfig();
// getDefaultConfig() вызовется только если getUserConfig() вернёт falsy

Возвращаемые значения

Важный момент: && и || возвращают не просто true/false, а сами значения!

// && возвращает:
// - первый falsy операнд (если он есть)
// - или последний операнд (если все truthy)
console.log(5 && 10);         // 10 (оба truthy, возвращается второй)
console.log(0 && 10);         // 0 (первый falsy, он возвращается)
console.log(null && "test");  // null (первый falsy)

// || возвращает:
// - первый truthy операнд
// - или последний операнд (если все falsy)
console.log(5 || 10);         // 5 (первый truthy)
console.log(0 || 10);         // 10 (первый falsy, проверяется второй)
console.log(null || "test");  // "test" (первый falsy, возвращается второй)

Практические примеры использования

Пример 1: Валидация формы с &&

const validateUser = (user) => {
  return (
    user &&                          // Объект существует
    user.email &&                    // Email заполнен
    user.email.includes("@") &&      // Email корректный
    user.age >= 18 &&                // Возраст достаточный
    user.accepted === true           // Условия приняты
  );
};

// Безопасная проверка свойств
const city = user && user.address && user.address.city;

Пример 2: Значения по умолчанию с ||

const greeting = userName || "Гость";
const port = process.env.PORT || 3000;
const theme = savedTheme || "light";

// Цепочка опций
const notification = userPreference || adminDefault || systemDefault;

Пример 3: Условный рендеринг в React

function UserProfile({ user, loading }) {
  return (
    <div>
      {/* && для условного рендеринга */}
      {loading && <Spinner />}
      {!loading && user && <UserCard user={user} />}
      
      {/* || для fallback значений */}
      <h1>{user?.name || "Unknown User"}</h1>
      <img src={user?.avatar || "/default-avatar.png"} />
    </div>
  );
}

Пример 4: Логика доступа

const canEdit = (user) => {
  return (
    (user.role === "admin" || user.role === "moderator") &&  // Роль подходит
    user.isActive &&                                          // Пользователь активен
    !user.isBanned                                            // Не забанен
  );
};

// Или более читаемо
const hasEditAccess = (user) => {
  const hasPermission = user.role === "admin" || user.role === "moderator";
  const isEligible = user.isActive && !user.isBanned;
  return hasPermission && isEligible;
};

Сравнение с nullish coalescing (??)

Для работы со значениями по умолчанию в современном JavaScript лучше использовать ?? вместо ||:

// || проблема: 0, "", false считаются falsy
const count = userCount || 0;  // Если userCount = 0, результат 0 (не так)

// ?? правильно: только null и undefined считаются nullish
const count = userCount ?? 0;  // Если userCount = 0, результат 0 (верно)

// Разница видна здесь:
const isEmpty = "" || "default";      // "default" (неправильно!)
const isEmpty = "" ?? "default";      // "" (правильно)

Порядок вычисления

// && имеет приоритет выше, чем ||
a || b && c   // Вычисляется как: a || (b && c)

// Лучше использовать скобки для ясности
a || (b && c)
(a || b) && c

Типичные ошибки

// Ошибка 1: Забыли про short-circuit
function getData() {
  console.log("Fetch data");
  return null;
}

const result = false && getData();  // getData не вызовется!

// Ошибка 2: Неправильная логика
if (age > 18 && age < 65) {  // AND правильно
  console.log("Рабочий возраст");
}

// Ошибка 3: Использование || для валидации нулевых значений
if (count || count === 0) {  // Сложновато
  // Лучше:
  if (count !== null && count !== undefined) {
}

Заключение

&& (AND) требует, чтобы ВСЕ условия были истинны, а || (OR) требует, чтобы ХОТЯ БЫ ОДНО условие было истинно. Оба оператора используют сокращённое вычисление, что делает их эффективными и полезными для проверки значений по умолчанию и безопасной навигации по объектам.