====== JavaScript 関数の引数 ======

 --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2021-04-05//

===== 引数の数 =====

JavaScriptでは引数の数をチェックしない。

<sxh javascript;title:Example>
function func(arg) {
    console.log(arg);
}

func();      // 出力：undefined
func(1);     // 出力：1
func(1, 2);  // 出力：1
</sxh>

引数の有無は関数内でundefinedによって判断する。

<sxh javascript;title:Example>
function getArea(height, width) {
    if (height === undefined) height = 0;
    if (width === undefined) width = 0;
    return height * width;
}

console.log(getArea());        // 出力：0
console.log(getArea(10));      // 出力：0
console.log(getArea(10, 20));  // 出力：200
</sxh>
\\

===== argumentsオブジェクト =====

argumentsオブジェクトは関数呼び出し時に自動的に生成され、引数の数とそれぞれの値を取得できる。

<sxh javascript;title:Example>
function getArea(height, width) {
    return arguments.length < 2 ? 0 : arguments[0] * arguments[1];
}
console.log(getArea());        // 出力：0
console.log(getArea(10));      // 出力：0
console.log(getArea(10, 20));  // 出力：200
</sxh>

<sxh javascript;title:Example>
function max() {
    if(arguments.length > 0) {
        var m = arguments[0];
        for (let i = 1, len = arguments.length; i <len; i++)
            if(m < arguments[i]) m = arguments[i];
        return m;
    }
}
console.log(max());              // 出力：undefined
console.log(max(10));            // 出力：10
console.log(max(10, 5, 20, 8));  // 出力：20
</sxh>
\\

===== 引数のデフォルト値 =====
<sup>[[js:top#ECMAScript|*2015]]</sup>

<code javascript>
function 関数名(引数=デフォルト値, …)
</code>

<sxh javascript;title:Example>
function getArea(height=0, width=0) {
    return height * width;
}
console.log(getArea());        // 出力：0
console.log(getArea(10));      // 出力：0
console.log(getArea(10, 20));  // 出力：200
</sxh>
\\

===== 可変長引数 =====
<sup>[[js:top#ECMAScript|*2015]]</sup>

<code javascript>
function 関数名(引数名, ･･･, ...引数名)
</code>

<sxh javascript;title:Example>
function mySum(...values) {
    let sum = 0;
    for(v of values) sum += v;
    return sum;
}
console.log(mySum());         // 出力：0
console.log(mySum(1));        // 出力：1
console.log(mySum(1,2,3,4));  // 出力：10
</sxh>

※ argumentsと異なり可変長引数はArrayオブジェクトである。

==== 実引数(呼び出し側)での使い方 ====

<code javascript>
関数名(...配列オブジェクト);  // 配列オブジェクトは仮引数リストに展開される
</code>

<sxh javascript;title:Example>
function mySum(...values) {
    let sum = 0;
    for(v of values){
       sum += v;
    }
    return sum;
}
console.log(mySum(...[1, 2, 3, 4]));   // 配列は仮引数リストに展開される  出力：10
console.log(mySum([1, 2, 3, 4]));      // スカラと配列の足し算が行われ文字列として表示される  出力：01,2,3,4
</sxh>
\\

===== 名前付き引数 =====
<sup>[[js:top#ECMAScript|*2015]]</sup>

<sxh javascript;title:Example 分割代入の応用>
function getArea({height=0, width=0}) {
    return height * width;
}
console.log(getArea({height:10, width:20}));  // 出力：200
</sxh>