こんにちは！
今日は、開発をしていて、遭遇した「スプレッド構文」について備忘録としてまとめてみます！
「スプレッド構文」と似ている、「残余引数」についても触れてみます。
「スプレッド構文」って...?
なんか美味しそうな名前ですよね(笑)フランスパンに塗ったら美味しそうな...(笑)
出典）MDN スプレッド構文
MDNで調べてみると、上記のように書かれています。
正直、よくわかんないので、実際に使ってみます！
「スプレッド構文」を使ってみた！
実際に使ってみたのが、以下のコードのようになります。
function sample1(item1, item2, item3, item4) {
console.log(item1, item2, item3, item4);
}
const items = ['緑茶', '抹茶', 'チャイ', 'ココア'];
sample1(...items); // ここで、「スプレッド構文」が登場！
/* 出力結果
緑茶 抹茶 チャイ ココア
*/
ちょっと解説してみる。
上記のコードをちょっと解説してみます！
①関数sample1を作りました。
この関数は、呼び出され実行されると、引数にitem1〜item4が渡され、コンソールに引数として渡されたitem1〜item4が表示されるというものです。
②配列を作りました。
配列itemsを作り、緑茶、抹茶、チャイ、ココアの4つを要素として、入れました。
③関数sample1を呼び出して実行しよう！
関数を呼び出して実行してみましょう。
関数の実行の仕方は、以下ですね。
関数名(引数);
今回も、同じように呼び出して実行しています。
関数名は、sample1なので、
sample1(引数);
となりますね！
「え、もう解説終わるじゃん。スプレッド構文の話どこ行ったんだよ！」って感じになってると思いますが、ここから今回のポイントになります！！
関数sample1を実行するときの引数に注目！
今回の関数sample1を呼び出し、実行するコードは、以下でした。
sample1(...items);
引数の部分に注目してみて下さい！
...items
上記のようなものが引数として、渡されています。
このような書き方が、「スプレッド構文」です！！
関数sample1の引数は、item1, item2, item3, item4の4つを必要としていました。
通常の書き方では、関数を呼び出し、実行する際にも、引数を4つ指定する必要がありますよね！
しかし、配列に指定したい引数が入っている場合、要素を1つずつ取り出してきて、渡すのって、すごく面倒ですよね？？
この面倒を解消してくれるのが、「スプレッド構文」なのです！
「スプレッド構文」を用いることで、配列名を指定するだけで、指定した配列に格納されている要素を展開し、それら要素1つ1つを引数として、関数に渡すことができるのです！
スプレッド構文の書き方
スプレッド構文の書き方は、以下です。
...配列名
3点リーダー(...)の後に、要素を展開したい配列名を書くというものです。
もう一度、関数sample1を呼び出し、実行するときのコードを見てみましょう。
sample1(...items);
要素を展開したい配列名は、itemsです。
確かに、スプレッド構文になっていますね！
「残余引数」って...？
スプレッド構文の書き方の項目をみて、「あれ、残余引数と似てない？」と思った方もいるかと思います！
ということで、ちょこっと「残余引数」についても解説してみます！
まず、残余引数とは、どういう役割をするのか、見てみましょう。
こちらはスプレッド構文とは逆の働きといえます。スプレッド構文が要素を展開するのに対して、残余構文は複数の要素を集約して 1 つのオブジェクトに「濃縮」します。残余引数を参照してください。
出典)MDN スプレッド構文(残余引数の項目)
出典)MDN 残余引数
わかるような、わからないような...
「残余引数」を使ってみた！
以下のコードが、「残余引数」の使用例です！
function sample2(firstItem, ...restItem) {
console.log(firstItem);
console.log(restItem);
}
sample2('緑茶', '抹茶', 'チャイ', 'ココア');
/* 実行結果
緑茶
['抹茶', 'チャイ', 'ココア']
第2引数として、
...restItem
っていうのが、入っていますね。これが、「残余引数」です。
3点リーダー(...)を使って表現しているあたり、「スプレッド構文」とそっくりですね！
関数sample2には、引数に、firstItemと、「残余引数」を用いた、...restItemの2つしか指定されていません。
しかし、関数sample2を呼び出し実行する際には、引数を4つ渡しています。
実行結果を見てみると、firstItemは、実行時に渡した4つの引数のうち、1番最初の「緑茶」が格納されています。
第2引数...restItemには、実行時に渡した4つの引数のうち、「緑茶」を除く残り3つが、配列として格納されています！
つまり、実行時に渡される引数の数がわからない場合に、実際に引数として渡された複数の値を配列としてまとめて「残余引数」に格納することができる！
まとめ
「スプレッド構文」は、配列の要素を1つ1つ展開し、引数として渡すことができる構文で、..配列名で関数実行時に引数として渡す！
「残余引数」は、実行時にいくつの引数が渡されるのかがわからない場合に、実行時に実際に渡された引数を配列にまとめて格納することができる！ただし、第1引数など、指定している部分は、いつも通り、第1引数は第1引数に格納される。
(指定している引数からあぶれた引数たちと言うとわかりやすいのでしょうか...?)
「残余引数」と「スプレッド構文」を一緒に使うと、便利そうな気がします！実際やっていないので、できるのかは不明なのですが...(汗)
お読み頂き、ありがとうございました！
もし、間違い・補足などございましたら、コメント頂けますと助かります！！
参考資料
参考文献
柳井政和著 『JavaScript[完全]入門』(2021) p.178〜p.179