[JavaScript, TypeScript] スプレット構文 (...) とはなんぞや

初めに

これは会社で先輩のコードを見た時によく目にしていまして、
なんか気になったので、調べてみました。

スプレット構文とは

配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

引用: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

ちょっと私の頭では何言っとるかわからなかったので、実際に書いて動かしてみました。↓

実際の挙動

const numbers = [1, 2, 3, 4, 5];

console.log('numbers: ', numbers);
console.log('...numbers: ', ...numbers);

// 結果↓↓
// numbers:  [ 1, 2, 3, 4, 5 ]
// ...numbers:  1 2 3 4 5

ほほう……

const sum = (a, b, c, d, e) => {
    return a + b + c + d + e;
};

const numbers = [1, 2, 3, 4, 5];

console.log("numbers: ", numbers);
console.log("...numbers: ", ...numbers);

console.log("sum(numbers): ", sum(numbers));
console.log("sum(...numbers): ", sum(...numbers));

// 結果↓↓
// numbers:  [ 1, 2, 3, 4, 5 ]
// ...numbers:  1 2 3 4 5

// sum(numbers):  1,2,3,4,5undefinedundefinedundefinedundefined
// sum(...numbers):  15

なんかundefinedがいっぱいだー

こんな挙動になるんですね…
それじゃあ、関数の引数も1から順に引数aから入っていくのかしら…

const show = (a, b, c, d, e) => {
    console.log(a, " ", b, " ", c, " ", d, " ", e);
};

const numbers = [1, 2, 3, 4, 5];

show(numbers);
show(...numbers);

// 結果↓↓
// [ 1, 2, 3, 4, 5 ]   undefined   undefined   undefined   undefined
// 1   2   3   4   5

どうやら、順番に入っていくようですね！
これが、さきの文言で言う、

0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

の意味だったのかな？

まとめ

どうだったでしょうか。
めちゃくちゃ初歩的なところでしたが、これが誰かの参考になったりしたら嬉しいです。