【JavaScript】可変長関数の作成方法

こんにちは、ともです。

JavaScriptを勉強してまして関数の作成方法について勉強中です。

JavaScriptでは定義した関数の引数と、呼び出し側の引数の個数をチェックしないことに驚いたほどに初心者です。

そこで、関数の呼び出し側の引数の与え方に対して柔軟に動作する関数である、可変長関数の作成について理解をまとめて置こうと思います。

arguments

JavaScriptの関数内にはargumentsオブジェクトが自動で生成されます。

function sum(format) {
  console.log(arguments);
}
sum(1, 2, 3, 4, 5);

引数を一つ受け取るsum関数を定義しました。

関数内部でargumentsオブジェクトが生成されていますので、console.log(arguments)で確認したところ

Arguments(5) [1, 2, 3, 4, 5, callee: (...), Symbol(Symbol.iterator): ƒ]
0: 1
1: 2
2: 3
3: 4
4: 5
callee: (...)
length: 5
Symbol(Symbol.iterator): ƒ values()
get callee: ƒ ()
set callee: ƒ ()
__proto__: Object

このような感じで与えた引数の情報が格納されています。argument自体の意味が『引数』なので理解しやすいです。

これを利用すると引数の合計値を求める関数は次のように書けます。

function sum(format) {
  let result = 0;
  for (let a of arguments) {
    result += a;
  }
  return result;
}
console.log(sum(1, 2, 3, 4, 5));//Out:15

argumentsに格納された値を１つずつfor…ofで加算しています。

『…』演算子(スプレッド構文)の利用

function sum(...num) {
  console.log(num);
  // Out：[1, 2, 3, 4, 5]
}
sum(1, 2, 3, 4, 5);

上記のように『…』演算子を利用すると、引数を配列として展開してくれます。(ES2015)

argumentsを利用するよりも『…』演算子を利用する方が、『可変長関数だな』と分かりやすいです。

function sum(...nums) {
  let result = 0;
  for (let num of nums) {
    result += num;
  }
  return result;
}

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

argumentsではなく『…』演算子を利用してみました。

function sum(format) {
  let nums = [...arguments]; // arguments->array
  let result = 0;
  for (let num of nums) {
    result += num;
  }
  return result;
}

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

このようにargumentsからスプレッド構文を利用し配列を取り出すこともできます。