自分の感想：
JavaScript学習中、スプレッド構文というものを学んだので、
自分なりにまとめてみたいと思います。
まず、最初の感想として、スプレッドなので広げるや 拡散？ などの意味から何か縮こまっているものを広げるお手伝いをしてくれるのものなのかなと推測！
そこで、MDNによる定義を確認してみると・・・
定義：
配列式や文字列式などの反復可能オブジェクトを、０個以上の引数（関数呼び出しの場合）や要素（配列リテラルの場合）を期待された場所で、「展開」したり、オブジェクト式を、０個以上のキーと値のペア（オブジェクトリテラルの場合）を期待された場所で「展開」したりすることができる。
とのこと・・
「展開」 というキーワードがあるので予想していた挙動と同じような意味があることはわかったけど、今一つ何を言っているのか難しい・・・
なので、自分なりに実践を踏まえて読み解いていこうと思います。
できること、使い方
・スプレッド構文は、オブジェクトや配列のすべての要素を何らかのリストに入れる必要がある場合に使用することができる。
目次：
・関数呼び出しにおけるスプレッド構文
・配列リテラルにおけるスプレッド構文
・オブジェクトにおけるスプレッド構文
・残余構文(引数)
関数呼び出しの場合
列挙可能なオブジェクト（配列、stringなど）を引数に展開することができる。
下記の例では、
関数に配列の変数を当てはめて、
NaNが表示されることなく、
関数の力を借りて配列の中から特定の数字を出力することに成功している。
コード例：
Math.max(Mathオブジェクトのmaxメソッドを使用)
（渡した数字の中で最大を求めてくれる。）
Math.min(Mathオブジェクトのminメソッドを使用）
（渡した数字の中で最小値を求めてくれる。）
Math.max(13, 4, 5, 6, 21, 222)
222
Math.min(1, 5, 21, 55, 617)
1
例題：
数字の配列が、変数numsに格納されているとして、
この中から最大値を求めたい場合
Math.max(nums)
を渡したい。
しかし、numsを渡すとMath.maxは、NaNを返す。
なぜならMath.maxは配列を渡されても意味がわからないから。
渡して欲しいのは、数字を,(カンマ)区切りで渡してほしい。
そこで活用できるのが、スプレッド構文
展開するものの直前に (nums)
… と(ドット)を３つ記載することで配列の中身が展開され、一つ一つのカンマ区切りの数字としてMath.max関数に渡せるようになる。
補足：
numsの中身は変わらない。
const nums = [13, 4, 5, 6, 21, 222]
配列リテラルの場合
できること、使い方
既存の配列から新しい配列を作成する。
配列の要素を新しい配列にそれぞれ展開する。
mdn引用
スプレッド構文を使用しない場合、既存の配列を一部として新しい配列を作成するには、配列リテラル構文は十分ではなく、push()、splice()、concat()などを組み合わせて使う高圧的なコードを使用しなければならない。
下記の例では、高圧的なコードを使用せずに、直感的なスプレッド構文を使用することで、２つの配列を簡単に結合できている。
例題：
catsという配列にdogsという配列をくっつける。
concatを使用して、catsにdogsをくっつけてpetsという変数に新しい配列を格納する。
cats ["Dora","Jiji","Gela"]
dogs["Pocha","Shiro"]
const pets = cats.concat(dogs)
["Dora","Jiji","Gela","Pocha","Shiro"]
スプレッド構文を使用した場合
const pets = [...cats,...dogs]
["Dora",Jiji","Gela","Pocha","Shiro"]
また、新たな値をcatsとdogsの中に含ませることもできる
const pets = ["tora"...cats,"Ichi",...dogs,"Hachi"]
["Tora","Dora","Jiji","Gela","Ichi","Pocha","Shiro","Hachi"]
オブジェクトリテラルの場合
1つのオブジェクトから別のオブジェクトにプロパティをコピーすることができる。
この性質を使って、オブジェクトを組み合わせたり、すでにあるオブジェクトを複製したりできる。
例：
formDataに必要な情報、idとログイン情報（isVerified）を挿入する場合。
⇨
スプレッド構文で展開したformDataの中にidとisVerifiedの情報を付加することもできる。
const formData = {
email: "hoge@xample.com",
password: "secret",
username: "hoge"
}
const newUser = {... formData, id: 123, isVerified: false }
newUser
{email:"hoge@xample.com",password:"secret",username:"hoge",id:123,
isVerified: false }
残余構文(引数)
MDN引用
残余構文はスプレッド構文と外見がよく似ているが、こちらはスプレッド構文とは逆の働きをする。
スプレッド構文が要素を展開するのに対して、残余構文は複数の要素を集約して１つのオブジェクトに「濃縮」する。
詳細は別途、残余構文にて詳述する。
まとめ：
関数呼び出しのスプレッド構文、配列リテラルのスプレッド構文、オブジェクトリテラルのスプレッド構文とそれぞれ若干の違いはあれど、重要なのは「中身を展開する」
ということだとわかりました。
必要な時に必要な処理が書けるように一つ一つ細かく理解しておくことが重要だなと思います。