Restパラメータ

編集

Restパラメータ(Rest Parameters)は、関数の仮引数として使用され、複数の引数を配列として扱うことができるJavaScriptの構文です。可変長引数を扱う場合に便利です。

構文

編集
function functionName(...restParameter) {
  // 関数の本体
}
  • ... の後にパラメータ名を指定します。
  • restParameter は配列として扱われます。

使用例

編集

引数を配列として取得

編集
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

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

可変長引数を配列として扱い、合計値を計算しています。

固定の引数とRestパラメータ

編集
function greet(greeting, ...names) {
  return `${greeting}, ${names.join(' and ')}!`;
}

console.log(greet("Hello", "Alice", "Bob", "Charlie")); 
// "Hello, Alice and Bob and Charlie!"

固定引数 greeting の後に、可変長引数をRestパラメータとして受け取っています。

空のRestパラメータ

編集
function logNumbers(...numbers) {
  console.log(numbers);
}

logNumbers(); // []

引数がない場合でも、Restパラメータは空の配列として初期化されます。

特徴と注意点

編集
  • 配列として扱う: Restパラメータは配列なので、配列メソッド(map, filter, reduce など)が使用できます。
  • 可変長引数を効率的に処理: 従来の arguments オブジェクトに比べ、Restパラメータは可読性と柔軟性に優れています。
  • 固定引数との併用: Restパラメータは最後の引数として定義する必要があります。

使用例: 配列の操作

編集

配列の合計

編集
function calculateSum(...values) {
  return values.reduce((sum, value) => sum + value, 0);
}

console.log(calculateSum(5, 10, 15)); // 30

Restパラメータを配列として受け取り、合計値を計算します。

配列のフィルタリング

編集
function filterOddNumbers(...numbers) {
  return numbers.filter(number => number % 2 === 0);
}

console.log(filterOddNumbers(1, 2, 3, 4, 5)); // [2, 4]

配列の要素をフィルタリングします。

使用例: ES5のargumentsとの比較

編集

Restパラメータの導入前は、arguments オブジェクトを使用して可変長引数を処理していました。

ES5での可変長引数

編集
function sum() {
  const args = Array.prototype.slice.call(arguments);
  return args.reduce((total, num) => total + num, 0);
}

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

ES6のRestパラメータ

編集
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

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

Restパラメータを使うことでコードが簡潔になります。

使用例: 分割代入との組み合わせ

編集

Restパラメータは分割代入と組み合わせて使用できます。

配列の残りの要素を取得

編集
const [first, ...rest] = [1, 2, 3, 4];

console.log(first); // 1
console.log(rest); // [2, 3, 4]

オブジェクトの残りのプロパティを取得

編集
const { a, ...others } = { a: 1, b: 2, c: 3 };

console.log(a); // 1
console.log(others); // { b: 2, c: 3 }

関連項目

編集

参考

編集