【ES6】JavaScriptのRestパラメータについて総まとめ

JavaScript

本記事では、JavaScriptのRestパラメータを使ってパラメータを集め、それらをすべて配列に格納する方法を解説します。

目次

JavaScriptのRestパラメータとは

JavaScriptのES6では、3つのドット(…)を接頭辞に持つrestパラメータという新しい種類のパラメータが用意されています。

Restパラメータを使うと、不特定多数の引数を配列として表現することができます。

function sample(a, b, ...args) {
   //...
}

最後のパラメータ（args）には、3つのドット（ … ）が付きます。これがRestパラメーター（ …args）ってやつです。

関数に渡す全ての引数は、パラメータリストにマッピングされます。上の構文では、第一引数がaに対応し、第二引数がbに対応し、第3、第4引数などが残りのパラメータargsに配列として格納されます。たとえば

sample(1, 2, 3, "A", "B", "C");

args配列には、以下の値が格納されます。

[3,'A','B','C']

最初の2つのパラメータだけを渡すと、残りのパラメータは空の配列になります。

sample(1,2);

argsは、次のようになります。

[]

残りのパラメータは、引数リストの最後に表示されなければならないことに注意してください。次のようなコードはエラーになります。

function sample(a,...rest, b) {
 // SyntaxError: Rest parameter must be last formal parameter
}

その他のJavaScriptのRestパラメータの例

以下のコードを見てください。

function sum(...args) {
    let total = 0;
    for (const number of args) {
        total += number;
    }
    return total;
}

sum(5, 3, 9); // 17

上記の例では、argsは配列になっています。したがって、for..ofループを使って、その要素を繰り返し処理し、合計することができます。

次のコードでは、sum()関数の呼び出し側が、数値、文字列、ブーリアンなど様々な種類のデータ型を持つ引数を渡す可能性があり、数値のみの合計を計算したい場合を想定しています。

function sum(...args) {
  return args
    .filter(function (e) {
      return typeof e === 'number';
    })
    .reduce(function (prev, curr) {
      return prev + curr;
    });
}

以下のコードは、新しいsum()関数を使用して、数値引数のみを合計しています。

let result = sum(20, 'tanaka', null, undefined, 30);

console.log(result); // 50

Restパラメータがない場合は、関数の引数オブジェクトを使用しなければならないことに注意してください。

しかし、argumentsオブジェクト自体はArray型のインスタンスではないため、filter()メソッドを直接使用することはできません。

そのためES5では、以下のようにArray.prototype.filter.call()を使用する必要があります。

function sum() {
  return Array.prototype.filter
    .call(arguments, function (e) {
      return typeof e === 'number';
    })
    .reduce(function (prev, curr) {
      return prev + curr;
    });
}

ご覧のように、Restパラメータを使うと、よりエレガントなコードになります。

例えば、数値、文字列、boolean、nullなどの特定の型に基づいて引数をフィルタリングする必要がある場合は、以下のように書けば簡単に済みます。

function filterBy(type, ...args) {
  return args.filter(function (e) {
    return typeof e === type;
  });
}

JavaScriptのRestパラメータとアロー関数

アロー関数は、引数オブジェクトを持ちません。したがって、arrow関数にいくつかの引数を渡したい場合は、restパラメータを使用する必要があります。

const combine = (...args) => {
  return args.reduce(function (prev, curr) {
    return prev + ' ' + curr;
  });
};

let message = combine('JavaScript', 'Rest', 'Parameters'); // =>
console.log(message); // JavaScript Rest Parameters

combine()関数は、不定数の引数を取り、それらの引数を連結するアロー関数ということになります。

動的関数におけるJavaScriptのRestパラメータ

JavaScript では、Functionコンストラクタによって動的関数を作成することができます。

そして、動的関数の中でもRestパラメータを使用することが可能できます。

let showNumbers = new Function('...numbers', 'console.log(numbers)');
showNumbers(1, 2, 3);

出力結果

[ 1, 2, 3 ]
タイトルとURLをコピーしました