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

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

Cannot read properties of undefined

Cannot read properties of undefined

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

例えば次のコードです。

const user = {}

console.log(user.profile.name)

const user = {}

console.log(user.profile.name)

結果

Uncaught TypeError: Cannot read properties of undefined

Uncaught TypeError: Cannot read properties of undefined

理由は

user.profile が undefined

user.profile が undefined

従来の書き方

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

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

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

もしくは

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

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

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

そこで登場

?.

?.

です。

const name = user?.profile?.name

const name = user?.profile?.name

これだけです。

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

APIレスポンスを扱う場合

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

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

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

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

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

user?.login?.()

user?.login?.()

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

const users = []

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

const users = []

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

Optional Chainingを使うことで

Cannot read property of undefined

Cannot read property of undefined

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