Nullish coalescing operator: ?? и сравнение с ||

🤔 Что такое nullish coalescing operator (??)?

Оператор ?? (nullish coalescing) — это способ выбрать первое "не null/undefined" значение из двух возможных. Он возвращает правый операнд, только если левый — null или undefined.

const result = левыйОператор ?? правыйОператор;

🔍 Чем отличается от логического ||?

Классический || выбирает первое "истинное" значение, а ?? — первое "не null/undefined". Разница в том, что || считает "ложными" (falsy) не только null и undefined, но и 0, "", false, NaN.

Пример:

const price = 0;
console.log(price || 100); // 100 (0 — falsy)
console.log(price ?? 100); // 0 (0 — не null/undefined)

🧩 Когда использовать ?? вместо ||?

• Числовые значения, включая 0:
  javascript const discount = 0; const finalPrice = discount ?? 10; // 0 (а не 10!)

• Пустые строки как валидное значение:
  javascript const username = ""; const displayName = username ?? "Гость"; // "" (а не "Гость")

• Булевы флаги:
  javascript const isDarkMode = false; const theme = isDarkMode ?? true; // false (а не true)

💡 Совет: Если вам нужно строго проверять только null/undefined, берите ??. Для всех остальных falsy-значений подойдёт ||.

⚡ Практические примеры

1. Настройки по умолчанию

Допустим, у нас есть настройка, которая может быть null (не задана) или false (явно отключена):

const userSettings = { darkMode: null };
const darkMode = userSettings.darkMode ?? true; // true (только если null/undefined)

2. Работа с API

API может вернуть 0 как валидный результат, но || превратит его в дефолтное значение:

const response = { items: 0 };
const itemsCount = response.items || 10; // 10 (Ой!)
const correctCount = response.items ?? 10; // 0 (Так лучше!)

3. Комбинирование с ||

Иногда нужно учесть и falsy, и null/undefined:

const inputValue = "";
const value = inputValue || "Пусто"; // "Пусто"
const strictValue = inputValue ?? "Nullish-case"; // ""

🚨 Ограничения и нюансы

• Нельзя использовать с && или || без скобок (синтаксическая ошибка):
  javascript const x = a && b ?? c; // Ошибка! const y = (a && b) ?? c; // Правильно

• Старый код может не поддерживать ?? (нужен Babel или современный браузер).

🎭 Закрепляем на игре

Представим, что мы пишем игру, где:
- 0 — это валидное количество жизней,
- null/undefined — значит, значение не задано.

let lives = 0;
const displayLives = lives ?? "Бессмертие"; // 0 (а не "Бессмертие")

🔥 Вывод

• ?? — строгий оператор, который игнорирует только null/undefined.
• || — классический оператор, который пропускает все falsy-значения.
• Используйте ??, когда 0, "" или false — валидные значения.

Теперь вы легко сможете выбрать правильный оператор для любой ситуации! 🎯

📺 Если любите разбор нюансов JavaScript, подписывайтесь на YouTube-канал Данилы Бежина — там много таких примеров!