JavaScript необязательный цепочек `?. Объясняется - как это работает и когда его использовать

Автор оригинала: FreeCodeCamp Community Member.

Что такое дополнительное цепочка?

Дополнительные цепочки, представленные Вспомогательный В JavaScript новая функция, представленная в ES2020.

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

Текущий статус: Предложение Ecmascript на этапе 4 процесса. : https://github.com/tc39/proposal-optional-Chinking.

Сценарии использования

Доступ к потенциально null или undefined свойства объекта.
Получение результатов из переменной, которая еще не может быть доступна.
Получение значений по умолчанию.
Доступ к длинным цепям свойств.

Представьте, что вы ожидаете, что API вернет объект такого рода:

obj = {
  prop1: {
    prop2: {
      someProp: "value"
    }
  }
};

Но вы не можете знать, доступны ли каждая из этих полей заранее. Некоторые из них не могут быть отправлены обратно API, или они, возможно, вернулись с нулевыми значениями.

Вот пример:

//expected
obj = {
  id: 9216,
  children: [
    { id: 123, children: null },
    { id: 124, children: [{ id: 1233, children: null }] }
  ]
};

//actual
obj = {
  id: 9216,
  children: null
};

Это происходит очень часто с функциями, которые называют API. Возможно, вы смотрели код в реакции, который пытается защитить против таких вопросов, как это:

render = () => {
  const obj = {
    prop1: {
      prop2: {
        someProp: "value",
      },
    },
  };

  return (
    
      {obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.someProp && (
        {obj.prop1.prop2.someProp}
      )}
    
  );
};

Чтобы лучше подготовиться к этому вопросу, часто раз в прошлом мы использовали Лоташ конкретно _.get Метод:

_.get(obj, prop1.prop2.someProp);

Это выходы undefined Если любые из этих свойств являются undefined Отказ Дополнительное цепочка – это именно то, что ! Теперь вместо использования внешней библиотеки эта функциональность встроена.

Как работает дополнительная цепочка?

Вспомогательный Может использоваться для цепочки свойств, которые могут быть null или undefined Отказ

const propNeeded = obj?.prop1?.prop2?.someProp;

Если любой из этих цепочек – это null или undefined JavaScript вернется undefined Отказ

Что если мы хотим вернуть что-то значимое? Попробуй это:

let familyTree = {
    us: {
        children: {}
    }
}


// with _.get
const grandChildren = _.get(familyTree, 'us.children.theirChildren', 'got no kids' );

//with optional chaining and null coalescing 
const nullCoalescing = familyTree?.us?.children?.theirChildren ?? 'got no kids'
console.log(nullCoalescing) //got no kids

Это также работает для объектов, которые могут быть null или undefined :

let user;
console.log(user?.id) // undefined

Как получить эту новую особенность

Попробуйте в консоли вашего браузера: это недавние дополнения и старые браузеры могут понадобиться полифиллирования. Вы можете попробовать его в Chrome или Firefox в консоли браузера. Если это не работает, попробуйте включить функции эксперимента JavaScript, посетив Chrome://Флаги/ и включить «экспериментальный JavaScript».
Попробуйте в вашем узле приложение, используя Babel:

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Ресурсы

https://dmitripavlutin.com/javascript-optional-chaining/
Док Бабела: https://babeljs.io/docs/en/babel-plugin-proposal-optional-Chinking.

TL; доктор

Используйте необязательные цепочки Вспомогательный Для объектов или длительных свойств цепочки, которые могут быть null или undefined Отказ Синтаксис выглядит следующим образом:

let user = {};
console.log(user?.id?.name)

Заинтересованы в большем количестве учебных пособий и JSBYTES от меня? Подпишитесь на мою рассылку. или Подпишись на меня в Твиттере