JavaScriptの残余引数を完全解説！10個のサンプルコードで学ぶ使い方

はじめに
●JavaScriptの残余引数とは
●残余引数の使い方
- ○サンプルコード1：引数の数が不定の場合
- ○サンプルコード2：配列を引数として渡す場合
●残余引数の応用例
●注意点
まとめ

はじめに

この記事を読めば、JavaScriptの残余引数を使ってコードをより効率的に書くことができるようになります。

残余引数は、引数の数が不定である場合や、複数の引数を一つの配列として受け取りたい場合に非常に便利です。

ここでは、JavaScriptの残余引数について、使い方や応用例、注意点を10個のサンプルコードを交えながら詳しく解説していきます。

●JavaScriptの残余引数とは

JavaScriptの残余引数（rest parameter）とは、関数の引数の数が不定である場合や、複数の引数を一つの配列として受け取りたい場合に使用する機能です。

残余引数は、関数定義時に引数リストの最後に「…（3つのドット）」をつけた引数名で指定します。

●残余引数の使い方

○サンプルコード1：引数の数が不定の場合

残余引数を使って、引数の数が不定の場合に対応する関数を作成してみましょう。

下記の例では、sum関数が可変長の引数を受け取り、その合計値を返すようになっています。

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

console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(1, 2, 3)); // 6

sum関数では、残余引数...argsを使って、任意の数の引数を受け取ります。

その後、for文を使って引数の合計値を計算し、最後にその合計値を返しています。

○サンプルコード2：配列を引数として渡す場合

配列を引数として受け取る関数を作成する場合も、残余引数が便利です。

下記の例では、multiply関数が配列の各要素を掛け算して、その結果を返すようになっています。

function multiply(...nums) {
  let result = 1;
  for (const num of nums) {
    result *= num;
  }
  return result;
}

console.log(multiply(1, 2, 3, 4)); // 24
console.log(multiply(2, 3, 4)); // 24

multiply関数では、残余引数...numsを使って、配列を引数として受け取ります。

その後、for文を使って配列の要素を掛け算し、最後にその結果を返しています。

●残余引数の応用例

○サンプルコード3：可変長引数を使った足し算

残余引数を使って、可変長の引数を受け取り、その合計値を返す関数を作成します。

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

console.log(add(1, 2, 3, 4, 5)); // 15
console.log(add(1, 2, 3)); // 6

add関数では、残余引数...numsを使って、任意の数の引数を受け取ります。

その後、配列のreduceメソッドを使って引数の合計値を計算し、その結果を返しています。

○サンプルコード4：最大値を求める関数

残余引数を使って、最大値を求める関数を作成します。

function findMax(...nums) {
  return Math.max(...nums);
}

console.log(findMax(1, 2, 3, 4, 5)); // 5
console.log(findMax(10, 20, 30)); // 30

findMax関数では、残余引数...numsを使って、任意の数の引数を受け取ります。

その後、Math.max関数を使って最大値を求め、その結果を返しています。

○サンプルコード5：最小値を求める関数

残余引数を使って、与えられた引数の最小値を求める関数を作成します。

function findMin(...nums) {
  return Math.min(...nums);
}

console.log(findMin(1, 2, 3, 4, 5)); // 1
console.log(findMin(10, 20, 30)); // 10

findMin関数では、残余引数...numsを使って、任意の数の引数を受け取ります。

その後、Math.min関数を使って最小値を求め、その結果を返しています。

○サンプルコード6：イベントリスナーの実装

残余引数を利用して、イベントリスナーを実装する例を紹介します。

function eventEmitter(eventName, ...args) {
  // イベントに対応するリスナーの一覧
  const listeners = {
    event1: (arg1, arg2) => console.log(`event1: ${arg1}, ${arg2}`),
    event2: (arg1) => console.log(`event2: ${arg1}`),
  };

  if (listeners[eventName]) {
    listeners[eventName](...args);
  }
}

eventEmitter('event1', 'Hello', 'World'); // event1: Hello, World
eventEmitter('event2', 'こんにちは'); // event2: こんにちは

eventEmitter関数では、イベント名とその他の引数を残余引数...argsで受け取ります。

その後、リスナー一覧から対応するリスナーを呼び出し、イベントを実行しています。

○サンプルコード7：オブジェクトのマージ

残余引数を使って、複数のオブジェクトをマージする関数を作成します。

function mergeObjects(...objects) {
  return Object.assign({}, ...objects);
}

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { c: 5, d: 6 };

console.log(mergeObjects(obj1, obj2, obj3)); // { a: 1, b: 3, c: 5, d: 6 }

mergeObjects関数では、残余引数...objectsを使って、任意の数のオブジェクトを受け取ります。

その後、Object.assign関数を使ってオブジェクトをマージし、その結果を返しています。

○サンプルコード8：可変長引数を使った掛け算

可変長引数を使って、与えられた引数を掛け算する関数を作成します。

function multiply(...nums) {
  return nums.reduce((acc, num) => acc * num, 1);
}

console.log(multiply(1, 2, 3, 4, 5)); // 120
console.log(multiply(2, 4, 6)); // 48

multiply関数では、残余引数...numsを使って、任意の数の引数を受け取ります。

その後、reduce関数を使って引数を掛け算し、その結果を返しています。

○サンプルコード9：引数の個数に応じた処理の分岐

引数の個数に応じて処理を分岐させる関数を作成します。

function processArguments(...args) {
  switch (args.length) {
    case 1:
      console.log(`1つの引数: ${args[0]}`);
      break;
    case 2:
      console.log(`2つの引数: ${args[0]}, ${args[1]}`);
      break;
    default:
      console.log('引数が多すぎます');
  }
}

processArguments('A'); // 1つの引数: A
processArguments('A', 'B'); // 2つの引数: A, B
processArguments('A', 'B', 'C'); // 引数が多すぎます

processArguments関数では、残余引数...argsを使って、任意の数の引数を受け取ります。

その後、引数の個数に応じて処理を分岐しています。

○サンプルコード10：可変長引数を使った除算

可変長引数を使って、与えられた引数を除算する関数を作成します。

function divide(...nums) {
  return nums.reduce((acc, num) => acc / num, nums[0] * nums[0]);
}

console.log(divide(100, 2, 5)); // 10
console.log(divide(200, 4, 10)); // 5

divide関数では、残余引数...numsを使って、任意の数の引数を受け取ります。

その後、reduce関数を使って引数を除算し、その結果を返しています。

初期値として、nums[0] * nums[0]を設定することで、最初の除算が正しく行われるようにしています。