Optional Chaining

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

Uncaught TypeError: myObject.prop is undefined

Происходит это из-за отсутствия промежуточного свойства объекта при обращении к конечному.

// пример структуры данных пользователей
let users = [
	{name: {first: 'Santei'}, age: 25},
	{age: 27},
	{name: {first: 'Petya'}, age: 31},
]

По следующему запросу мы легко получим имя первого пользователя в массиве users.

console.log(users[0].name.first); // Santei

Обращаясь ко второму элементу массива users, мы получим ошибку, которая прекратит дальнейшее выполнение скрипта, так как свойство name не определено в исходных данных.

console.log(users[1].name.first);
// вернет - Uncaught TypeError: users[1].name is undefined

Чтобы не писать проверки, тем более если вложенность будет еще больше чем в примере, можно воспользоваться оператором Optional Chaining.

console.log(users[1].name?.first); // undefined

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

console.log(users[0].name?.first); // Santei

Nullish Coalescing

Обработать undefined можно также красиво другим оператором — Nullish Coalescing. Он хорошо работает нульарными значениями (null или undefined).

console.log(users[1].name?.first ?? 'Noname'); // Noname

Если значение слева от оператора равно null или undefined, то вернется значение справа и наоборот.