JavaScript 関数のデフォルト引数のサンプル

JavaScriptの関数のデフォルト引数のサンプルです。

確認環境
・Google Chrome

サンプル	関数のデフォルト引数
	一部のみにデフォルト引数を設定
	デフォルト値がある箇所に引数を設定

関数のデフォルト引数

デフォルト引数は、関数側に設定されます。
関数を呼ぶ側は、引数を省略できます。
関数のデフォルト値がある引数の箇所に、関数を呼ぶ側で引数を設定すると、呼ぶ側の引数が優先されます。
以下は、MDNのデフォルト引数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Default_parameters

関数のデフォルト引数のサンプルです。

<script>
  function test1(a = 1, b = 2, c = 3) {
    return a + b + c;
  }

  num = test1();
  console.log(num); //6
</script>

6行目の関数呼び出しは、引数を指定していません
2行目は、デフォルト引数を使用しています。
3行目は、デフォルト引数の値で計算されて6になります。

一部のみにデフォルト引数を設定

関数のデフォルト引数は、右の引数から順に指定します。
関数の呼び出し側の引数は関数の引数の左からセットされます。
関数の引数に値が渡されなかった場合の値はundefinedになります。

一部のみにデフォルト引数を設定するサンプルです。

<script>
  function test1(a, b = 2, c = 3) {
    return a + b + c;
  }
  num1 = test1(1);
  console.log(num1); //6

  function test2(a, b = 2, c) {
    console.log(a); //1
    console.log(b); //2
    console.log(c); //undefined
    return a + b + c;
  }
  num2 = test2(1);
  console.log(num2); //NaN
</script>

5行目の引数は１つだけです。
2行目はbとcのみデフォルト引数としています。
3行目は、引数にaに1がセットされ結果6になります。

14行目も引数は１つだけです。
8行目の引数は、右端のCにデフォルト引数がありません。
11行目の変数cは、undefinedになります。

デフォルト値がある箇所に引数を設定

デフォルト値がある箇所に引数を設定する場合、関数呼び出し側の引数が設定されます。
関数の呼び出し側の引数は関数の引数の左からセットされます。

デフォルト値がある箇所に引数を設定するサンプルです。

<script>
  function test5(a = 1, b = 2, c = 3) {
    return a + b + c;
  }

  num = test5(5, 6);
  console.log(num); //14
</script>

6行目は、引数を2つ設定しています。
2行目は、3つの引数にデフォルト引数が設定されています。引数は、aは5、bは6、cは3でセットされます。