Какие знаешь особенности логических операторов?

Особенности логических операторов в JavaScript

Основные логические операторы

JavaScript имеет три основных логических оператора: && (AND), || (OR) и ! (NOT). Они имеют свои особенности, которые важно понимать.

1. && (AND) — логическое И

Оператор && возвращает первое ложное значение или последнее значение, если все истинны.

console.log(true && 'Hello');        // 'Hello'
console.log(false && 'Hello');       // false
console.log(1 && 2 && 3);           // 3
console.log(1 && false && 3);       // false
console.log(null && 'Text');        // null

Особенность: short-circuit (короткое замыкание)

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

Практическое применение:

user && user.logout();

// Но ЛУЧШЕ использовать optional chaining
user?.logout();

2. || (OR) — логическое ИЛИ

Оператор || возвращает первое истинное значение или последнее значение, если все ложны.

console.log(false || 'Hello');      // 'Hello'
console.log('Hello' || 'World');    // 'Hello'
console.log(null || undefined);     // undefined
console.log(0 || 1 || 2);          // 1

Использование для дефолтных значений:

const name = userInput || 'Guest';

// Современный способ — ?? (nullish coalescing)
const name = userInput ?? 'Guest';

Разница между || и ??:

const value1 = 0;
const value2 = null;

console.log(value1 || 'default');   // 'default'
console.log(value1 ?? 'default');   // 0

console.log(value2 || 'default');   // 'default'
console.log(value2 ?? 'default');   // 'default'

3. ! (NOT) — логическое отрицание

Оператор ! преобразует значение в булево и инвертирует его.

console.log(!true);                 // false
console.log(!false);                // true
console.log(!0);                    // true
console.log(!'');                   // true
console.log(!'Hello');              // false
console.log(!null);                 // true
console.log(!undefined);            // true

console.log(!!1);                   // true
console.log(!!0);                   // false

Truthy и Falsy значения

Falsy (ложные):

• false
• 0
• -0
• 0n (BigInt)
• '' (пустая строка)
• null
• undefined
• NaN

Truthy (истинные):

• '0' (строка с нулём)
• [] (пустой массив)
• {} (пустой объект)
• () => {} (функция)

if ('0') console.log('true');       // Выведет true!
if ([]) console.log('true');        // Выведет true!
if ({}) console.log('true');        // Выведет true!

Операторы && и || как управление потоком

Условный рендер в React:

return (
  <div>
    {isLoading && <Spinner />}
    {!isLoading && <Content />}
  </div>
);

Цепочка с || для значений по умолчанию

function getSettings(userSettings, defaultSettings, fallback) {
  return userSettings || defaultSettings || fallback;
}

getSettings(null, {color: 'red'}, {color: 'blue'}); // {color: 'red'}
getSettings(null, null, {color: 'blue'});           // {color: 'blue'}

Современные альтернативы

Optional Chaining (?.):

const name = user?.profile?.name;
user?.logout();

Nullish Coalescing (??):

const name = value ?? 'default';

console.log(0 ?? 'default');        // 0
console.log('' ?? 'default');       // ''

Часто допускаемые ошибки

// Неправильно — возвращает объект, не boolean
const isActive = user && user.active;

// Правильно
const isActive = !!(user && user.active);

// Неправильно — опасно с пустыми массивами
if (items) console.log('Items exist');

// Правильно
if (items && items.length > 0) console.log('Items exist');

Понимание логических операторов и их особенностей — критическое умение при работе с JavaScript и условной логикой в приложениях.