[JS] 分割代入(Destructuring assignment)構文について

分割代入(Destructuring assignment)構文とは

• 分割代入 – JavaScript | MDN

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

例えば、オブジェクトのプロパティを取り出す時に、いちいち1つずつ変数宣言・代入を繰り返すことなく、ワンライナーで完結に書けるようになります。

基本的な使い方から応用まで以下にサンプルコードを使って説明していきます。

オブジェクトのプロパティを分割代入

まずは基本的な使い方である、オブジェクトのプロパティの分割代入です。

const obj = { a: 1, b: 2, c: 3 };

// 分割代入でまとめて代入
const { a, b, c } = obj;

// 以下のコードと同様
// const a = obj.a;
// const b = obj.b;
// const c = obj.c;

配列の要素を分割代入

配列要素の分割代入もできます。

const array = [0, 1, 2];

// 分割代入でまとめて代入
const [n0, n1, n2] = array;

// 以下のコードと同様
// const n0 = array[0];
// const n1 = array[1];
// const n2 = array[2];

異なる名前の変数へ分割代入

上記例では、オブジェクトのプロパティ名と代入する変数の名前が一致していますが、別名の変数への代入も可能です。

左辺のオブジェクトのプロパティ名は、右辺のオブジェクトのプロパティ名と合わせ、値部分に別名の変数を割り当てます。

const obj = { a: 1, b: 2, c: 3 };

// 変数xにプロパティaの値を分割代入
const { a: x } = obj;

// 以下のコードと同様
// const x = obj.a;

分割代入時の規定値指定

分割代入するプロパティが定義されていない場合などに備え、規定値を指定しておくことが可能です。

const { x = 100 } = {};
console.log(x); // 100

const [n0, n1 = 1] = [0];
console.log(n0, n1); // 0, 1

// 別名変数+規定値のあわせ技
const { a: value = 'my value' } = {};
console.log(value); // my value

入れ子のオブジェクトの値を分割代入

入れ子になっているオブジェクトについて、分割代入をすることも可能です。左辺の代入先を入れ子にしてやります。別名や規定値も併用できます。

const parent = { child: { a: 1 } }
const { child: { a } } = parent;
console.log(a); // 1

宣言しない分割代入

すでに宣言された変数に対しての分割代入をしたい場面もあると思います。単純に宣言部分(var, let, const)を付けないようにしても、構文エラーになります。

宣言せずに分割代入する場合は、括弧()でくくってやる必要があります。

// すでに宣言されている変数
let a, b;

({a, b} = { a: 1, b: 2 });
console.log(a, b); // 1, 2

// 配列でも同様

変数のスワップ

配列の分割代入を使えば、変数のスワップ(入れ替え)が簡単にできます。一時変数を定義したりすることもなくかけるので便利です。

let x = 1;
let y = 2;

[y, x] = [x, y];
console.log('x: ' + x); // 2
console.log('y: ' + y); // 1

スプレッド演算子で残りの値を受け取る

• [Javascript] スプレッド演算子(Spread Operator)の使い方 │ Web備忘録

上記ページに書いたスプレッド演算子を使えば、分割代入しなかった値をまとめて受け取ることができます。

例えば、オブジェクトから特定のプロパティのみ分割代入して残りはオブジェクトのまま受け取るなどができます。

const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(a);    // 1
console.log(rest); // { b: 2, c: 3 }

const [n0, ...ns] = [0, 1, 2, 3];
console.log(n0); // 0
console.log(ns); // [1, 2, 3]

スプレッド演算子で取り出したオブジェクトや配列から、分割代入で取り出した値が削除されているのが確認できます。

関数の引数を分割代入で受け取る

関数の引数でオブジェクトを受け取り、その中身を引数の時点で分割代入して受け取ることが可能です。関数宣言時の引数部分を分割代入の形で書きます。

もちろん上で紹介している規定値の指定等も合わせて設定できます。

function f({ a, b = 2, x: c }) {
    console.log(a, b, c); // 1, 2, 3
}

f({ a: 1, x: 3 });