はじめに
ES2015で追加された、配列の前に出てくる...について整理してまとめます。
...は実は2種類あります。これが混乱の元です。
- Spread構文：配列を展開する
- Rest parameters： 配列をまとめる
Spread構文
Spread（広げる）という名の通り、配列を展開します。
たとえば、配列array1 = [1, 2, 3]を1, 2, 3に展開できます。
const array1 = [1, 2, 3];
// そのまま
console.log(array1) // (3) [1, 2, 3]
// Spread構文で展開
console.log(...array1) // 1, 2, 3
例1
Spread構文で配列を渡せば展開してくれます。
const add = (num1, num2, num3) => {
console.log(num1 + num2 + num3);
};
// Spread構文なら配列ごと渡せる！
add(...array1);
要素を一つずつ渡す手間が省けます。
// 一つずつ渡す
add(array1[0], array1[1], array1[2]);
例2
Spread構文で配列を渡して、配列同士を結合することもできます。
const array2 = [1, 2, 3]
const array3 = [4, 5]
// array4, array5の要素をまとめて渡す
const array4 = [...array2, ...array3];
console.log(array4); // (5) [1, 2, 3, 4, 5]
例3
配列の途中に展開して結合することもできます。
const array5 = ["C", "D"];
const array6 = ["A", "B", ...array2, "E"];
console.log(array6); // (5) ['A', 'B', 'C', 'D', 'E']
補足
配列同士の結合はconcatでもできます。
const array2 = [1, 2, 3];
const array3 = [4, 5];
console.log(array2.concat(array3));
ただし、concatはspread構文とは違って、配列の途中には展開できません。
Rest parameters
Spread構文とは逆に、配列の要素をまとめます。
例
仮引数として渡された値を配列にまとめる時に使われます。
function sum(...args) {
// 配列にまとまっている！
console.log(args); // (3) [1, 2, 3]
let total = 0;
for (const num of args) {
total += num;
}
console.log(total); // 6
}
sum(1, 2, 3);
もしRest parametersがなかったら、引数の数だけ仮引数を設定することになってしまいます。
function sum(num1, num2, num3) {
// 処理
}
上の例では3つだけですが増えれば増えるほど手間ですし、引数の数が変わるたびに仮引数も変更しなくてはいけません。
例2
普通の引数と残余引数を組み合わせて使用できます。
function sum(num1, num2, ...args) {
console.log(num1); // 1
console.log(num2); // 2
console.log(args); // (3) [3, 4, 5]
let total = 0;
for (const num of args) {
total += num;
}
console.log(total); // 12
}
sum(1, 2, 3, 4, 5);
Rest Parameter（残余引数）という名の通り、必ず仮引数の最後に配置します。
誤った例 ❌
function sum(num1, ...args, num2) {
// 処理
}