JavaScriptのスプレッド構文と残余引数について

スプレッド構文とは

スプレッド構文とは、配列やオブジェクトリテラルを一つづつ取り出し展開する構文を指します。
例えば、配列をarrayとすると、スプレッド構文は...arrayと表現されます。
同じ記号を用いた表現に、残余引数というものがありますが、違いは以下になります。

• スプレッド構文
  • 配列リテラルやオブジェクトリテラルを展開する
• 残余引数
  • 複数ある引数を配列に圧縮する
  • 引数の個数が不明な関数の引数として使用する

したがって、残余引数はあくまで関数の引数を配列として圧縮した形で表現するのに対し、スプレッド構文は要素を展開する機能を持ちます。
以下でその使い方を詳しくみてみます。

配列リテラルへの使用例

.js

const alphabet = ["a", "b", "c", "d", "e"];
const anotherAlphabet = ["x", "y", "z"];

//配列を複製  
const replacedAlphabet = [...alphabet];
console.log({replacedAlphabet});
//{ replacedAlphabet: [ 'a', 'b', 'c', 'd', 'e' ] }

//配列をマージ（結合）
const mergedAlphabet = [...alphabet, ...anotherAlphabet];
console.log({mergedAlphabet});
//{mergedAlphabet: ['a', 'b', 'c','d', 'e', 'x','y', 'z']}

//配列に別の要素を追加して、新しい配列を定義
const addedAlphabet = [...alphabet, "f", "g"];
console.log({addedAlphabet});
//{ addedAlphabet: ['a', 'b', 'c','d', 'e', 'f', 'g']}

オブジェクトリテラルへの使用例

.js

const objAlphabet = {char1: "a", char2: "b", char3: "c"}
const anotherObjAlphabet = {char4: "y", char5: "z"};

//オブジェクトリテラルを複製  
replacedObjAlphabet = {...objAlphabet};
//{ replacedObjAlphabet: { char1: 'a', char2: 'b', char3: 'c' } }

//オブジェクトリテラルをマージ（結合）
mergedObjAlphabet = {...objAlphabet, ...anotherObjAlphabet};
//{mergedObjAlphabet: { char1: 'a', char2: 'b', char3: 'c', char4: 'y', char5: 'z' }}

//オブジェクトリテラルに別のオブジェクトリテラルを追加して、
//新しいオブジェクトリテラルを定義
addedObjAlphabet = {...objAlphabet, char6: "j", char7: "k"};
//addedObjAlphabet: { char1: 'a', char2: 'b', char3: 'c', char6: 'j', char7: 'k' }

残余引数とは

関数に渡す引数を、配列リテラルとして圧縮した引数を指します。　

残余引数の使用例

.js

//引数の数が不明な関数を使用する
let restParam = function(...args){
    let sum = 0;
    for (const arg of args) {
           sum += arg;
    }
    return sum;
}

console.log(restParam(...args1));
//console.log(restParam(1, 3, 5));と同じ意味になり、
//1 + 3 + 5 = 9が表示される。

console.log(restParam(...args2));
//console.log(restParam(1, 3, 5, 7));と同じ意味になり、
//1 + 3 + 5 + 7 = 16が表示される。