分割代入
分割代入というのは、「配列の要素」や「オブジェクトのプロパティ」を分解・分割して、変数（や定数）に値を代入することを指します。
実際にサンプルを見てみましょう。
・配列の分割代入
const scores = [92, 89, 88, 77, 54, 24, 11];
const [gold, silver, bronze] = scores;
gold // 92
silver // 89
bronze // 88
[ ]の中に変数を記述し、「gold, silver, bronze」とマッピングして1位から順番に表すことができます。
また「...」を用いて残り部分全てを表すことも可能です。
const scores = [92, 89, 88, 77, 54, 24, 11];
const [gold, silver, bronze, ...rest] = scores;
gold // 92
silver // 89
bronze // 88
rest // 77,54,24,11
これは以前記述した「...」スプレッド構文ではなく、レスト構文（残余引数）と言います。複数の要素を集約して 1 つのオブジェクトにまとめることが出来ます。
関数の引数や分割代入での不特定多数の値を配列として受け取る際に利用することができます。
・オブジェクトの分割代入
適当なユーザー情報があったとします。
const user = {
password: 'sCoTt1948sMiTh',
firstName: 'Harvey',
lastName: 'Milk',
born: 1930,
died: 1978,
bio: 'Harvey Bernard Milk was an American politician
where he was elected to the San Francisco Board of Supervisors',
city: 'San Francisco',
state: 'California'
}
この中から名前やメールアドレスを取得したい場合
const { firstName, lastName, email } = user;
firstName // 'Harvey'
lastName // 'Milk'
email // 'harvey@example.com'
{ }の中身をオブジェクトのプロパティ名にすることで記述ができます。
配列は[ ]でオブジェクトは { } で表記します。
キー名を変更することも可能です。
const { born: birthYear, died: deathYear } = user;
born //エラー
birthYear //1930
died //エラー
deathYear //1978
別のユーザー情報があり、「died」の情報がなかったとします。通常だと設定してないので「died」は undefined になります。
const user2 = {
lastName: 'Gonzalez',
born: 1987,
city: 'Tulsa',
state: 'Oklahoma'
}
const { firstName, lastName, died = 'N/A' } = user2;
firstName // 'Stacy'
lastName // 'Gonzalez'
died // 'N/A'
上記のようにデフォルト値の設定も可能です。
最後にパラメータの分割代入も紹介します。
1つ目のユーザー情報を使用し、名前を出力したいとします。
function fullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
fullName(user);
// Harvey Milk
上記のようにオブジェクトの分割代入がパラメータの段階で分割代入がされます。
最近のJava Scriptのコードではパラメータの分割代入も多いですし、便利なので見慣れておきましょう。
