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

JavaScript関数のデフォルトパラメータの設定方法をわかりやすく解説

JavaScriptでは、関数のパラメータにデフォルト値（初期値）を簡単に設定できます。これにより、引数が渡されなかった場合やundefinedが渡された場合に、あらかじめ指定しておいた値が自動的に使用されます。

デフォルトパラメータの基本

デフォルトパラメータは、関数を定義する際にパラメータ名の後に「=（イコール）」を使ってデフォルト値を記述するだけで設定できます。書式は以下のとおりです。

function 関数名(パラメータ1, パラメータ2 = デフォルト値) {
  // 処理
}

この機能を活用すると、引数の省略時の動作を明確に定義でき、コードの可読性と安全性が向上します。

サンプルコード

以下は、数値を指定した値ずつ加算する関数の例です。加算値「inc」のデフォルト値を「1」に設定しています。

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

実行結果

20
11

コードの解説

この例では、2つの呼び出しパターンで動作の違いを確認できます。

  • inc(10, 10) — 第2引数に「10」が明示的に渡されているため、デフォルト値は使われず、10 + 10 = 20 が返されます。
  • inc(10) — 第2引数が省略されているため、デフォルト値の「1」が適用され、10 + 1 = 11 が返されます。

注意点

デフォルト値が適用されるのは、引数が渡されなかった場合またはundefinedが渡された場合のみです。たとえば「null」や「0」を明示的に渡した場合は、それがそのまま有効な値として扱われ、デフォルト値には置き換わりません。

このデフォルトパラメータはES6（ECMAScript 2015）で導入された機能で、主要なすべてのモダンブラウザでサポートされています。以前は関数本体内で「if (inc === undefined) inc = 1;」のように条件分岐を書く必要がありましたが、現在でははるかに簡潔に記述できるようになりました。

  1. 【HTML入門】select要素のドロップダウンリストにデフォルト値（初期選択）を設定する方法

    HTMLでは、<select>要素を使うことで、フォーム内に簡単なドロップダウンリスト（セレクトボックス）を作成し、ユーザーに入力してもらうことができます。セレクトボックスは「プルダウンメニュー」とも呼ばれ、複数の選択肢を一覧形式で表示できる便利な部品です。さらに、このドロップダウンリストにはデフォルト値（初期状態で選択されている項目）を設定することも可能です。方法はとてもシンプルで、あらかじめ選択しておきたい項目の<option>タグに selected属性 を追加するだけです。selected属性の基本的な使い方以下のように、初期表示したい選択肢にselectedを

  2. JavaScriptの関数パラメーターとは？使い方をサンプルコードで解説

    JavaScriptでは、関数を呼び出すときにさまざまなパラメーター（引数）を渡すことができます。関数側では、渡されたパラメーターを受け取り、それに対して任意の処理を実行することが可能です。また、1つの関数は複数のパラメーターを受け取ることができ、それぞれのパラメーターはカンマ（,）で区切って指定します。さらに、JavaScriptには arguments オブジェクトが用意されており、仮引数として宣言した変数とは別に、実際に関数へ渡されたすべての引数へアクセスできます。以下のサンプルコードでは、Array.from(arguments) を使って受け取った引数を配列化し、順番に画面へ出力して