【JavaScript】残余引数(Rest parameters)とは？使い方やメリットをまとめてみた

今回はJavaScriptにおける残余引数(Rest parameters)についてまとめてみました。

ES2015から追加された機能で、これを使えるとかなり分かりやすく、柔軟な関数を作ることができるようになります。

それではやっていきましょう。

残余引数(Rest parameters)を学ぶ前に
残余引数(Rest parameters)とは？
1. 一番簡単な例
2. 通常の引数とも併用できる
残余引数(Rest parameters)とarguments変数
最後に

残余引数(Rest parameters)を学ぶ前に

残余引数について学ぶ前に、JavaScriptの関数での引数の振る舞いを知っておきましょう。

大前提としてJavaScriptにおける関数に渡される引数は何個でもOKです。

それは組み込み関数でもユーザー定義関数でも同じです。

例を見てみましょう。以下ではsum();という2つの引数を受け取ってその合計を返す関数を定義しています。

function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3, 4)); // 3, 必要以上の引数を渡してもエラーは出ない

ここで引数を2つ渡した場合と引数を2つ以上渡した場合で結果が同じということが分かりますね。

これはつまり、JavaScriptにおいて関数内で使われる以上の引数を渡した場合は単純に無視されるということです。

残余引数(Rest parameters)とは？

まずはMDNでの説明から確認していきます。

残余引数構文により、不定数の引数を配列として表すことができます。
関数の最後の引数に ... の接頭辞を付けると、 (ユーザーが提供した) その位置にある残りの引数を JavaScript の「標準の」配列の中に入れることができます。
MDN web docsより引用

簡潔にまとめると、ユーザーが渡した引数の余りの配列を受け取れる構文ということになります。

一番簡単な例

実際のコードで確認してみましょう。次のコードではユーザーが渡した引数を全て、残余引数で受け取って表示しています。

function fn(...args) {
    // argsは引数の値が順番に入った配列
    console.log(args); 
}
fn("a", "b", "c"); // => ["a", "b", "c"]
fn(1, 2, 3, 4); // => [1, 2, 3, 4]

次は通常の引数と併用する場合を見てみます。

通常の引数とも併用できる

先程の例では、引数が残余引数だけでした。（...argsのみ）

残余引数は、通常の引数と組み合わせても定義することができます。

次のコードでは、1番目の引数はarg1に代入され、残りの引数がrestに配列として代入されます。

function fn(arg1, ...rest) {
    console.log(arg1); 
    console.log(rest); 
}

fn("a", "b", "c"); // => "a"
                   // => ["b", "c"]
fn(1, 2, 3, 4, 5); // => 1
                   // => [2, 3, 4, 5]

関数に定義されている引数を超えた余りの配列を受け取っているので、こちらの方が名前通りでイメージしやすいですね。

注意点として、他の引数と組み合わせる際には、必ず残余引数は最後の引数として定義する必要があります。

残余引数(Rest parameters)とarguments変数

最初に確認したとおり、残余引数(Rest parameters)はES2015から追加された比較的新しい機能です。

ではそれ以前はどのようにしてユーザーから渡された引数を参照していたのでしょうか？

実はJavaScriptにはargumentsという関数の中でのみ使える特殊な変数があります。

argumentsは関数に渡された引数の値がすべて入った配列のようなオブジェクトです。

配列のようなという部分が重要で、配列ではありません。

argumentsは、配列のようにインデックスで要素へアクセスできますが、配列ではないため配列のメソッドは利用できないという特殊なオブジェクトです。

以下のコードでは特に引数を定義していない関数でも、argumentsを使ってユーザーが渡した引数を参照できていることを示しています。

function fn() {
    // `arguments`はインデックスを指定して各要素にアクセスできる
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
}

fn("a", "b", "c"); // => "a" 
                   // => "b" 
                   // => "c"

残余引数が利用できる環境(ES2015以降)では、arguments変数を使うべきではありません。

その理由は以下のとおりです。

arguments変数の問題点