オプショナルチェーン(?.)について

Last updated at 2024-09-27Posted at 2024-09-26

オプショナルチェーンとは

オプショナルチェーンとは、JavaScriptのES6以降で使用できる記述方法です。どんなものかといいますと、

let family = {};
alert(family.mother.name);

通常こちらを実行すると、

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

「未定義のプロパティを読み込めません」というエラーが発生すると思います。

それをオプショナルチェーンを利用することで、安全にプログラムが実行できるようです。

let family = {};
alert(family?.mother?.name);

こちらを実行すると、プログラム自体は実行されundefinedというアラートが表示されるかと思います。

先日私の記事にコメントをくださった方にこちらの書き方を教えていただきました。初めてこの書き方をみた私は読解することができず頭を悩ませました。

しかし、これをきっかけに改めて調べてみたところ、なんと便利というか安全に実行できるものなのだと感動しました（教えてくださった方本当にありがとうございます！！）

最初のコードでわかる通り、通常JavaScriptでエラーが出るとその時点でプログラムが実行されず止まってしまいます。

例えば、APIを呼び出して何かをするプログラムがあったとします。しかし、ユーザーの環境によって上手く呼び出しが行われなかったとします。その際

 let family = {};
 alert(family.mother.name);

このような書き方だとエラーが発生してその後のプログラムが実行されません。恐らく止まってしまうと思います。
そこで、予期せぬエラーを回避するためにもこのような書き方が必要であるということです。

他にも安全に書く方法はありますが、スッキリとした書き方ではない場合が多いようです。

let family = {};
alert(family.mother && family.mother.name);

これぐらいですとまだ良いですが、もっと深いオブジェクトを参照する際には多くの記述を要します。

オプショナルチェーンの使いすぎの注意
- 存在しなくてもOKな場合のみに使用するものとする。つまり逆をいうと、プログラム上その値が必須となる場合にはオプショナルチェーンを使うべきではないということです（コードがundefinedのまま実行されてしまうから）
オプショナルチェーンを使う元のオブジェクトは既に定義されている必要がある
- 未定義のものには使えない
左部分が存在しない場合には使用できない
読み取りと削除はできるが書き込みはできない
- 左辺で用いることはできません