HACKSION

  • JavaScriptのOptional Chaining（?.）でエラーを防ぐスマートな書き方

    JavaScriptで開発していると、次のようなエラーを見たことがあると思います。

    Cannot read properties of undefined

    これは存在しないオブジェクトのプロパティを参照した場合に発生します。

    例えば次のコードです。

    const user = {}

console.log(user.profile.name)

    結果

    Uncaught TypeError: Cannot read properties of undefined

    理由は

    user.profile が undefined

    従来の書き方

    昔はこのように書く必要がありました。

    if (user && user.profile && user.profile.name) {
  console.log(user.profile.name)
}

    もしくは

    const name =
  user &&
  user.profile &&
  user.profile.name

    これではコードが冗長で読みにくくなります。

    Optional Chainingを使う

    そこで登場

    ?.

    です。

    const name = user?.profile?.name

    これだけです。

    もし、profile が存在しない場合でもエラーにならず「undefined」を返します。

    実務でよくある例

    APIレスポンスを扱う場合

    const response = {
  data: {
    user: {
      name: "Taro"
    }
  }
}

const name = response?.data?.user?.name
console.log(name)

    API仕様が変わってもエラーになりにくいコードになります。

    関数にも使える

    user?.login?.()

    login関数が存在する場合のみ実行されます。

    配列にも使える

    const users = []

console.log(users?.[0]?.name)

    Optional Chainingのメリット

    1. エラーを防げる
    2. コードが短くなる
    3. 可読性が高い
    4. APIレスポンス処理が安全

    まとめ

    Optional Chainingを使うことで

    Cannot read property of undefined

    エラーを防ぎつつ、シンプルで読みやすいコードを書くことができます。