スプレッド構文

概要

スプレッド構文は配列やオブジェクトに対して使える記法で、要素の展開、要素をまとめる、要素のコピー・結合が出来ます。
以下よりそれぞれで出来ることや注意点を記載していきます。

要素の展開

スプレッド構文は、...(ドットを3つ)繋げて使用することで、要素を順番に展開することが出来ます。

const arr1 = [1, 2];
console.log(arr1); //[1, 2]
console.log(...arr1); //1 2

▼関数で使用するスプレッド構文の例
スプレッド構文は要素を順番に展開することが出来るので簡潔に書くことが出来ます。

const arr1 = [1, 2];
const summaryFunc = (num1, num2) => console.log(num1 + num2);

summaryFunc(...arr1); //3

要素をまとめる

配列の分割代入の際に、スプレッド構文を使用することで要素をまとめるというようなことが出来ます。
分割代入に関してはこちらにまとめています。

const arr2 = [1, 2, 3, 4];
const [num1, num2, ...arr3] = arr2;

console.log(num1); //1
console.log(num2); //2
console.log(arr3); //[3, 4]

要素のコピー・結合

配列やオブジェクトの要素のコピーにスプレッド構文を使用することが出来ます。

const arr4 = [10, 20];
const arr5 = [30, 40];

// arr4をコピーしてarr6という新しい配列をつくる
const arr6 = [...arr4];

console.log(arr4); //[10, 20]
console.log(arr6); //[10, 20]

同じように、配列やオブジェクトの要素の結合にスプレッド構文を使用することが出来ます。

const arr4 = [10, 20];
const arr5 = [30, 40];

// arr4とarr6を結合してarr7という新しい配列をつくる
const arr7 = [...arr4, ...arr5];

console.log(arr7); //[10, 20, 30, 40]

オブジェクトに対しても要素のコピー・結合使用することが出来ます。

const obj1 = { val1: 10, val2: 20 };
const obj2 = { val3: 30, val4: 40 };

// obj1をコピーしてobj3という新しいオブジェクトをつくる
const obj3 = { ...obj1 };

// obj1とobj2を結合してobj4という新しいオブジェクトをつくる
const obj4 = { ...obj1, ...obj2 };

console.log(obj3); //{ val1: 10, val2: 20 }
console.log(obj4); //{ val1: 10, val2: 20, val3: 30, val4: 40 }

注意点

=でコピーすることも出来ますが、そうすると参照値も引き継がれてしまうことがあります。
コピー後の配列に操作をしたつもりでも、以下のようにコピー元の配列にも影響が出てしまいます。

const arr8 = [10, 20];

// =でarr8をコピー
const arr9 = arr8

// arr9の0番目を100に書き換える
arr9[0] = 100;

console.log(arr8); //[100, 20]
console.log(arr9); //[100, 20]

このようなことがスプレッド構文を使用することで、元の配列に影響を与えることなく操作することが出来ます。

const arr8 = [10, 20];

// =でarr8をコピー
const arr9 = [...arr8]

// arr9の0番目を100に書き換える
arr9[0] = 100;

console.log(arr8); //[10, 20]
console.log(arr9); //[100, 20]