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