JavaScriptとTypeScriptにおけるオープンエンド関数引数

2024-04-11

JavaScriptとTypeScriptにおけるオープンエンド関数引数

オープンエンド関数引数とは？

JavaScriptでの例

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

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

この例では、sum関数は...numbersという引数を受け取ります。...演算子は、渡された引数を配列に変換します。そのため、numbers変数には、呼び出し時に渡されたすべての数値が格納されます。

function sum(...numbers: number[]): number {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

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

TypeScriptでは、引数の型も指定できます。この例では、sum関数はnumber型の引数のみを受け取るように定義されています。

オープンエンド関数引数を使うと、以下のような利点があります。

コードの汎用性と再利用性を向上させることができます。
可変長の引数を扱う関数を簡単に定義できます。
コードをより簡潔に記述できます。

渡された引数の型を事前に確認する必要があります。
引数の個数に制限がない場合は、無限ループが発生する可能性があります。

オープンエンド関数引数は、JavaScriptとTypeScriptで便利な機能です。コードの汎用性と再利用性を向上させるために、積極的に活用しましょう。

JavaScript

// 1. 配列の要素をすべて足す関数

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

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

// 2. 最大値と最小値を求める関数

function findMinMax(...numbers) {
  let min = numbers[0];
  let max = numbers[0];
  for (const number of numbers) {
    if (number < min) {
      min = number;
    } else if (number > max) {
      max = number;
    }
  }
  return { min, max };
}

const { min, max } = findMinMax(1, 2, 3, 4, 5);
console.log(`最小値: ${min}`); // 最小値: 1
console.log(`最大値: ${max}`); // 最大値: 5

// 3. オブジェクトのキーと値をすべて出力する関数

function printObject(...entries) {
  for (const entry of entries) {
    console.log(`${entry.key}: ${entry.value}`);
  }
}

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo",
};

printObject(Object.entries(person));

// 出力例
// name: John Doe
// age: 30
// city: Tokyo

// 4. 可変長の引数を扱う関数

function doSomething(...args) {
  // argsには、呼び出し時に渡されたすべての引数が格納される
  console.log(args);
}

doSomething(1, 2, 3, "Hello", true);

// 出力例
// [1, 2, 3, "Hello", true]

TypeScript

// 1. 型付きのオープンエンド関数引数

function sum(...numbers: number[]): number {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

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

// 2. ジェネリック型を使ったオープンエンド関数引数

function filter<T>(items: T[], predicate: (item: T) => boolean): T[] {
  const filteredItems = [];
  for (const item of items) {
    if (predicate(item)) {
      filteredItems.push(item);
    }
  }
  return filteredItems;
}

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filter(numbers, (n) => n % 2 === 0);
console.log(evenNumbers); // [2, 4]

オープンエンド関数引数を実現する他の方法

argumentsオブジェクトは、関数内で呼び出し時に渡されたすべての引数にアクセスできます。ただし、argumentsオブジェクトは非推奨となっているため、新しいコードでは使用しないことを推奨します。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

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

Restパラメータは、...演算子と同様の機能を提供します。ただし、Restパラメータはより新しい構文であり、argumentsオブジェクトよりも安全に使用できます。

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

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

可変長引数関数は、引数の個数を事前に定義せずに呼び出すことができる関数です。ただし、可変長引数関数はブラウザやJavaScriptエンジンによってサポートされていない場合があります。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

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