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

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

確認環境
・Windows10
・Google Chrome

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

関数のデフォルト引数

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

コード

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

<script>

num = test1();

console.log(num); //6

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

</script>

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

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

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

コード

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

<script>

num1 = test1(1);

console.log(num1); //6

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

num2 = test2(1);

console.log(num2); //NaN

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

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

11行目は、15行目の関数を呼んでいます。
15行目の引数は、右端のCにデフォルト引数がありません。11行目の引数はaにセットされます。
18行目の引数の値を渡されなかった変数cは、undefinedになっています。

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

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

コード

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

<script>

num = test5(5,6);

console.log(num); //14

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

</script>

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