スプレッド演算子〜モダンなJavaScript

スプレッド演算子〜モダンなJavaScript

スプレッド演算子は…(ピリオド3つ) で記述します。スプレッド演算子を使った構文では配列では0 個以上の要素として展開され、Objectの場合に0 個以上の keyとvalueでオブジェクトを展開します。

スプレッド演算子でできること

配列の展開

配列の展開は次のようにします。

const num1 = [1,2,3];
const num2 = [4,5,6];
console.log(...num1,...num2); // 1 2 3 4 5 6

配列の結合

スプレッド演算子で展開しておいて、その結果を[]で囲むと展開した値を配列にすることができます。
さらに、適当な値を追加することも可能です。

console.log(num1.concat(num2)); //ES5までの方法 [1, 2, 3, 4, 5, 6]
console.log([...num1,...num2]); // [1, 2, 3, 4, 5, 6]
console.log([...num1,0,...num2]); //0を途中で追加した例 [1, 2, 3, 0, 4, 5, 6]

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

配列の複製

スプレッド演算子は、Reactなどでオブジェクトをイミュータブルに扱いたい時に重宝します。
スプレッド演算子を使うとなんとも簡単にコピーすることができます。

const name = ['Bob', 'Bill', 'Ken'];
const nameCopy = [...name];