JavaScript入門 オプショナルチェーンの使い方

オブジェクトのプロパティにアクセする際に、そのプロパティがundefined やnullだった時には、エラーになります。

以下の例では、dog はないので、adventurer.dog.name へのアクセスはエラーになります。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
}

console.log(adventurer.dog.name) //Uncaught TypeError: Cannot read property 'name' of undefined"

これまでは以下のように、dog が存在するかをチェックする必要がありました。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
}

console.log(adventurer.dog === undefined ? undefined :  adventurer.dog.name) // undefined

以下も同じですが、adventurer.dog を二回書かないために、先に adventurerDog に割り当てています。

(ただし、グローバル変数を定義しているのであまり良くない)

let adventurerDog

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
}

console.log((adventurerDog = adventurer.dog) === undefined ? undefined : adventurerDog) //undefined

オプショナルチェーンを使用すると、簡潔に書くことができます。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
}

console.log(adventurer.dog?.name) //undefined

参考

JavaScript

Posted by たみぼうず