JavaScript optional chaining

本文はA surprising feature of JavaScript optional chainingの翻訳です.誤訳があるかもしれません.
2020年までにJavaScriptには、オプションリンクと呼ばれる新しい機能が登場します.この機能は、さまざまなソリューションと標準化された方法で、お客様が直面している問題を解決します.

💻 ネックレスを選ぶことで解決する問題

次のオブジェクトがあります.

const object = {
  greet: "hai",
  deepProp: {
    greet: "hello",
    deeperProp: {
      greet: "ohai",
    }
  }
}

APIまたはデータベースから読み込まれたJSONであってもよいし、フロントエンドで作成されたオブジェクトであってもよい.object、deepProp、deeperPropが定義されていない(定義されていない)場合、第3greetにアクセスするにはどうすればいいですか?
JavaScriptの&構文(評価の意味)を使用して、式は最後の値を返します.

const greeting = 
      object &&
      object.deepProp &&
      objet.deepProp.deeperProp &&
      object.deepProp.deeperProp.greet

この方法は書きにくく、間違いを犯す可能性が高く、最初の人に混乱をもたらす可能性があります.
使用条件文は非常に明確です.

let greeting = undefined
if (object) {
  if (object.deepProp) {
    if (object.deepProp.deeperProp) {
      greeting = object.deepProp.deeperProp.greet
    }
  }
}

より明確になったが,冗長で,実際のコードで上記の記述を行う人はいない.条件文を使用して割り当てるのは気まずいかもしれません.
もう1つの一般的な方法は、Lodashと同じライブラリを使用することです.

const greeting = _.get(object. "deepProp.deeperProp.greet")

必要性が感じられないので、個人的には好きではありません.

💻 セレクトネックレスを使用

Optional chainingを使用すると、デフォルトでは上記の操作を実行できます.

const greeting = object?.deepProp?.deeperProp?.greet

何でも接続(リンク)できるので、これは重要です.
関数呼び出し:

object?.deepProp?.function?.(args)

配列アクセス:

object?.deepProp?.deepArray?.[5]

式:

object?.deepProp?.[console.log("runs if deepProp defined")]