概要

分割代入について試してみます。
分割代入は、配列やオブジェクトを、1つまたは複数の変数に一度に代入します。
具体的には次のように書きます。

let [a, b, c] = [10, 20, 30];

console.log(a);
console.log(b);
console.log(c);

出力結果は

10
20
30

となります。

分割代入は、配列形式等の値を一度に代入が可能なので、等号記号「＝」の左辺に配列を指定すると効果的です。

上記の例に少し手を加えてみます。

let [a, b, c] = [10, 20, 30];

//配列を分割代入を利用して、順序を変更して代入する
[a, b, c] = [b, a, c];

console.log(a);
console.log(b);
console.log(c);

この場合、出力結果は

20
10
30

になります。
見ての通りシンプルな動きになります。

次に、結果を配列で返す形にして、関数の戻り値を分割代入するサンプルを書いてみます。

function test1(x, y) {

	//引数を加算して配列で返す
	x = x + 100;
	y = y + 200;

	return [x, y];
}

let [d, e] = test1(10, 20)

console.log(d);
console.log(e);

出力結果は

110
220

になります。
配列で分割代入されていることがわかります。

代入する値の数が異なる場合

上記のサンプルでは、等号記号の左辺と右辺は同じ数でした。
では、代入する要素数が異なる場合はどのような挙動になるのか、試してみます。

//右辺が左辺よりも少ない場合
let [g, h, i] = [10, 20];

console.log(g);
console.log(h);
console.log(i);

//右辺が左辺よりも多い場合
let [j, k, l] = [30, 40, 50, 60];

console.log(j);
console.log(k);
console.log(l);

この場合の出力は、次のようになります。

10
20
undefined
30
40
50

左辺の変数iには、それに対する右辺の値が存在しない為、undefinedになります。

配列をネストしている場合

分割代入する配列がネストされている場合について試してみます。

let [m, n, o, [p, q], r] = [100, 101, 102, [201, 202], 103];

console.log(m);
console.log(n);
console.log(o);
console.log(p);
console.log(q);
console.log(r);

出力結果は

100
101
102
201
202
103

となります。