オブジェクトと分割代入

準備運動の3つ目は、オブジェクトの「分割代入」です。Reactでは、部品(コンポーネント)にデータを渡すとき、受け取る側でこの書き方を毎回使います。「Reactのコードで一番よく見る形」と言ってもいいくらいなので、先に目と手を慣らしておきましょう。

オブジェクトのおさらい

オブジェクトは、名前つきで値をまとめたものでした。

const user = {
  name: "太郎",
  age: 28,
};

値の取り出しは user.name のようにドットで書く——ここまでは他のコースとチャプター2でも見た形です。

取り出しを一気にやる——分割代入

user.name と user.age を、それぞれ変数に入れて使いたいとします。素直に書くとこうです。

const name = user.name;
const age = user.age;

動きますが、同じことを2回書いていて少し冗長です。これを1行にまとめるのが分割代入です。

const { name, age } = user;

読み方は「userの中から、nameとageを取り出して、同じ名前の変数にする」。左辺の { } は「オブジェクトを作っている」のではなく、「オブジェクトから抜き出す型紙」です。型紙に書いた名前と同じ名前の中身が、スポッと抜き出されてくる——クッキーの抜き型をイメージしてください。