JavaScript 関数のオーバーロード

Mehvish Ashiq 2023年10月12日
  1. JavaScript で if-else ステートメントを使用して関数のオーバーロードを実行する
  2. JavaScript で switch ステートメントを使用して関数のオーバーロードを実行する
  3. JavaScript で関数式を使用して関数のオーバーロードを実行する
JavaScript 関数のオーバーロード

このチュートリアルでは、JavaScript 関数のオーバーロードについて説明します。関数のオーバーロードとは、同じ名前でさまざまな実装を持つ複数の関数を持つことを意味します。ただし、この概念は JavaScript では使用できません。

同じ名前の関数が複数ある場合、最後の関数は JavaScript で実行されます。そのため、JavaScript で関数のオーバーロードを実装するために代替手段を使用します。

このチュートリアルでは、if-elseswitch、および関数式を使用して、関数のオーバーロードを実行します。

JavaScript で if-else ステートメントを使用して関数のオーバーロードを実行する

function displaySum() {
  // if no argument
  if (arguments.length == 0) {
    console.log('No argument is passed.');
  }

  // if only one argument
  else if (arguments.length == 1) {
    console.log('You have to pass at least two arugments to perform addition.');
  }

  // multiple arguments
  else {
    let sum = 0;
    let length = arguments.length;
    for (var i = 0; i < length; i++) {
      sum = sum + arguments[i];
    }
    console.log('Sum is ' + sum);
  }
}

displaySum();                     // call function with no parameter
displaySum(3);                    // call function with one parameter
displaySum(4, 5);                 // call function with two parameters
displaySum(3, 5, 7, 2, 9, 7, 8);  // call function with multiple parameters

出力:

"No argument is passed."
"You have to pass at least two arguments to perform addition."
"Sum is 9"
"Sum is 41"

コードスニペットでは、if-else ステートメントを使用して JavaScript で関数のオーバーロードを実行します。displaySum() 関数を呼び出します。この関数は、さまざまなパラメーターでさまざまに実行されます。パラメータが渡されないか 1つ渡されると、メッセージが表示されます。

2つのパラメーターが指定されている場合は、2つの数値を加算し、for ループを使用して複数のパラメーターのすべての値を加算します。引数は、重要な役割を果たし、関数内で使用できる配列のようなオブジェクトです。これは、それが使用されている特定の関数に渡された引数を表します。

JavaScript で switch ステートメントを使用して関数のオーバーロードを実行する

if-else ステートメントの代わりに switch ステートメントを使用して、JavaScript で関数のオーバーロードを実装することもできます。どちらも同じ出力を生成していますが、コードは switch ステートメントでよりきれいに見えます。

function displaySum() {
  switch (arguments.length) {
    // if no argument
    case 0:
      console.log('No argument is passed.');
      break;

      // if only one argument
    case 1:
      console.log(
          'You have to pass at least two arguments to perform addition.');
      break;

      // multiple arguments
    default:
      let sum = 0;
      let length = arguments.length;

      for (var i = 0; i < length; i++) {
        sum = sum + arguments[i];
      }
      console.log('Sum is ' + sum);
      break;
  }
}

displaySum();                     // call function with no parameter
displaySum(3);                    // call function with one parameter
displaySum(4, 5);                 // call function with two parameters
displaySum(3, 5, 7, 2, 9, 7, 8);  // call function with multiple parameters

出力:

"No argument is passed."
"You have to pass at least two arguments to perform addition."
"Sum is 9"
"Sum is 41"

このコードでは、switch ステートメントを使用して、さまざまな引数に基づいてさまざまなアクションを実行します。arguments オブジェクトについてはここまたは前のセクションで読むことができます。

JavaScript で関数式を使用して関数のオーバーロードを実行する

// Creating a class "practiceFunctionOverloading"
class practiceFunctionOverloading {
  // Creating an overloadable function.
  displaySum() {
    // Define four overloaded functions
    var functionNoParam = function() {
      return 'No parameter is passed.';
    };
    var functionOneParam = function(arg1) {
      return 'You must have at least two parameters to sum.';
    };
    var functionTwoParam = function(arg1, arg2) {
      console.log('Sum is given below: ');
      return arg1 + arg2;
    };
    var functionMultiParam = function(arg1, arg2, arg3) {
      var sum = 0;
      for (var i = 0; i < arguments.length; i++) {
        sum = sum + arguments[i];
      }
      console.log('Sum is given below: ');
      return sum;
    };

    /* the length and type of the arguments passed
       ( in this case an Array ) we can determine
       which function to be executed */
    if (arguments.length === 0) {
      return functionNoParam();
    } else if (arguments.length === 1) {
      return functionOneParam(arguments[0]);
    } else if (arguments.length === 2) {
      return functionTwoParam(arguments[0], arguments[1]);
    } else if (arguments.length > 2) {
      return functionMultiParam(arguments[0], arguments[1], arguments[2]);
    }
  }
}
// Driver Code
// create an object of class practiceFunctionOverloading
var object = new practiceFunctionOverloading();
console.log(object.displaySum());         // call function with no parameter
console.log(object.displaySum(1));        // call function with one parameter
console.log(object.displaySum(2, 3));     // call function with two parameters
console.log(object.displaySum(2, 4, 5));  // call function with three parameters

出力:

"No parameter is passed."
"You must have at least two parameters to sum."
"Sum is given below: "
5
"Sum is given below: "
11

関数と関数式を使用して、JavaScript を使用した関数のオーバーロードをシミュレートします。このアプローチの欠点は、何百ものパラメーターが渡された場合にコードが乱雑に見えることです。

著者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

関連記事 - JavaScript Function