Для чего нужен &&?

Для чего нужен оператор && (логический AND)

Оператор && в JavaScript используется для логического И (AND) операции. Это один из самых важных операторов в языке, и его использование выходит далеко за пределы простой логики.

Основное назначение: логические условия

// Проверка ДВА условия одновременно
const age = 25;
const hasLicense = true;

// Оба условия должны быть true
if (age >= 18 && hasLicense) {
  console.log('Can drive'); // Выполнится
}

// Если хотя бы одно условие false - весь результат false
const isStudent = false;
if (age >= 18 && isStudent && hasLicense) {
  console.log('Can drive'); // НЕ выполнится
}

Как работает && (short-circuit evaluation)

Это самое важное свойство && - он не вычисляет правую часть, если левая часть false.

// Пример 1: правая часть не вычисляется
false && console.log('This will NOT print'); // console.log не выполнится

// Пример 2: правая часть вычисляется
true && console.log('This WILL print'); // Выведет "This WILL print"

// Пример 3: с функциями
function expensiveFunction() {
  console.log('Expensive function called');
  return true;
}

const user = null;
user && expensiveFunction(); // "Expensive function called" НЕ выведется
// Потому что user = null (falsy), поэтому правая часть не выполняется

Практическое использование: условный рендеринг в React

Это один из самых популярных способов использования && во фронтенде.

import { useState } from 'react';

export function UserProfile({ user }) {
  const [isLoading, setIsLoading] = useState(false);
  const [hasError, setHasError] = useState(false);
  
  return (
    <div>
      {/* Показать спиннер только если загружается */}
      {isLoading && <div>Loading...</div>}
      
      {/* Показать сообщение об ошибке только если есть ошибка */}
      {hasError && <div className="error">Something went wrong</div>}
      
      {/* Показать профиль только если пользователь существует */}
      {user && (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      )}
      
      {/* Показать кнопку удаления только если пользователь админ */}
      {user && user.isAdmin && (
        <button onClick={() => deleteUser()}>Delete User</button>
      )}
    </div>
  );
}

Проверка существования перед доступом к свойствам

Это защищает от ошибок типа "Cannot read property of null/undefined".

// Без &&
const user = null;
console.log(user.name); // ERROR: Cannot read property 'name' of null

// С &&
const user = null;
console.log(user && user.name); // null (не ошибка)

// Глубокие объекты
const company = {
  department: {
    manager: {
      name: 'John'
    }
  }
};

// Без проверок - risky
console.log(company.department.manager.name); // "John"
// Но если department null - ОШИБКА

// С проверками
const managerName = company && 
  company.department && 
  company.department.manager && 
  company.department.manager.name;
  
console.log(managerName); // "John" или undefined (но не ошибка)

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

Важно понимать, что && возвращает значение, не просто true/false!

// && возвращает:
// - левую часть, если она falsy
// - правую часть, если левая truthy

console.log(false && 'right'); // false
console.log(true && 'right');  // 'right'

console.log(null && 42);       // null
console.log(42 && 99);         // 99

// Это используется для присваивания значений
const result = user && user.id;
// result будет либо user (если falsy), либо user.id

// Пример: fallback значение
const displayName = user && user.name || 'Anonymous';
// Сначала проверим user, потом его name, потом 'Anonymous'

Сравнение с другими операторами

// && (AND) - оба должны быть true
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false

// || (OR) - хотя бы один должен быть true
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

// ! (NOT) - инверсия
console.log(!true);  // false
console.log(!false); // true

Типичные паттерны с &&

// Паттерн 1: Условное выполнение функции
const handleClick = () => {
  user && user.isAdmin && deleteAll(); // Выполнить только если админ
};

// Паттерн 2: Установка значения с условием
const userEmail = user && user.email || 'no-email@example.com';

// Паттерн 3: Проверка перед операцией
const isValid = user && user.id && user.email;
if (isValid) {
  saveUser();
}

// Паттерн 4: Вложенные проверки
const canEdit = post && 
  post.author && 
  post.author.id === currentUser.id && 
  post.status !== 'published';

if (canEdit) {
  enableEditButton();
}

Опциональная цепочка (?.) - современный способ

ES2020 добавил оператор ?. для более безопасного доступа:

// Старый способ с &&
const managerName = user && user.profile && user.profile.manager && user.profile.manager.name;

// Новый способ с ?.
const managerName = user?.profile?.manager?.name;

// Оба дают один результат, но ?. читается лучше

// ?. также работает с методами
user?.save(); // Вызовет save только если user существует
array?.[0];   // Доступ к элементу массива только если array существует

Частая ошибка

// ПЛОХО: использование && вместо if
user && displayName && setLoading(false) && fetchUser();
// Это выглядит странно и читается как логика, но это про присваивание значений

// ХОРОШО: использование if для побочных эффектов
if (user && displayName) {
  setLoading(false);
  fetchUser();
}

// ХОРОШО: && для условного рендеринга
{user && displayName && <Button />}

Вывод

Оператор && имеет два основных применения:

1. Логическое условие - проверка ДВА условия одновременно
2. Условный рендеринг/выполнение - используя short-circuit evaluation

Это один из самых частых операторов в React коде для условного рендеринга элементов. Понимание его работы и особенностей - критично для написания чистого фронтенд-кода.