JavaScriptを触りはじめの時にスプレッド構文の理解をすることがとても苦手でした。
今でも完璧に理解できてはいないですが現段階で理解している部分を言語化してみたいと思います。
スプレッド構文の理解で苦しんでいる方の一助になれれば幸いです！
スプレッド構文とは
スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素
(配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合)
を期待された場所で展開したりすることができます。
MDNによると上記のように定義されていました。
正直どういうことか理解するの難しいですよね...(私は全く理解できませんでした）
※MDN（https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax）
コードをみた方が理解できるかと思うので実際にコードと一緒に説明していきたいと思いますが、
ざっくりとした機能としては...（ピリオド３つ） を書くことで個々の値に展開ができ、それを順番に処理して結合させることができます。
※ちなみに「codesandbox」という手軽に環境構築などができるサイトがあるので、そちらで実際にコードを打ちながら試してみると理解度が上がるかもしれません。
コードと一緒に解説
const arr1 = ["hoge", "foo"];
console.log(arr1);
//["hoge", "foo"]
//スプレッド構文を使ってこちらを展開してみます。
console.log(...arr1);
// hoge foo
//最初のコンソールでは配列で出力されてましたが、次のコンソールでは個々の値（hoge,foo）で出力されます。
上記のように配列の中身を順番に処理してくれます。
もう少し配列の例をあげてみます。
const sum = (x, y, z) => {
console.log(x + y + z)
};
const num1 = 1;
const num2 = [2, 3];
sum(num1, ...num2)
//6
//スプレッド構文でnum2の要素を順番に設定しているので２、3が設定されています。
//なのでsum(1, 2, 3)と同じことをしている状態です。
※参照とコピーの違いについても解説したいのですが長くなってしまうので今回は省略します。
最後に
スプレッド構文は私としてはかなり難しく感じました。色々とスプレッド構文で書いていくことで覚えられるようになると思うのでコードサンドボックスなどで是非試して見て欲しいです。