⛓

プロパティアクセスに便利なオプショナルチェイニング

に公開
JavaScript
tech

オプショナルチェイニングとは

オプショナルチェイニング（Optional chaining）演算子?.は、プロパティアクセスの.の代わりに使用できます。プロパティアクセス先がnullishな値（nullまたはundefined）の場合でもエラーにならず、undefinedを返すのが特徴です。

例えばhoge?.fugaとした場合、hogeがnullishな値であればundefinedが返され、そうでなければhoge.fugaとなります。hoge ? hoge.fuga : undefinedと同義ですね。

なぜオプショナルチェイニングが必要か

JavaScriptでは、プロパティアクセス先がnullishな値のとき、エラーとなります。

const hoge = document.getElementById('hoge');
hoge.classlist.add('fuga'); // hogeがnullのとき、classlistプロパティでエラーとなる

つまり、hogeという要素ノードがnullの場合でもエラーにならないようなフェイルセーフ（hogeの存在チェック）が必要になります。こちらの対策を2つ紹介します。

対策①：早期リターン

一番オーソドックス？な方法です。

const hoge = document.getElementById('hoge');
if (!hoge) return; // hogeがnullishな値であればreturn
hoge.classlist.add('fuga'); // hogeがnullishな値でないことが保証されている

対策②：オプショナルチェイニング

本命。早期リターンに比べてコードが少なくなります。

const hoge = document.getElementById('hoge');
hoge?.classlist.add('fuga'); // hogeがnullishな値であれば`undefined`が返されるので、classlistプロパティでエラーとならない

まとめ

  • プロパティアクセスにはフェイルセーフが必要。
  • 早期リターンorオプショナルチェイニングで対策しましょう。
  • オプショナルチェイニングのほうがコードが少なくて済むのでオススメ。
GitHubで編集を提案

Discussion