Null-соединение и безопасная навигация в JavaScript

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

Для задания значений по умолчанию в случае null или undefined в JavaScript используйте оператор объединения с null (??):

// Если картошки на ужин нет, всегда найдётся запасной продукт.
const dinner = potatoes ?? 'запасной продукт';

Для безопасного обращения к вложенной структуре объектов применяйте оператор опциональной цепочки (?.):

// Узнаем, говорит ли пёс по имени Боб? В случае отсутствия питомца проблем не возникнет.
const sound = user?.pet?.speak;

Приступим: nullish значения по сравнению с falsy

Особое предназначение оператора ?? заключается в разделении nullish и falsy значений. Nullish – это лишь null и undefined, в то время как Falsy включает в себя больше типов:

• null
• undefined
• false
• 0
• '' или ""
• NaN

Отметьте, что ?? применяет альтернативу только при nullish значениях, а || — при всех falsy значениях:

// NULL пришёл, но его нет в списке гостей.
// ZERO также пытался пройти, но его запрос был отклонён.
const alternativeFact = zeroOrNull ?? 'Приглашён';

Это важно, когда работаете с 0, false и "", и не хотите, чтобы допустимые falsy значения заменялись на значения по умолчанию.

Безопасное обращение к вложенным свойствам

Аксессу вложенным свойствам можно сравнить с гимнастикой на канате. Если обращаться неаккуратно, риск ошибок велик. Допустим:

let adventurer = {
  backpack: null
};

В классическом подходе, без опциональной цепочки, каждый шаг пришлось бы проверять вот так:

let ruby = (adventurer.backpack && adventurer.backpack.magicBox && adventurer.backpack.magicBox.ruby) || 'нет';

Но с помощью оператора опциональной цепочки, данную задачу можно значительно упростить:

// Путешественники оценят возможность проверить содержимое рюкзака перед отбытием.
let ruby = adventurer?.backpack?.magicBox?.ruby || 'нет';

Его совмещение с оператором объединения с null создаёт мощную комбинацию для уверенного назначения значений по умолчанию:

// В пути путешественник всегда найдёт замену рубину, если не сразу под рукой.
let ruby = adventurer?.backpack?.magicBox?.ruby ?? 'блестящийКамень';

Динамические свойства: безопасные проверки, исключение исключений

Если структура объекта вам не знакома, прямое обращение к его несуществующим свойствам может привести к исключениям. В таких случаях используйте опциональную цепочку, возвращающую undefined по умолчанию. Объект {} используется как защита при обнаружении null или undefined объектов:

// Если magicBox не дал ответа, попробуйте {пустойЯщик}.
let ruby = ((adventurer?.backpack || {}).magicBox || {}).ruby;

Считайте эту практику формой безопасной навигации в JavaScript, которая защищает ваш код от NullPointerExceptions.

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

Представим оператор объединения с null ?? и оператор опциональной цепочки ?.:

"??": Если исполнитель (🎭) отсутствует, он заменяется дублёром (👤):
value = performer (🎭) ?? clone (👤);

"?.": Вода (💧) потечёт, только если кран (🚰) открыт:
propertyValue = object (🚰)?.property (💧);

Сделайте ваш код, который спотыкается на null/undefined, более грамотным:

// Тишина в зале? Пантомима умеет общаться без слов.
let show = audience?.applause() ?? 'пантомима';

Сценарий A: [🚰💧👏] => 🎭
Сценарий В: [нет 🎭] => 👤
Сценарий С: [🚰 закрыт] => 'пантомима'

• '??': Запасной вариант поможет продолжить представление, даже если основной актёр замещён.
• '?.': Проверьте выполнение условий для действия, прежде чем открывать поток данных.

Старые среды? Используйте транспиляцию

Оператор опциональной цепочки и оператор объединения с null обладают одним нюансом: эти сравнительно новые языковые конструкции могут отсутствовать в старых средах. Транспиляция позволяет преобразовать ваш код в более старую версию, понятную устаревшим браузерам, при этом на помощь приходят @babel плагины:

• @babel/plugin-proposal-optional-chaining
• @babel/plugin-proposal-nullish-coalescing-operator

Они гарантируют работоспособность современного кода на старых платформах.

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

1. Оператор объединения с null (??) – JavaScript | MDN — полное описание оператора объединения с null.
2. Опциональная цепочка (?.) – JavaScript | MDN — подробное описание оператора опциональной цепочки на MDN.
3. GitHub – tc39/proposal-optional-chaining — тщательный анализ предложения по включению в стандарт оператора опциональной цепочки.
4. Опциональная цепочка '?.' – JavaScript.info — руководство, полное деталей и примеров.
5. Существует ли "оператор объединения с null" в JavaScript? – Stack Overflow — обсуждение влияния концепции оператора объединения с null среди профессионалов разработки.
6. @babel/plugin-transform-optional-chaining · Babel — презентация возможностей Babel для адаптации современного кода на JavaScript.
7. Объединение с null · V8 — описание реализации оператора объединения с null в V8, это важно для разработчиков Node.js и Chrome.