JavaScriptの分割代入

今回はJavaScriptの分割代入について解説します。

分割代入とは配列の値やオブジェクトからプロパティを取り出して個々の変数に代入するための構文です。

以下に配列、オブジェクト、関数の引数などに利用する例を紹介します。

配列の分割代入

配列の各要素を取り出して個々の変数に代入します。

変数と要素の数が一致している場合

let [first, second, third] = ['りんご', 'バナナ', 'さくらんぼ'];

console.log(first);  // りんご
console.log(second); // バナナ
console.log(third);  // さくらんぼ

変数と要素の数が異なる

let [fruit1,,fruit3] = ['りんご', 'バナナ', 'さくらんぼ'];

console.log(fruit1);  // りんご
console.log(fruit3); // さくらんぼ

let [fruitA, fruitB, fruitC] = ['オレンジ', 'メロン'];

console.log(fruitA);  // オレンジ
console.log(fruitB); // メロン
console.log(fruitC); // undefined
// fruitCに対応する要素が存在しないため、undefinedになる

変数のデフォルト設定

let [name = 'なし', age = 20] = ['田中'];

console.log(name);  // 田中
console.log(age); // 20
// ageに対応する要素が存在しないため、デフォルト値の２０が設定される

「...」を使用し残りの要素を全て設定

let [firstFruit, ...remainingFruits] = ['りんご', 'バナナ', 'さくらんぼ', 'ドリアン'];

console.log(firstFruit); // りんご
console.log(remainingFruits); // ['バナナ', 'さくらんぼ', 'ドリアン']
// '...'演算子により、'りんご'以外の全ての要素がremainingFruits変数に代入される

オブジェクトでの分割代入

オブジェクトのプロパティ値を変数に代入します

プロパティ値を全て設定

let person = {
  name: '田中',
  age: 25,
  profession: 'エンジニア'
};

let { name, age, profession } = person;

console.log(name); // 田中
console.log(age); // 25
console.log(profession); // エンジニア

プロパティ値の一部を設定

let person = {
  name: '田中',
  age: 25,
  profession: 'エンジニア'
};

let { name, profession } = person;

console.log(name); // 田中
console.log(profession); // エンジニア

関数の引数での分割代入

関数の引数としても使用可能。オブジェクトを引数とする関数で特に有効に働きます。

プロパティ値を全てを渡す

function introduce({ name, age, profession }) {
  console.log(`名前:${name}　年齢:${age}　職業:${profession}`);
}

let person = {
  name: '田中',
  age: 25,
  profession: 'エンジニア'
};

introduce(person); //名前:田中　年齢:25　職業:エンジニア

プロパティ値の一部を渡す

function introduce({ name, profession }) {
  console.log(`名前:${name}　　職業:${profession}`);
}

let person = {
  name: '田中',
  age: 25,
  profession: 'エンジニア'
};

introduce(person); //名前:田中　職業:エンジニア