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

JavaScript残余引数のイメージJS
この記事は約8分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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]を設定することで、最初の除算が正しく行われるようにしています。

●注意点

  1. 残余引数は、引数リストの最後に配置しなければなりません。
  2. 残余引数は1つしか使用できません。複数の残余引数を持つことはできません。
  3. 引数が多すぎると、スタックオーバーフローなどの問題が発生する可能性があります。
    適切な引数の数を考慮して関数を設計してください。

まとめ

残余引数を使用することで、関数が可変長の引数を柔軟に扱えるようになります。

これにより、引数の数が不定の場合や、配列を引数として渡す場合など、様々なシチュエーションで便利に使えます。

ただし、残余引数の使用には注意点がありますので、それらを考慮しながら関数を設計してください。