スプレッド構文とレスト構文の違いをマリオで考えてみた

学びを備忘録としてまとめます

記念すべき第一弾は
【スプレッド構文】と【レスト構文】の違い
です。

...　のやつですね。
両者の違いを”マリオ”で考えたら理解しやすかったので、書き記します🍄

結論：スプレッド構文とレスト構文の違い

結論として、違いはざっくり以下の感じです。

種類	イメージ
スプレッド構文	広げる
レスト構文	集める

スプレッド構文とレスト構文の表記 (...)は似ていますが、異なる目的と場面で使用されています。

マリオのキャラクターを使って理解してみる

まず、マリオのキャラクターチームがあるとします。

javascript

const marioTeam = ["マリオ", "ルイージ", "ピーチ"];

スプレッド構文 (...)

スプレッド構文は、配列またはオブジェクトを個々の要素やプロパティに「広げる」ために使われます。

例えば、新しいキャラクターをマリオのチームに追加したい場合に、スプレッド構文を使います。

javascript

const marioTeam = ["マリオ", "ルイージ", "ピーチ"];
const newCharacter = "ヨッシー";
const updatedMarioTeam = [...marioTeam, newCharacter];
//...marioTeam ＝ スプレッド構文

console.log(updatedMarioTeam);
// ["マリオ", "ルイージ", "ピーチ", "ヨッシー"]

マリオ・ルイージ・ピーチが、...marioTeamの中に収納されていて、updatedMarioTeamの配列の中で「広げ」られています。（解放〜〜〜〜！）

そこにnewCharacterとして、ヨッシーが追加されているということです。
（ヨッシーはゲーム内で強い味方なので、嬉しいですね↑↑）

レスト構文 (...)

一方で、レスト構文は通常、関数の引数や変数の定義で使われます。

レスト構文を使うと、複数の要素を一つの配列に「集める」ことができます。

分割代入でよく使われます！

例えば、マリオのチームから最初のキャラクターだけを取り出して、残りのキャラクターを別の配列に格納できちゃいます。

javascript

const marioTeam = ["マリオ", "ルイージ", "ピーチ"];
const [firstCharacter, ...remainingCharacters] = marioTeam;//分割代入
//...remainingCharacters ＝ レスト構文

console.log(firstCharacter); // "マリオ"
console.log(remainingCharacters); // ["ルイージ", "ピーチ"]

firstCharacterには配列の最初のマリオが格納されて、...remainingCharactersには残りのキャラクターが格納されます。

レスト構文は、分割代入をするときに、配列の残りの部分（...remainingCharacters）を新たな配列として取得するための構文ともいえます。

まとめ

スプレッド構文とレスト構文は ...　の表記で似てますが、以下のように違う役割を持っていることがわかりましたね。

種類	イメージ
スプレッド構文	広げる
レスト構文	集める

また理解しにくいことはマリオとか身近なものに置き換えて、楽しく学んでいきたいと思います🖐️

なにか間違っている部分などあれば、お気軽にコメントいただけると幸いです m(_ _)m