?. で安全に取り出す

解説

このレッスンで分かること

• obj?.prop は左が null か undefined のとき、そこで打ち切って undefined を返します
• 使うのは「無いことが正常」な場所だけにします

1 つ手前が空だっただけで、プログラムが止まる

オブジェクトの中にオブジェクトを入れると、途中の階層が無いという状態が起こります。

author.contact は存在しないので undefined です。その undefined からさらに .email を読もうとした瞬間、例外が投げられて止まります。

このエラーで読むべきなのは reading 'email' の部分ではなく、of undefined の部分です。犯人は email ではなく、その 1 つ手前の contact だからです。読もうとしたキーの名前ではなく、その手前が空だった、と読み替えるのがコツです。

?. が使えるようになる前は、階層の数だけ && を並べていました。

?. は左が空なら、そこで打ち切る

同じことが 1 行で書けます。

読み方は「左が null か undefined なら、そこで打ち切って undefined を返す。そうでなければ普通にプロパティを読む」です。

?. が反応するのは null と undefined の 2 つだけです。0 や "" や false は「ある」と扱われて先へ進みます。判定の基準が ?? とまったく同じなので、この 2 つは組で使えます。

?. の結果は undefined になることがあり、そのまま画面に出すと「undefined」という文字が表示されてしまいます。既定値を添えるのが定石です。

どこに使い、どこに使わないか

便利だからといって、すべての . を ?. に置き換えるのは行き過ぎです。何を渡しても静かに undefined が返るようになり、本来ならエラーで気付けたはずの不具合が、画面に「undefined」と出るまで表面化しなくなります。

?. を使うのは、無いことが正常な値に限ります。まだ公開していない作品に URL が無いのは当たり前なので ?. が向いています。一方で題名は必ずあるべき値なので、無いなら気付けたほうが良いのです。外から来たデータ、ユーザーの入力、設定ファイルのように、自分で作っていない値の入り口が主な出番です。

よくある間違い

• ?. を置く位置が 1 つ後ろ — author.contact?.email では、author 自体が undefined のときに結局止まります。守るのは読む対象ではなく、その手前です
• 代入の左側で使おうとする — ?. は読み取り専用の記号です。author?.contact.email = "..." は構文エラーになります

1. 関数名は getWorkUrl、引数は work の 1 つ
2. work.links.url の値を返すこと
3. work が null のときも work.links が無いときもエラーにしないこと
4. 取り出せないときの戻り値は undefined にすること