Пишите отказоустойчивый и краткий код с ?. и ?? операторы

Имея глубоко вложенный объект, часто приходится сталкиваться с ужасными

Uncaught TypeError: Cannot read properties of undefined (reading ‘nestedKey’)

Это может произойти со следующим кодом:

const obj = {};
console.log(obj.key.nestedKey);

Проверка ключа первого уровня — obj.key — даст undefined, но обращение к nestedKey вызовет указанную выше ошибку. Этого можно избежать с помощью оператора необязательная цепочка → obj.key?.nestedKey, который вернет undefined без каких-либо ошибок.

Используйте этот оператор всякий раз, когда вы не уверены в существовании какого-либо вложенного ключа. Некоторым практическим применением, которое уменьшит ваш код, будет метод Array.prototype.find, который выдает undefined, когда элемент не найден. Допустим, у нас есть массив объектов с некоторой личной информацией, и мы хотим findкого-то name и отобразить его age. Обычно вы проверяете, возвращает ли find какой-либо объект, а затем ссылаетесь на ключ, но чтобы сделать код короче, вы можете избежать этой проверки.

[{ name: 'Phil', age: 30 }].find(person => person.name === 'Non Existing')?.age;

Здесь не будет выдано никакой ошибки из-за части ?.age.

?? называется нулевым оператором объединения. Он проверяет, является ли некоторое значение null или undefined, и возвращает значение правого операнда. В противном случае будет возвращено значение левого операнда. Некоторые примеры:

console.log(null ?? 'I will appear'); // 'I will appear'
console.log(undefined ?? 'I will appear'); // 'I will appear'
console.log(0 ?? 'will not appear'); // 0
console.log(false ?? 'will not appear'); // false

Оператор ?? полезен, когда вам нужно выполнить какое-то действие, когда рассматриваемая переменная имеет значение null или undefined.

(null || undefined) ?? doSomething();

или когда вы хотите предоставить резервное значение для случая (null || undefined)

const imageUrl = someUndefinedUrl ?? FALLBACK_IMAGE_URL;