Проверка переменной на undefined и null в JavaScript

Быстрый ответ

if (variable == null) {
  // Проверка на `null` и `undefined` одновременно
}

Двойная проверка равенства (==) позволяет одновременно учесть значения undefined и null.

Использование строгого равенства для объявленных переменных

Недвусмысленное строгое равенство

if (variable === undefined || variable === null) {
  // Наиболее точная проверка
}

Строгое равенство (===) обеспечивает абсолютную точность соответствия типов и значений.

Подробнее об этом расскажет наш спикер на видео

Слияние наллов: современный подход

const safeVariable = variable ?? defaultValue;

Оператор слияния наллов (??) определяет значение по умолчанию для null или undefined, действуя как надёжная оболочка для переменных.

Логическое присваивание наллов – новинка

variable ??= defaultValue; // Присваивает `defaultValue`, если `variable` – `null` или `undefined`

Логическое присваивание наллов (??=) в ES2020 упрощает код, позволяя присваивать значения только при отсутствии инициализированного значения.

Отдельное внимание к необъявленным глобальным переменным

Надёжное использование typeof

if (typeof globalVariable === 'undefined') {
  // Защищает от необъявленных переменных
}

Проверка с помощью typeof гарантирует, что необъявленные переменные не вызовут ошибок в коде.

Подтверждение наличия свойства через 'in'

if ('prop' in obj) {
  // Подтверждает наличие свойства
}

Оператор in позволяет подтвердить присутствие свойства в объекте, не зависимо от его значения.

Избегаем подтайных угроз в проверках JavaScript

Риск нестрогого сравнения

if (variable != null) {
  // Двусмысленное сравнение, может ввести в заблуждение
}

Нестрогое сравнение (!=) может привести к непредсказуемым результатам из-за приведения типов.

Простота не всегда безопасна: 'if (variable)'

if (variable) {
  // Остерегайтесь "ложных" значений помимо `null` и `undefined`
}

Проверка переменной на истинность может быть обманчивой, поскольку некоторые значения интерпретируются как false.

Понимание контекста

Окружение задаёт правила

Важно помнить, что результаты проверок на null и undefined могут варьироваться в разных средах JavaScript.

JSHint и 'eqnull'

Инструменты вроде JSHint с опцией eqnull примут == null, что упрощает чтение кода.

Полное погружение через изучение источников

Справочные материалы, включая MDN Web Docs и спецификации JavaScript, обогащают нашу базу знаний и помогают писать качественный код.

Визуализация

Представим проверки на undefined или null в JavaScript:

Корзина с яблоками (🧺): [🍏, 🍎, null, undefined, 🍏]

🍏 / 🍎 = Все в порядке! Значение задано
null = Отсутствует яблоко! Значение нет (null)
undefined = Загадка: Было ли здесь яблоко? (undefined)

После исключения null и undefined:

if (apple !== undefined && apple !== null) {
    // Только свежие и качественные яблоки в корзине 🍏🍎
}

Теперь это надёжные и качественные значения.

Полезные материалы

1. null – JavaScript | MDN — Разбор значения null.
2. undefined – JavaScript | MDN — Изучения undefined.
3. JavaScript check if variable exists (is defined/initialized) – Stack Overflow — Советы и рекомендации по работе с переменными.
4. Nullish coalescing operator '??' — Все о операторе слияния наллов.
5. no-undef – ESLint – Pluggable JavaScript Linter – Выявление неопределенных переменных до выполнения кода.
6. Null vs. Undefined – TypeScript Deep Dive — Обзор null и undefined в TypeScript.
7. JavaScript — Null vs. Undefined — Сравнение null и undefined в JavaScript.