スタートページ＞ Javascript＞ 関数への引数渡し

名前付引数

通常の関数では、
　　function 関数（引数１, 引数２, 引数３, ・・・, 引数ｎ) {
　　　　　　・・・
　　}
の形式で定義され、それを呼び出すには、
　　関数(1, 2, 3, …, n);
とします。このように引数の位置が固定している引数を位置固定引数といいます。

位置固定引数の形式では、引数の個数が大きく、しかも省略して標準値（デフォルト値）を使うことが多い場合、最後のほうの引数に値を指定するのは厄介です。
　　「引数ｉ＝１２」「引数ｊ＝"ABC"」
というような指定ができれば便利です。このような引数の指定方式を名前付引数といいます。

まとめ

例０：ここでの例題

次の関数０は、自然数（1, 2, 3, …）の「最初」「最後」「間隔」（キザミ幅）を与えて、その合計をダイアログボックスに表示します。
関数０の引数はすべて位置固定引数ですが、関数１以降で同じ内容の処理を名前付引数にする場合を検討します。

    function 関数０(最初, 最後, 間隔) {
        var 合計 = 0;
        for (var i = 最初; i <= 最後; i += 間隔) {
            合計 += i;
        }
        alert(合計);
    }

関数０(4, 8, 2)； →4+6+8=18→18 が表示される

例１：名前付引数の記述方法

名前付引数では、計算する関数「関数１」とメイン関数「例０」の引数を次のように記述します。
　　　　関数：　　function 関数１(引数) {
　　　　　　　　　　　　…　…
　　　　　　　　　}
　　　　呼出：　　関数１( {最初: 4, 最後: 8, 間隔: 2} );

1. 関数の記述形式
   • 関数１には、必ず仮引数「引数」（名称は自由）を入れる。
     例１で「最初: 4」とすると、関数１では「引数.最初」の値が４になる。
   • 例１では、名前付引数のリストを {…} で囲まなければならない。
2. 実引数の記述形式
   • 引数の名称と値は、{ 名称: 値, 名称: 値, … }の形式にする。→後述のケース１
     実際の記述では、次のように字下げすると読みやすくなります。
     

     　　　関数１( {
     　　　　　最初: 4,
     　　　　　間隔: 2,
     　　　　　最後: 8
     　　　} );

   • 名前付引数の記述順序は自由である。
     例えば、 関数１( {最初: 4, 間隔: 2, 最後: 8 } );としても全く同じ結果になる。→ケース２
3. 実引数の省略とデフォルト設定
   • 実引数を省略することができる。
     例えば「間隔」を省略して、 関数１( {最初: 4, 最後: 8} ); とすることができる。→ケース３
     すべての引数を省略する場合も 関数１( { } ); とする必要があり、関数１( ); ではエラーになる。→ケース４
   • 省略した引数には、関数１で設定したデフォルト値になる。

デフォルト設定の方法

呼び出された側の関数では、変数「仮引数名.実引数名」として値を受け取ります。関数内で変数名をそのまま使うのは煩雑なので、次のように関数内で使う変数を定義するのが適切です。
　　　　var 変数名 = 仮引数名.実引数名;
　例１で「最初: 4」とすると、関数１では「引数.最初」となるので、例えば
　　　　var 最初 = 引数.最初;
として、関数１内では変数「最初」を使うことにする。

省略された引数は、値が undefined（未定義）になっている。それにデフォルト値を設定するには、
　　　　if (変数 === undefined) 変数 = デフォルト値;
とすればよい。
（undefined（未定義）と Null とを明確に区別するために == ではなく、===（厳密等価演算子）を用いている。）

関数１

関数１では、すべての引数を名前付引数とし、その引数名を「引数」としました。
そして「最初」を１、「最後」を１０、「間隔」を１にデフォルト設定しています。

    function 関数１(引数) {
        // 引数変数の定義
        var 最初 = 引数.最初;
        var 最後 = 引数.最後;
        var 間隔 = 引数.間隔;
        // デフォルト値の設定
        if (最初 === undefined) 最初 = 1;
        if (最後 === undefined) 最後 = 10;
        if (間隔 === undefined) 間隔 = 1;
        // 計算
        var 合計 = 0;
        for (var i = 最初; i <= 最後; i += 間隔) {
            合計 += i;
        }
        alert(合計);
    }

ケース１関数１( { 最初: 4, 最後: 8, 間隔: 2 } ); すべて指定　４＋６＋８＝１８が表示される
ケース２関数１( { 最初: 4, 間隔: 2, 最後: 8 } ); 順序の変更ができる　４＋６＋８＝１８が表示される
ケース３関数１( { 最初: 4,最後: 8 } ); 「間隔」を省略（デフォルト値＝１）４＋５＋６＋７＋８＝３０が表示される
ケース４関数１( {} ); すべて省略　１＋２＋・・・＋１０＝５５が表示される

ケース４の{}は必要です。単に 関数１(); とするとエラーになります。その回避方法は例３で示します。

例２：固定位置引数と名前付引数の混在

引数のうち必須な変数は固定位置引数とし、省略可能な変数は名前付引数とするのが通常でしょう。
関数２では「最初」を固定位置引数とし、「最後」と「間隔」を名前付引数としました。

    function 関数２(最初, 引数) {
        // 引数変数の定義
        var 最後 = 引数.最後;
        var 間隔 = 引数.間隔;
        if (最後 === undefined) 最後 = 10;
        if (間隔 === undefined) 間隔 = 1;
        // 計算
        var 合計 = 0;
        for (var i = 最初; i <= 最後; i += 間隔) {
            合計 += i;
        }
        alert(合計);
    }

ケース１関数２(4, {最後: 8 });
位置固定引数で「最初」は４、名前付引数で「最後」を８、「間隔」は指定していないのでデフォルト値の１
４＋５＋６＋７＋８＝３０が表示されます。
ケース２関数２(4, {});
「最初」は４、名前付引数が空なので「最後」が１０、「間隔」が１になる
４＋５＋・・・＋９＋１０＝４９が表示されます。
ケース３関数２(4);
名前付引数がないので、「var 最後 = 引数.最後;」がエラーになります。

例３：名前付引数を与えないときの回避

例１のケース４、例２のケース３のエラーを回避するには、関数３のように (引数 === undefined)の処理を加える必要があります。

    function 関数３(最初, 引数) {
        // 引数変数の定義
        if (引数 === undefined) {
            var 最後 = 10;
            var 間隔 = 1;
        }
        else {
            最後 = 引数.最後;
            間隔 = 引数.間隔;
            if (最後 === undefined) 最後 = 10;
            if (間隔 === undefined) 間隔 = 1;
        }
        // 計算
        var 合計 = 0;
        for (var i = 最初; i <= 最後; i += 間隔) {
            合計 += i;
        }
        alert(合計);
    }