プロパティの存在チェックとオプショナルチェイニング演算子（?.）の活用

JavaScriptでオプショナルチェイニング演算子（?.）が使えると知ったので、使い勝手を確認してみました。

そもそも「?.」のような書き方をなんと呼ぶのか知らなかったのですが、「オプショナルチェイニング演算子」って言うんですね。

以下、オプショナルチェイニング演算子がないとエラーになるコードの例です。

var arr = [
  {
    id: 1,
    name: "a",
    options: {
      title: "a-title",
      class: "a-class"
    }
  },
  {
    id: 2,
    name: "b",
    options: {}
  },
  {
    id: 3,
    name: "c"
  }
];

for(i = 0; i < arr.length; i++){
  console.log(arr[i].id);
  console.log(arr[i].name);
  console.log(arr[i].options);
  console.log(arr[i].options.title);
  console.log(arr[i].options.class);
}

実行結果は以下の通り。

1
a
{title: "a-title", class: "a-class"}
a-title
a-class

2
b
{}
undefined
undefined

3
c
undefined
Uncaught TypeError: Cannot read property 'title' of undefined

配列の3つ目のデータに「options」が存在せず、forループの3回目の処理で「options」配下のプロパティを呼び出している箇所でエラーとなっています。

Uncaught TypeError: Cannot read property 'title' of undefined

これは「options」の参照で「undefined」が返ってくるためで、undefinedからプロパティを呼び出そうして失敗しているという状態になります。

通常、undefinedが返ってくるようなプロパティの値を取得する場合、事前にチェック処理が必要になります。

for(i = 0; i < arr.length; i++){
  console.log(arr[i].id);
  console.log(arr[i].name);
  console.log(arr[i].options);
  if(arr[i].hasOwnProperty("options")){
    console.log(arr[i].options.title);
    console.log(arr[i].options.class);
  }
}

上記は「hasOwnProperty()」を使っていますが、以下のように記述することも可能です。

if(!!arr[i].options){
  console.log(arr[i].options.title);
  console.log(arr[i].options.class);
}

事前に存在チェックをするやり方でもいいのですが、プロパティを呼び出す度に行うのはかなり面倒です。

存在チェックが面倒なので、それを省略して書くことができるのが、オプショナルチェイニング演算子（?.）を使った方法です。

for(i = 0; i < arr.length; i++){
  console.log(arr[i].id);
  console.log(arr[i].name);
  console.log(arr[i].options);
  console.log(arr[i].options?.title);
  console.log(arr[i].options?.class);
}

実行結果は以下の通り。

1
a
{title: "a-title", class: "a-class"}
a-title
a-class

2
b
{}
undefined
undefined

3
c
undefined
undefined
undefined

エラーが出ていた箇所（options.title、options.class）で、オプショナルチェイニング演算子（?.）を使った呼び出しにすることでエラーが発生せずに、「undefined」が返ってきているのが分かると思います。

この書き方が使えるとかなり便利です。

そんな便利なオプショナルチェイニング演算子（?.）ですが、残念ながら、まだ使えないブラウザが結構あるので、使用する際には対応ブラウザに注意する必要があります。

Optional chaining - JavaScript | MDN