分割代入

概要

分割代入とは、オブジェクトや配列から値を抽出する方法のことです。
配列から値を取り出して、あるいはオブジェクトからプロパティを取り出すことが可能となっています。 また、別個の変数に代入することも可能にします。

以下より、分割代入を使用しない場合と、分割代入を使用した場合を比較していきます。

分割代入を使用しない場合の記述方法

const myProfile = {
 name: "田中", 
 age: "20", 
};

const message = `私の名前は${ myProfile.name }です。年齢は${ myProfile.age }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

分割代入を使用した場合の記述方法

オブジェクトの変数名が長い場合や、プロパティの数が多くなった場合は冗長になってしまうので、分割代入を使用します。
{ }を変数宣言部に使用することで、オブジェクト内から一致するプロパティを取り出してくることが可能となっています。
プロパティ名が合っていれば、一部のみ取り出す、どんな順番でも取り出すということが可能となっています。

const myProfile = {
 name: "田中", 
 age: "20", 
};

▼一部のみ取り出す
const { age } = myProfile;

▼どんな順番でも取り出すことが出来る
const { age, name } = myProfile;


const message = `私の名前は${ name }です。年齢は${ age }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

また、抽出して別名をつけることも出来ます。
:(コロン)を使用して、別名を付けます。

const myProfile = {
 name: "田中", 
 age: "20", 
};

▼どんな順番でも取り出すことが出来る
const { name: newName, age: newAge } = myProfile;


const message = `私の名前は${ newName }です。年齢は${ newAge }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

配列に分割代入を使用しない場合の記述方法

配列のインデックス番号で値を表示します。

const myProfile = [ "田中", 20 ];

const message = `私の名前は${ myProfile[0] }です。年齢は${ myProfile[1] }歳です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。

配列に分割代入を使用した場合の記述方法

配列の分割代入は変数の宣言部分に[ ]を使用し、並列に格納されている順番に任意の変数名を設定することで取り出してくることが出来ます。
オブジェクトの時とは異なり、順番の入れ替えは出来ません。

const myProfile = [ "田中", 20, "北海道" ];

▼配列の分割代入
const [ name, age, birthplace ] = myProfile;


const message = `私の名前は${ name }です。年齢は${ age }歳です。出身地は${ birthplace }です。`;

console.log(message);  //私の名前は田中です。年齢は20歳です。出身地は北海道です。

配列の必要な要素のみ取り出す場合は以下のようにします。

▼1つ目のみ必要な場合
const [ name ] = myProfile;

▼2つ目のみ必要な場合
const [ ,age ] = myProfile;

▼3つ目のみ必要な場合
const [ ,,birthplace ] = myProfile;