JavaScript 可変長引数解説

JavaScriptにおける関数への可変長引数

JavaScriptでは、関数の引数として、予め決められた個数ではなく、任意の個数の値を渡すことができます。これを 可変長引数 と呼びます。

arguments オブジェクト

関数内で、渡された引数の値にアクセスするために、arguments オブジェクトを使用します。これは、渡された引数を配列のような形式で保持しています。

例

function myFunction() {
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

myFunction(1, 2, 3, 4); // 出力: 1 2 3 4

レストパラメーター (...)

ES6以降では、... を使って、可変長引数をより簡潔に扱うことができます。これを レストパラメーター と呼びます。

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

console.log(sum(1, 2, 3   , 4)); // 出力: 10

注意事項

• レストパラメーターと通常の引数を混在させることができます。
• レストパラメーターは、関数のパラメータの最後に使用しなければなりません。
• arguments オブジェクトは配列ではありませんが、配列のような操作ができます。

JavaScript 可変長引数解説: 例コード

function myFunction() {
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

myFunction(1, 2, 3, 4); // 出力: 1 2 3 4

• arguments.length で引数の個数を取得し、ループで各引数を処理しています。
• arguments オブジェクトは、関数に渡された引数を配列のような形式で保持します。

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

console.log(sum(1, 2, 3   , 4)); // 出力: 10

• for...of ループを使用して、配列の要素を順に処理し、合計を計算しています。
• ...numbers は、可変長引数を配列のように受け取ります。

混合使用

function greet(greeting, ...names) {
  console.log(greeting);
  for (let name of names) {
    console.log(name);
  }
}

greet("Hello", "Alice", "Bob", "Charlie");

• 挨拶文を出力した後、名前を順に出力しています。
• 1つ目の引数は通常の引数として受け取り、残りの引数はレストパラメーターとして受け取っています。

デフォルト値の設定

function log(...values) {
  console.log(...values, "This is a default message.");
}

log("Hello", "world");

• 引数が渡されなかった場合、デフォルト値が使用されます。
• レストパラメーターにデフォルト値を設定することができます。

JavaScript 可変長引数の代替方法

JavaScriptでは、可変長引数以外にも、関数に任意の数の引数を渡す方法があります。

配列の引数

関数の引数として配列を渡すことで、任意の数の値を処理することができます。

function sumArray(numbers) {
  let result = 0;
  for (let number of numbers) {
    result += number;
  }
  return result;
}

console.log(sumArray([1, 2, 3, 4])); // 出力: 10

オブジェクトの引数

関数の引数としてオブジェクトを渡し、プロパティ名で値を指定することもできます。

function greet(options) {
  console.log("Hello, " + options.name + "!");
}

greet({ name: "Alice" });

組み込み関数 arguments

関数内で、渡された引数の値にアクセスするために、arguments オブジェクトを使用することもできます。ただし、この方法はES6以降ではあまり推奨されていません。

function myFunction() {
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

myFunction(1, 2, 3, 4); // 出力: 1 2 3 4

スプレッド演算子 (...)

ES6以降では、スプレッド演算子を使用して、配列やオブジェクトを展開することができます。これにより、可変長引数のような効果を実現できます。

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(...[1, 2, 3, 4])); // 出力: 10