JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのデフォルト引数とレストパラメータで実現する柔軟な関数シグネチャ

JavaScriptでは、デフォルトパラメータ（デフォルト引数）とレストパラメータ（残余引数）を組み合わせることで、引数の有無や個数に柔軟に対応できる関数シグネチャを簡単に実装できます。本記事では、それぞれの仕組みと実際のコード例を通じて、効果的な関数の設計方法を解説します。

デフォルトパラメータとは

デフォルトパラメータは、関数呼び出し時に引数が省略された場合やundefinedが渡された場合に自動的に適用される初期値です。これにより、引数不足によるエラーやNaNの発生を防ぎ、より堅牢な関数を作成できます。

レストパラメータとは

レストパラメータは、引数名の前に「...」を付けて定義し、残りのすべての引数を1つの配列として受け取ります。引数の個数が決まっていない関数（例：複数の数値の合計を求める処理など）を簡潔に記述できるのが大きな特徴です。

サンプルコード

以下は、デフォルトパラメータとレストパラメータを使って関数シグネチャを実装するJavaScriptのコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Function Signatures with Default and Rest Parameters</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add() function with multiple parameters</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   function add(a = 0, b = 0, ...param) {
      let total = 0;
      total += a + b;
      param.forEach((item) => {
         total += item;
      });
      return total;
   }
   BtnEle.addEventListener("click", (event) => {
      resEle.innerHTML =
      "The total sum = " + add(2, null, 22, 11, 33, 44, 55);
   });
</script>
</body>
</html>

コードのポイント

  • function add(a = 0, b = 0, ...param) のように、通常の引数にデフォルト値を設定し、その後にレストパラメータを配置します。
  • ボタンをクリックすると add(2, null, 22, 11, 33, 44, 55) が実行され、a には 2、b には null、param には [22, 11, 33, 44, 55] という配列が渡ります。
  • デフォルト値は引数が undefined のときにのみ適用されます。null を渡すとデフォルト値にはなりませんが、加算の際には null が 0 として扱われるため、合計値の計算には影響しません。

実行結果

ブラウザでページを開くと、次のような画面が表示されます。

JavaScriptのデフォルト引数とレストパラメータで実現する柔軟な関数シグネチャ

「CLICK HERE」ボタンをクリックすると、すべての引数を合計した結果が出力領域に表示されます。

JavaScriptのデフォルト引数とレストパラメータで実現する柔軟な関数シグネチャ
  1. JavaScriptのパラメータ（仮引数）と引数（実引数）の違いをわかりやすく解説

    パラメータと引数とは？JavaScriptにおいて、パラメータ（仮引数）とは、関数を定義するときに関数名の後ろの括弧内に記述される変数名のことです。一方、引数（実引数）とは、関数を呼び出すときに実際に渡される値であり、関数側で受け取られるものです。イメージとしては、パラメータは値を受け取るための「受け皿」のような名前で、引数はその受け皿に渡される「実際の値」です。この2つの違いを正しく理解することは、関数を使いこなすうえで非常に重要です。サンプルコード以下は、JavaScriptにおけるパラメータと引数の動作を確認できるコード例です。ボタンをクリックすると、配列の要素が引数として関数に渡され、

  2. JavaScriptの分割代入を使った関数パラメータの受け渡し方法

    JavaScriptでは、関数にオブジェクトを引数として渡す際、「分割代入（デストラクチャリング）」と呼ばれる構文を利用することで、オブジェクトの各プロパティを個別の変数として受け取ることができます。 さらに、各プロパティにデフォルト値を指定しておけば、対応するプロパティが存在しない場合でもエラーにならず、あらかじめ設定した値が使用されます。これにより、安全で柔軟な関数設計が可能になります。 サンプルコード 以下は、分割代入を使って関数のパラメータを受け取るJavaScriptのコード例です。 <!DOCTYPE html> <html lang="en&quo