レスト構文 [JavaScript]

レスト構文は、「...」と点を３つ書いて表現するものとなりますが、
以前書かせて頂いたスプレッド構文と似ているものになるのでごちゃごちゃにならないように整理したいと思います。

簡単に区分けするのであれば、

スプレッド構文　＝　「広げるイメージ」
レスト構文　＝　「集めるイメージ」

で覚えればいいかと思います。
特に、英語のスプレッドは「拡散」という意味もあり、ゲームやアニメを多少かじっている人であれば耳馴染みもあるかと思います。

それでは、スプレッド構文は、前回まとめた記事を参照していただき、今回はレスト構文についてまとめていこうと思います。

目次：

• レスト構文
• まとめ

レスト構文

参照：MDN
残余引数構文により、関数が不定数の引数を配列として受け入れることができ、可変長引数関数を JavaScript で表すことができます。

とあります。

1-1. 例：パラメータの中身の合計値を出力する。

...「ドットを３つ」書いたパラメータをパラメータを用意することにより、
その位置にある残りの引数を配列の中に入れることができます。

function sum(...nums) {
    return nums.reduce((total, num) => total += num);
}

sum(1,2,3);

1. sumという関数を定義します。
2. 「...nums」とレスト構文を使い、 numsの中には、配列として値が格納されます。
3. 配列numsに対して、reduceメソッドを使用し、numsの中身の合計値を出力します。
   3-1. 第一パラメータには、最終の合計値（total）、第二パラメータには、各々の配列の値(num)を書きます。
   3-2. アロー関数で、暗黙的returnを使用し、totalにnumを+する式を記載します。
4. sumの中に合計値を求めたい値
   例：sum(3,4,5)
   と入力すると、合計値(12)を返してくれます。

配列のreduceメソッド参照：

出力結果：

6

今回は、sumに1,2,3を渡しているので、合計値は６となります。

1-2 例： 使う場所により、入る引数が変化する。

リレーの結果を出力する関数を作成します。
１位は金メダル、２位は銀メダル、３位は銅メダル、４位以降にはその他の人を出力させる関数を作成したい。このような時に、レスト構文を使用することができます。

function raceResults(gold, silver, bronze, ...rest) {
    console.log(`1位：${gold}さん金メダルです。！`);
    console.log(`2位：${silver}さん銀メダルです。！`);
    console.log(`3位：${bronze}さん銅メダルです。！`);
    console.log(`その他：${rest}さんお疲れ様です。！`);
}

raceResults("太郎","次郎","三郎","四郎","五郎")

1. リレーの結果raceResultsという関数を作成します。

2. １位は金メダル、2位は銀メダル、3位は銅メダル、4位以降はその他として出力したいとします。
   2-1. それぞれ、gold、silver、bronzeと３つの変数を作成します。
   2-2. 4位以降の人に関しては全て同じ出力として出したいので、...「ドット３つ」でそれ以降という意味で付け、restという変数に保存します。

3. テンプレートリテラルを使用し、それぞれの変数に対応した出力を作成します。

出力結果：

1位：太郎さん金メダルです。！
2位：次郎さん銀メダルです。！
3位：三郎さん銅メダルです。！
その他：四郎,五郎さんお疲れ様です。！

「...rest」 と書いた中に、入力した４人目以降の値「四郎、五郎」が挿入されていることを確認できます。

まとめ：

レスト構文とスプレッド構文の違いを理解し、
それぞれの使い分けをイメージすること。

・レスト構文は　「集めるイメージ」
・スプレッド構文は「広げるイメージ」