【初学者向け】JavaScriptの分割代入について

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

分割代入とは？

分割代入とは配列やオブジェクトから値を取り出して、変数に代入してくれるJavaScriptの機能です。

☆通常の代入では一つの変数に対して一つの値を代入していくのに対して、
分割代入は複数の変数に、配列やオブジェクトの値を一気に流しこむイメージです。

使い方(①配列の場合 / ②オブジェクトの場合)

①配列の場合
☆point: 左辺の変数は [ ] で囲うこと

const arry = [10, 20, 30];
//分割代入で一気に代入
const [a, b, c] = arry;

//確認
console.log(a);  // 10
console.log(b);  // 20
console.log(c);  // 30

//一つずつ代入するとしたら...3回代入しなくてはいけない
const a = arry[0];
const b = arry[1];
const c = arry[2];

②オブジェクトの場合
☆point: 左辺の変数は { } で囲うこと

//まずはオブジェクトを用意
const obj = {
    name: "Tom",
    age: 87
   }

//一気に代入
const {name, age} = obj;

//確認
console.log(name);  //Tom
console.log(age);   //87


////一つずつ代入するとしたら...2回代入しなくてはいけないし、ドット記法を使わなくてはいけない！
const name = obj.name;
cnnst age = obj.age;

注意点

オブジェクトを分割代入する際、変数名とプロパティは一致させる必要があります！
上の②をちょっと書き換えて確認します

<定義の順を変えてみた場合>

const obj = {
    name: "Tom",
    age: 87
   }
//ageとnameの順番をスイッチ
const {age, name} = obj;

//順番を変えても出る値は変わらず
console.log(name);  //Tom
console.log(age);   //87

<部分的に代入>

const obj = {
    name: "Tom",
    age: 87
   }
//ageだけ定義(nameは代入しない)
const {age} = obj;

//確認
console.log(age);   //87

このように変数名とプロパティは同じ名前のものが対応しているので注意する必要があります。

その他にもいろいろな使い方がありますのでぜひ活用してみてください。