Необязательная цепочка в JavaScript позволяет нам считывать значения из объектов, которые глубоко вложены в другие объекты. Безопасно проверять свойства объекта без использования другой зависимости, такой как lodash.

Необязательная цепочка представлена ​​знаком вопроса, за которым следует оператор точки (?.).

Точно так же, как мы получаем доступ к свойствам объекта с помощью оператора точки (.), мы также можем прочитать и проверить свойство, прежде чем даже пытаться его прочитать, используя вопросительный знак, за которым следует оператор точки. (?.)

Оператор (?.) подобен оператору цепочки (.), за исключением того, что вместо того, чтобы вызывать ошибку, если ссылка нулевая, т. е. null или undefined, то выражение сокращается (также известное как оценка короткого замыкания) с возвращаемым значением undefined. >.

Давайте рассмотрим несколько примеров, чтобы понять, как необязательная цепочка работает с объектами.

const person = {
  first_name: 'Omkar',
  last_name: 'Langhe'
};

Традиционный способ чтения значений из объекта.

console.log(person.address.city); // This line of code will throw an error as we are trying access non existing property name address.

При использовании необязательной цепочки код становится короче и его легче поддерживать.

console.log(person?.address?.city);

Приведенная выше строка кода вернет undefined, так как она проверит имя свойства address перед доступом к address.city. В этом случае свойство address не существует, что приводит к короткому замыканию.

Синтаксис

- obj.val?.prop;
- obj.val?.[expr];
- obj.arr?.[index];
- obj.func?.(args);

Давайте теперь рассмотрим еще один пример необязательной цепочки.

Традиционный способ:

const nestedProp = object.first && object.first.second && object.first.second.third;

Использование необязательных цепочек:

const nestedProp = object.first?.second?.third;

Необязательная цепочка с вызовами функций

const person = {
  first_name: 'Omkar',
  last_name: 'Langhe',
  getCity: function () {
    return 'Pune';
  }
};

console.log(person.getCity?.()); // "Pune"

console.log(person.getPincode?.()); // "undefined"

Необязательная цепочка с выражениями.

const person = {
  first_name: 'Omkar',
  last_name: 'Langhe',
  getCity: function () {
    return 'Pune';
  },
  current_age: 26
};

console.log(person?.[`current_age`]); // 26

console.log(person?.[`non_existing_prop`]); // undefined

Необязательная цепочка при доступе к элементам массива.

const arr = ['a', 'b', 'c', 'd'];

const arrayItem = arr?.[3];

const nonExistingItem = arr?.[120];

console.log(arrayItem); // "d"

console.log(nonExistingItem); // undefined

Ссылки: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining