～文法メモ～配列の分割代入

最終更新日 2024-09-25

概要

分割代入することで、「配列」や「オブジェクト」を分解し、
その配列の要素やオブジェクトのプロパティを一気に、個々の変数へと代入できます。
この機能により、他のスクリプト言語の「多重代入」に似たことを実現出来ます。

配列の要素の分割代入

let [var1, var2] = [10, 20];

hm.debuginfo(var1); // 10
hm.debuginfo(var2); // 20

配列の要素の分割代入と「...」演算子

「...」演算子を利用することで、「残りの要素を配列にして」、
１つの変数に代入します。

let [var1, var2, ...other] = [10, 20, 30, 40, 50]
hm.debuginfo(var1); // 10
hm.debuginfo(var2); // 20
hm.debuginfo(other); // 30,40,50。others は [30,40,50] という配列

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

let {foo, bar} = {foo:"こちら", bar:"あちら"};
hm.debuginfo(foo); // こちら
hm.debuginfo(bar); // あちら

オブジェクトのプロパティの分割代入(変数名を変更)

受け取る変数名を変更する場合には、以下のようにします

let {foo:x, bar:y} = {foo:"こちら", bar:"あちら"}
hm.debuginfo(x); // こちら
hm.debuginfo(y); // あちら

オブジェクトのプロパティの分割代入(デフォルト値)

オブジェクトのプロパティに対応するものが無かった場合に備え、デフォルト値を設定しておくことが出来ます。

let {foo="どちら", bar} = {bar:"あちら"}
hm.debuginfo(foo); // どちら
hm.debuginfo(bar); // あちら

宣言時以外の分割代入

配列については宣言時と同様に代入できます。

let var1, var2;
[var1, var2, ...other] = [10, 20, 30, 40, 50]
hm.debuginfo(var1); // 10
hm.debuginfo(var2); // 20
hm.debuginfo(other); // 30,40,50。others は [30,40,50] という配列

しかし、オブジェクトのプロパティは要注意です。
以下は間違いです。

let foo, bar;
{foo, bar} = {foo:"こちら", bar:"あちら"} // エラーとなってしまう。

これは、初期化時以外は{...}が複数ステートメントを囲い込むブロックとみなされてしまうためです。
このため、全体を(...)で囲む必要があります。

以下のようにするのが正しくなります。
ここは気づきにくいポイントですので注意してください。

let foo, bar;
({foo, bar} = {foo:"こちら", bar:"あちら"}) // このように( )で全体を囲い込む必要がある。
hm.debuginfo(foo); // こちら
hm.debuginfo(bar); // あちら

変数の値を入れ替える

let [var1, var2] = [10, 20];
[var1, var2] = [var2, var1];
hm.debuginfo(var1); // 20
hm.debuginfo(var2); // 10

関数から複数の値を返す

function multi_return_func() {
    return [10, 20];
}
let [var1, var2] = multi_return_func();
hm.debuginfo(var1); // 10
hm.debuginfo(var2); // 20

～文法メモ～ 配列の分割代入

概要