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

JavaScriptのデフォルトパラメータとレストパラメータの違いとは？使い方を徹底解説

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

デフォルトパラメータは、関数の引数をより手軽に扱うために導入された機能です。仮引数にあらかじめデフォルト値を設定しておくことで、関数呼び出し時に値が渡されなかった場合、あるいは undefined が渡された場合にのみ、そのデフォルト値で仮引数が初期化されます。

サンプルコード

<html>
   <body>
      <script>
         // inc のデフォルト値は 1 に設定
         function inc(val1, inc = 1) {
            return val1 + inc;
         }
         
         document.write(inc(10,10)); // 20
         document.write("<br>");
         document.write(inc(10)); // 11
      </script>
   </body>
</html>

実行結果

上記のコードでは、inc(10, 10) のように第2引数を明示的に渡すと「20」が出力されます。一方、inc(10) のように第2引数を省略すると、デフォルト値の「1」が自動的に適用され「11」が出力されます。このように、引数が省略された場合の挙動をシンプルに定義できるのがデフォルトパラメータの利点です。

レストパラメータとは

レストパラメータはES6（ECMAScript 2015）で導入された機能で、開発者の作業負担を軽減する目的で追加されました。従来の arguments オブジェクトの代わりとなる仕組みで、3つのドット「...」をパラメータ名の前に記述することで使用できます。

レストパラメータを使うと、個数が不定の引数をまとめて1つの配列（Arrayインスタンス）として受け取ることが可能になります。

サンプルコード

以下のコードを見てみましょう。

<html>
   <body>
      <script>
         function addition(...numbers) {
            var res = 0;
            numbers.forEach(function (number) {
               res += number;
            });
            return res;
         }
         document.write(addition(3)); // 3
         document.write(addition(5,6,7,8,9)); // 35
      </script>
   </body>
</html>

addition(3) を呼び出すと「3」、addition(5,6,7,8,9) を呼び出すと全引数を合計した「35」が出力されます。このように、引数の数が事前にわからないケースでも、レストパラメータを使えば柔軟に処理できます。

両者の主な違い

デフォルトパラメータとレストパラメータはどちらもES6以降の関数引数に関する機能ですが、役割はまったく異なります。

項目デフォルトパラメータレストパラメータ
目的引数が省略された際の初期値を設定する不定数の引数を配列としてまとめて受け取る
記法param = 値...param
受け取るデータ単一の値配列（Array）
配置の制限任意の位置に指定可能必ずパラメータリストの最後に配置する必要がある

つまり、「引数がないときの備え」にはデフォルトパラメータを、「いくつ渡されるかわからない引数」にはレストパラメータを使う、という使い分けが基本となります。両者を組み合わせれば、より堅牢で読みやすい関数を実装できます。

  1. JavaScriptのカスタム関数と組み込み関数の違いをわかりやすく解説

    JavaScriptにおけるカスタム関数とは、開発者自身が目的に合わせて定義・作成する「ユーザー定義関数」のことです。JavaScriptでは、処理内容に応じて独自の関数を自由に記述できます。一方、組み込み関数は、あらかじめJavaScriptライブラリ側で用意されている関数であり、自分で実装しなくてもすぐに呼び出して利用できるのが特徴です。 カスタム関数の基本構文 カスタム関数は、functionキーワードを使って次のように定義します。 <script>    <!--       function functionname

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方