【Javascript】分割代入(Destructuring assignment)について

2023年6月20日

配列やオブジェクトを取り出したいときに便利です。特にオブジェクトなどの複雑な配列を取り出したいときに使えます。

CONTENTS

完成コード

See the Pen 分割代入 by komame (@komame) on CodePen.

分割代入とは？

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

配列を変数に格納するやり方のようです。実際のコードみたほうがわかりやすいので、配列とオブジェクトの場合でそれぞれみていきます。

配列の場合

添字で配列を呼び出すパターンと分割代入を使った記述の2で記述しています。

const arry = ["配列1", "配列2", "配列3"];
console.log(arry[0]);
console.log(arry[2]);

// 上の記述を、分割代入を使ったやり方
const [a, b, c] = ["分割配列1", "配列2", "配列3"];
console.log(a);

こちらは、ある配列を関数で呼び出すようにしたパターンです。出力結果は、同じパターンですが、変数にすることで、どんな値が入っているのかわかりやすくなっていると思います。

const arr = ["Japan", "Tokyo", "Shinjuku"];
const fnArr = (arry) => {
  console.log("---配列---");
  console.log(`country: ${arry[0]}`);
  console.log(`state: ${arry[1]}`);
  console.log(`city: ${arry[2]}`);
};

// 上記を分割代入したい場合
const arr2 = ["Australia", "Sydney", "Parramatta"];
const fnArr2 = ([country, state, city]) => {
  console.log("---分割配列---");
  console.log(`country: ${country}`);
  console.log(`state: ${state}`);
  console.log(`city: ${city}`);
};

fnArr(arr);
fnArr2(arr2);

配列の場合は、配列の順番に左右されるので、変数の定義の順番に注意をする。

オブジェクトの場合

オブジェクトの場合は、プロパティ名で指定をします。

そのままの変数にした場合は、ドットでつなげて、出力させる必要がありますが、分割代入を使用すると、プロパティ名を指定して、それに付随するデータが出力できます。

const obj = { x: "オブジェクト1", y: "オブジェクト2", z: "オブジェクト3" };
console.log(obj.x);
console.log(obj.y);

// 上記を分割代入したい場合
const {x,z} = { x: "分割オブジェクト1", y: "オブジェクト2", z: "オブジェクト3" };
console.log(x);
console.log(z);

こちらは、関数で呼び出せるパターンです。また、使用したくないものがあれば、指定をしなくてもいいです。

const objAddress = { country: "Japan", state: "Tokyo", city: "Shinjuku" };
const objAddress2 = { country: "Australia", state: "Sydney", city: "Parramatta" };


const fnObj = (objAddr) => {
  console.log("---オブジェクト---");
  console.log(`country: ${objAddr.country}`);
  console.log(`state: ${objAddr.state}`);
  console.log(`city: ${objAddr.city}`);
};

// 上記を分割代入したい場合
const fnObj2 = ({country, state, city}) => {
  console.log("---分割オブジェクト---");
  console.log(`country: ${country}`);
  console.log(`state: ${state}`);
  console.log(`city: ${city}`);
};

fnObj(objAddress);
fnObj2(objAddress2);