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

【JavaScript入門】デフォルト引数の後にデフォルト値なしの引数を定義する方法とは？

JavaScriptでは、関数の引数にデフォルト値（初期値）を設定できるデフォルト引数（デフォルトパラメータ）という便利な機能があります。ES6（ECMAScript 2015）以降で利用でき、関数呼び出し時に値が渡されなかった場合や undefined が渡された場合に、あらかじめ定義しておいたデフォルト値が自動的に適用されます。
本記事では、デフォルト引数の基本的な使い方と、「デフォルト引数の後ろにデフォルト値を持たない引数」を定義した場合の挙動について、サンプルコードとともにわかりやすく解説します。

デフォルト引数の基本的な書き方

まずは、第2引数にデフォルト値を設定したシンプルな例を見てみましょう。

サンプルコード

<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引数の 10 が優先され、結果は 20 になります。一方、inc(10) のように第2引数を省略すると、デフォルト値の 1 が自動的に適用され、結果は 11 となります。

デフォルト引数の後にデフォルト値なしの引数を定義する

JavaScriptの引数は左から右へ順に評価・割り当てられるため、デフォルト引数の後ろにデフォルト値を持たない引数を記述しても、文法的には問題ありません。このような書き方をしても、先頭のデフォルト引数は通常どおり正しく機能します。

サンプルコード

<html>
   <body>
      <script>
         function display(val1 = 10, val2) {
            return [val1, val2];
         }
         document.write(display()); // 結果：10,undefined
         document.write(display(20)); // 結果：20,undefined
      </script>
   </body>
</html>

実行結果は次のとおりです。

  • display() → 10,undefined
  • display(20) → 20,undefined

このように、後ろにデフォルト値のない引数が存在していても、最初の引数のデフォルト値 10 は正しく適用されます。ただし、第2引数 val2 には何も渡されていないため undefined になる点には注意してください。

まとめと注意点

  • デフォルト引数を使うと、引数が省略されたり undefined が渡されたりした場合に、自動的に初期値が適用されます。
  • 引数は左から右へ評価されるため、デフォルト引数の後ろにデフォルト値なしの引数を置いてもエラーにはなりません。
  • ただし可読性の観点からは、デフォルト値のある引数は引数リストの末尾に配置するのがベストプラクティスです。途中にデフォルト引数を挟むと、後続の引数を指定する際に、その前にある引数もすべて明示的に渡す必要が生じます。
  1. JavaScriptの関数パラメーターとは？使い方をサンプルコードで解説

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

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

    JavaScriptでは、デフォルトパラメータ（デフォルト引数）とレストパラメータ（残余引数）を組み合わせることで、引数の有無や個数に柔軟に対応できる関数シグネチャを簡単に実装できます。本記事では、それぞれの仕組みと実際のコード例を通じて、効果的な関数の設計方法を解説します。 デフォルトパラメータとは デフォルトパラメータは、関数呼び出し時に引数が省略された場合やundefinedが渡された場合に自動的に適用される初期値です。これにより、引数不足によるエラーやNaNの発生を防ぎ、より堅牢な関数を作成できます。 レストパラメータとは レストパラメータは、引数名の前に「...」を付けて定義し、残り