分割代入 [JavaScript]

・配列の要素
・オブジェクトのプロパティを、
別個の変数に割り当てるスッキリと書ける構文となります。

分割代入を使うことで、みやすくコードを書くことができるので、詳しくみていきたいと思います。

目次：

• 1. 配列の代入
• 2. オブジェクトの分割代入
• 3. 関数のパラメータの分割代入
• まとめ

分割代入

参照：MDN
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

とあります。

1. 配列の分割代入

1-1. 例：配列の分割代入

配列の中身をそれぞれ、別の変数に格納してみます。
１位は金メダル、２位は銀メダル、３位は銅メダル、4位以降にはその他の人をそれぞれ格納してみます。

raceResultsという配列の中に５人の名前が保存されています。
この値を順番にそれぞれの変数に割り当てる場合を想像してみましょう。

const raceResults = ["太郎", "次郎", "三郎", "四郎", "五郎"];

1-2. 例：分割代入を使用しない場合。

配列のraceResults変数に対して、インデックスの[0]番目や、[1]番目などと指定することで配列の中身を取得することが可能です。

let gold = raceResults[0];
let silver = raceResults[1];
let bronze = raceResults[2];

gold
silver
bronze

出力結果：

"太郎"
"次郎"
"三郎"

例：1-3. 分割代入の場合。

const [gold, silver, bronze, ...rest] = raceResults

gold
silver
bronze
rest

1. 作成したい新しい変数を左側に配列として作成する。
2. 右側に取得したい配列の変数を置く。

この２つの動作だけで、配列からインデックスの順番ごとの新しい変数を作成することができます。

出力結果：

"太郎"
"次郎"
"三郎"
"四郎","五郎"

※配列の取得なので、rest構文を使用することもできます。
今回の例では、（...rest）

2. オブジェクトの分割代入

JavaScriptでは、オブジェクトの中から情報を取得したい場合が多いので、
オブジェクトの分割代入は、使用頻度が高いと思われます。

例：2-1. 分割代入を使用しない場合。

userというオブジェクトの中からfirstNameとlastName、emailを取得したい場合。
オブジェクトの分割代入を使わない例：

const user = {
    firstName: "Yamada",
    lastName: "Taro",
    born:1998,
    email:"[e-mail]",
    password:"123456"
}

const firstName = user.firstName;
const lastName = user.lastName;
const email = user.email;

firstName
lastName
email

1. 変数を作成し、＝で結びます
2. 結んだ先に、欲しいオブジェクトの名前を書き、 .「ドット」で欲しいオブジェクトのキーを入力します。

出力結果：

"Yamada"
"Taro"
"[e-mail]"

それぞれの変数の中身を確認すると、オブジェクトの中のキーに対応した値を取得することができました。

例：2-2. 分割代入を使用する場合。

const user = {
    firstName: "Yamada",
    lastName: "Taro",
    born:1998,
    email:"[e-mail]",
    password:"123456"
}

const {firstName,lastName,email} = user;

firstName
lastName
email

1. 左側に{} 「波括弧」を使用し、オブジェクトの中身から欲しい値を記載します。
2. 右側に、オブジェクトが入っている変数を記載します。

出力結果：

"Yamada"
"Taro"
"[e-mail]"

それぞれの変数の中身を確認すると、オブジェクトの中のキーに対応した値を取得することができました。

分割代入を使うことで、一度に欲しい値を複数取得することが簡単にできます。

2-3. オブジェクトで取得するプロパティの変数名を変更する。

先ほどは、簡単にオブジェクトの値を取得することができましたが、
取得する値を保存する変数の名前を変えるにはどうすれば良いでしょうか？

例：
userオブジェクトの中からbornという生まれた年を表すプロパティを取得したいとします。

しかし、bornだと分かりずらいので、変数名はbirthYearに変更してみましょう。

const {born: birthYear} = user;

birthYear

1. {}(波括弧)で、オブジェクトの中よりbornを取得します。
2. 「:」 コロンをつけて、変更したい変数名を右側に記載します。
3. 右側の＝の後ろには、取得したいオブジェクトの名前を記載します。

出力結果：

1998

bornではなく、birthYearとして、オブジェクトの中身を取得できました。

2-4.デフォルト値

先ほどのユーザーとは違う、ユーザーからの情報も別で取得するとします。
しかし、こちらのユーザーにはemailの登録がありません。

const user2 = {
    firstName: "Sato",
    lastName: "jiro",
    born:1999,
    password:"123456"
}

const {firstName,lastName,email} = user;

firstName
lastName
email

1. 左側に{} 「波括弧」を使用し、オブジェクトの中身から欲しい値を記載します。
2. 右側に、オブジェクトが入っている変数を記載します。

出力結果：

"Sato"
"Jiro"
undefined

firstNameとlastNameに関しては、ユーザー１の時と同じように取得できましたが、
emailはundefinedになってしまいました。

このような場合に、取得する値が無かった時に、デフォルト値を設定しておくことにより、事前に決めておいた値を出力することができます。

const user2 = {
    firstName: "Sato",
    lastName: "jiro",
    born:1999,
    password:"123456"
}

const {firstName,lastName,email = "N/A"} = user;

firstName
lastName
email

デフォルト値は、取得したい変数の後ろに　「＝」を書いてその後ろに、変数に入れたいデフォルトの値を指定します。
今回は、「該当なし」を意味する、"N/A"「ノットアベイラブル」をデフォルト値として設定しています。

注意※デフォルト値は、取得する値がない場合使用される。取得する値がある場合は、そちらを優先して取得します。

出力結果：

"Sato"
"Jiro"
"N/A"

3. 関数のパラメータの分割代入

先ほど作成したユーザーを例にシンプルな関数を作成します。

3.1 苗字と名前を併せた関数fullNameを作成してみる。

const user = {
    firstName: "Yamada",
    lastName: "Taro",
    born:1998,
    email:"[e-mail]",
    password:"123456"
}

function fullName(user) {
    return `${user.firstName} ${user.lastName}`;
}

fullName(user)

1. 関数fullNameを作成。
2. パラメータとして、userを渡します。
3. テンプレテーとリテラルを使い、ユーザーオブジェクトのfirstNameとlastNameを合わせたものを出力するように設定します。
4. fullName関数に、userを渡すと、"Yamada Taro"が出力されます。

出力結果：

"Yamada Taro"

3-2. 関数のパラメータにおける分割代入を使用する。

上記の例を、関数のパラメータにおける分割代入を使用することにより、
省略して書くことができます。

const user = {
    firstName: "Yamada",
    lastName: "Taro",
    born:1998,
    email:"[e-mail]",
    password:"123456"
}

function fullName({firstName, lastName}) {
    return `${firstName} ${lastName}`;
}

fullName(user)

1. 関数fullNameを作成。
2. 関数のパラメータとして、分割代入のオブジェクトを取得するようにします。
3. テンプレテーとリテラルを使い、ユーザーオブジェクトのfirstNameとlastNameを合わせたものを出力するように設定します。
4. fullName関数に、userを渡すと、"Yamada Taro"が出力されます。

出力結果：

"Yamada Taro"

まとめ：

分割代入まとめ：
・分割代入は、複数の変数に値を入れるときに簡潔に書ける構文です。
・オブジェクト、配列、関数のパラメータと色々なところで使用することができます。