学びを備忘録としてまとめます
記念すべき第一弾は
【スプレッド構文】と【レスト構文】の違い
です。
... のやつですね。
両者の違いを”マリオ”で考えたら理解しやすかったので、書き記します🍄
結論：スプレッド構文とレスト構文の違い
結論として、違いはざっくり以下の感じです。
| 種類 | イメージ |
|---|---|
| スプレッド構文 | 広げる |
| レスト構文 | 集める |
スプレッド構文とレスト構文の表記 (...)は似ていますが、異なる目的と場面で使用されています。
マリオのキャラクターを使って理解してみる
まず、マリオのキャラクターチームがあるとします。
const marioTeam = ["マリオ", "ルイージ", "ピーチ"];
スプレッド構文 (...)
スプレッド構文は、配列またはオブジェクトを個々の要素やプロパティに「広げる」ために使われます。
例えば、新しいキャラクターをマリオのチームに追加したい場合に、スプレッド構文を使います。
const marioTeam = ["マリオ", "ルイージ", "ピーチ"];
const newCharacter = "ヨッシー";
const updatedMarioTeam = [...marioTeam, newCharacter];
//...marioTeam ＝ スプレッド構文
console.log(updatedMarioTeam);
// ["マリオ", "ルイージ", "ピーチ", "ヨッシー"]
マリオ・ルイージ・ピーチが、...marioTeamの中に収納されていて、updatedMarioTeamの配列の中で「広げ」られています。（解放〜〜〜〜！）
そこにnewCharacterとして、ヨッシーが追加されているということです。
（ヨッシーはゲーム内で強い味方なので、嬉しいですね↑↑）
レスト構文 (...)
一方で、レスト構文は通常、関数の引数や変数の定義で使われます。
レスト構文を使うと、複数の要素を一つの配列に「集める」ことができます。
分割代入でよく使われます！
例えば、マリオのチームから最初のキャラクターだけを取り出して、残りのキャラクターを別の配列に格納できちゃいます。
const marioTeam = ["マリオ", "ルイージ", "ピーチ"];
const [firstCharacter, ...remainingCharacters] = marioTeam;//分割代入
//...remainingCharacters ＝ レスト構文
console.log(firstCharacter); // "マリオ"
console.log(remainingCharacters); // ["ルイージ", "ピーチ"]
firstCharacterには配列の最初のマリオが格納されて、...remainingCharactersには残りのキャラクターが格納されます。
レスト構文は、分割代入をするときに、配列の残りの部分（...remainingCharacters）を新たな配列として取得するための構文ともいえます。
まとめ
スプレッド構文とレスト構文は ... の表記で似てますが、以下のように違う役割を持っていることがわかりましたね。
| 種類 | イメージ |
|---|---|
| スプレッド構文 | 広げる |
| レスト構文 | 集める |
また理解しにくいことはマリオとか身近なものに置き換えて、楽しく学んでいきたいと思います🖐️
なにか間違っている部分などあれば、お気軽にコメントいただけると幸いです m(_ _)m