【JavaScript】Spread Operator

Spread Operatorとは

JavaScriptではECMA2015からSpread Operatorと呼ばれる仕様を導入しました。これは、配列やオブジェクト、関数に渡す引数を展開するための糖衣構文です。

// 配列を展開
let num_array = [4, 5, 6];
console.log([1, 2, 3, ...num_array, 7, 8, 9]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// オブジェクトを展開
let num_obj = { one : 1, two : 2};
let str_obj = { hoge : 'hoge', fuga : 'fuga'};
console.log({...num_obj, str_obj}); // { "one": 1, "two": 2, "hoge": "hoge", "fuga": "fuga" }

// 関数引数の展開
let f_sum = (x, y, z) => x + y + z; 
let num_array = [4, 5, 6];
console.log(f_sum(...num_array)); // 15

pythonの引数アンパックのように関数引数指定の記述を簡略化できます。また配列・オブジェクトの結合を容易に記述することもできます。

Spread Operatorによる展開はコピー扱い

Spread Operatorによって展開された値は、元のオブジェクトのコピーとなります。ただし、値が参照値であった場合、その参照先は共有されます。

let mutate = function(x, y, z, w){
  x[1] = 3;
};
let sub_array = [1, 2, 3];
let num_array = [sub_array, 4, 5, 6];
// Spread Operator(sub_arrayへの参照値、4、5、6のコピーが渡される)
mutate(...num_array);
console.log(sub_array);// [1, 3, 3]