【JavaScript】変数を定義する時の{}波カッコって何？意味は？

以下のようなコードを見たときに、解読が出来なかったので備忘録です。

const { data: itemList } = getData(id)

{}の正体は？

ズバリ、分割代入です。

例えば、以下のようなコードがあるとします。

const { apple } = { orange: 1, apple: 2, grape: 3 }
console.log(apple)

これを実行すると、コンソールには「2」と表示されます。

何が起こっているかというと、オブジェクトの中のappleというプロパティだけ抜き出されて、appleという変数名で自由に使えるということです。

そして、以下のように書くと、変数名を自由に定義することができます。

const { apple: ringo } = { orange: 1, apple: 2, grape: 3 }
console.log(ringo) // 2

私が知りたかったコードの意味

const { data: itemList } = getData(id)

つまり、このコードは、getData(id)はオブジェクトを返していて、そのオブジェクトの中のdataプロパティを抜き出し、dataという変数名で定義していることになります。