javaScriptでオブジェクトの有無判定についての実装方法や考え方について知りたいです

Question

前提

nuxtを使用してシステムを作っています。
（今回の質問はnuxtとは関係ないと思うのでjavaScriptタグのみ付けております。）
今までPHPでしかシステムを作ったことがなかったので、javaScriptの知識が浅い
実装の質問もなのですが、実装する際の考え方があっているかの確認がしたいため投稿させていただきました。

現在APIが通信エラーになった際のテストをしており、下記のエラーが返ってきました。
通信エラーが発生した際、res.data.statusは返ってこないように実装されています。

発生している問題・エラーメッセージ

   YYYY-MM-DD [APP/PROC/WEB/0] ERR  ERROR  Cannot read property 'status' of undefined

対象のオブジェクトがないからundefinedが出ているのは理解しています。

該当のソースコード

    // resはAPIから返ってきたレスポンスとする
    if (!res || !res.data || !res.data.status ) {
      context.redirect('/error')
    }

質問したいこと

• javaScriptではオブジェクトがあるかどうかわからない時(オブジェクトはあるが中身が空も含む)、上記のような判定の仕方は正しいですか？
• obj.hasOwnProperty()などを使うべきなのか？
• エラーがはかれるのは許容すべきなのか？

なぜ疑問に思ったか、質問した経緯、その他

• phpでundefinedが出た時、先輩にはこの手のエラーログが出ないように実装しろと言われていたので、疑問に思いました。jsではこの手のエラーログは出ても仕方ない、許容されている・・・とかあるのでしょうか？
• ネットで一応調べて、上記の実装も正しいように思えましたが、エラーが出てるのが個人的に気持ち悪い＆ネットだと探し方が悪かったのか納得があまりできる説明がなかったため、参考になるURLや回答があれば教えてください。よろしくお願いします。

追記

レスポンス書いてましたが勘違いが生じそうなので削除しました。

Comments

[maisumakun]

本当にその行で「Cannot read property 'status' of undefined」が出ているのですか？

[rommi_mirror]

はい、出ておりますー。
返り値が記載されていなかったので追記しました。

[maisumakun]

本来であれば、!res.dataがtrueとなるので、短絡評価で!res.data.statusの評価はなされないはずなのです。何か書かれていない部分に違いがあったりはしないでしょうか？

https://paiza.io/projects/_STyD4CtHuj24-rQhGNaRQ?language=javascript

[rommi_mirror]

ご返信ありがとうございます。
すみません、入れ違いでベストアンサー選んでしまったのですが再確認しますmm

[rommi_mirror]

確認しました。
ご指摘の通り、別の行でのエラーでした。。
context.redirect('/error')
の後の処理が続いていたようで、
ifの処理の後に、res.data.statusを呼び出している箇所があり、そこでエラーが出てました。大変失礼しました。。。

Answer 1

if (!res || !res.data || !res.data.status ) {
  context.redirect('/error')
}

上記でも問題なさそうですが、プロパティが深くなるにつれて条件分岐も伸びてしまうので、使用可能なら?.を用いると尚よいです。

if (!res?.data?.status) {
  context.redirect('/error')
}

Comments

[rommi_mirror]

ご返信ありがとうございます。
プロパティが深くなった場合このような処理が必要なのですね・・・
こちらの実装でエラーでずに判定できました、ありがとうございます。

Answer 2

こんにちは。

ご提示の条件式をres && res.data && !res.data.statusとするといかがですか？

---

また、ヌル合体演算子やオプショナルチェイニング演算子のご使用はいかがですか？
Null合体演算子 - JavaScript | MDN
Optional chaining - JavaScript | MDN

Comments

[Lhankor_Mhy]

ああ、前段は真偽がおかしいですね。失礼しました。

[rommi_mirror]

ご返信ありがとうございます。
こちらに参照で書かれていたOptional chainingで試したところ上手く行きました。ありがとうございます。

Answer 3

すみません、ご指摘がありましたが別の行でのエラーでした。。
行番号が出ていなかったため見逃しておりました。

記載したコードの後ろに

    // resはAPIから返ってきたレスポンスとする
    if (!res || !res.data || !res.data.status ) {
      context.redirect('/error')
    }
    const hoge = res.data.status

というようにres.data.statusを使用しており、リダイレクト後にもこの処理が呼ばれていたようでした。
下記の様にreturnを入れたところ完全にエラー出なくなりました。

    // resはAPIから返ってきたレスポンスとする
    if (!res || !res.data || !res.data.status ) {
      context.redirect('/error')
      return
    }
    const hoge = res.data.status

エラー行数が出なかったのと簡易的な実行環境で確認していたため、いろいろ勘違いが生じてしまいました。
しかし、教えていただいた判定も知らない物だったので大変勉強になりました。
返信下さった三人の方ありがとうございました。