8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

参照が nullish (null または undefined) の場合にエラーとなるのではなく、式が短絡され undefined が返されるところが異なります。関数呼び出しで使用すると、与えられた関数が存在しない場合、 undefined を返します。

例①

image.png

image.png
このコードは、studentsという配列に学生の情報が入っており、それぞれの学生がテニスをしているかどうかをチェックしています。forEachメソッドを使って配列をループし、includesメソッドを使ってtennisが含まれているかどうかを確認しています。最後に、学生の名前とテニスをしているかどうかをコンソールに出力しています。
①の場合、鈴木太郎さんはtennisが含まれていない為、falseが返ってきます。

例②image.png

image.png
②の場合、鈴木太郎さんはsportsプロパティがそもそも存在しない為、エラーが返ってきます。

オプショナルチェーンを使用した場合

image.png
image.png
上記のように、オプショナルチェーンをsports?.includes('tennis')の部分で使用することで、sportsプロパティが存在しない場合でもエラーが発生せず、undefinedが返されます。

まとめ

例えば、フォームを作成する際に任意項目を作りたい時に、空配列返すという方法もあるがそういった対処法が使えない場合に、JS側で任意項目のプロパティに対してオプショナルチェーンを使用すれば、とりあえずエラーを回避することができるのでこの演算子はとても便利だなと思いました!

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?