概要

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

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

console.log(a);
console.log(b);
console.log(c);
[/js]

出力結果は
[js]
10
20
30
[/js]
となります。

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

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

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

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

console.log(a);
console.log(b);
console.log(c);
[/js]
この場合、出力結果は
[js]
20
10
30
[/js]
になります。
見ての通りシンプルな動きになります。

次に、結果を配列で返す形にして、関数の戻り値を分割代入するサンプルを書いてみます。
[js]
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);
[/js]

出力結果は
[js]
110
220
[/js]
になります。
配列で分割代入されていることがわかります。

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

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

[js]
//右辺が左辺よりも少ない場合
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);
[/js]

この場合の出力は、次のようになります。
[js]
10
20
undefined
30
40
50
[/js]

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

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

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

[js]
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);
[/js]

出力結果は

[js]
100
101
102
201
202
103
[/js]
となります。