JavaScript 入門 | 関数 | パラメーターと引数

パラメーター (parameter)

JavaScript では、関数を定義するときにパラメーターの型を別途明示しない。
関数を呼び出すときにも、引数 (argument) として渡された値に対して型チェックを行わない。

関数を呼び出すとき、関数の定義より少ない数の引数が渡されても、他の言語とは異なりエラーは発生しない。
この場合、JavaScript は渡されなかった残りのパラメーターに自動的に undefined 値を設定する。

パラメーター (parameter) とは、関数の定義で受け取った引数を関数内部へ渡すために使用する変数を意味する。
引数 (argument) とは、関数が呼び出されるときに関数へ値を渡す値をいう。

次の例は、3 つのパラメーターを持つ関数に、それぞれ異なる数の引数を渡す例である。

function addNum(x, y, z) { // x、y、z という 3 つのパラメーターを持つ関数 addNum() を定義する。
    return x + y + z;
}
addNum(1, 2, 3); // 引数として 1、2、3 を渡して関数を呼び出す。 -> 6
addNum(1, 2);    // 引数として 1、2 を渡して関数を呼び出す。 -> NaN
addNum(1);       // 引数として 1 を渡して関数を呼び出す。 -> NaN
addNum();        // 引数を何も渡さずに関数を呼び出す。 -> NaN

上の例で addNum() 関数を呼び出すときに引数が 3 つより少なく渡されると、計算できないことを意味する NaN を返す。
その理由は、渡されなかった残りの値が自動的に undefined 値へ設定され、算術演算を実行できないためである。

しかし次の例のようにすると、NaN を返さず、渡された引数だけで正常に計算する関数を作成できる。

function addNum(x, y, z) {
    if(x === undefined) // 関数呼び出し時に x に該当する引数が渡されなかった場合
        x = 0;          // 変数 x の値を undefined から 0 へ変更する。
    if(y === undefined) // 関数呼び出し時に y に該当する引数が渡されなかった場合
        y = 0;          // 変数 y の値を undefined から 0 へ変更する。
    if(z === undefined) // 関数呼び出し時に z に該当する引数が渡されなかった場合
        z = 0;          // 変数 z の値を undefined から 0 へ変更する。
    return x + y + z;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0

arguments オブジェクト

関数の定義より多い数の引数が渡されると、パラメーターに代入されなかった引数は参照する方法がなくなる。
しかし arguments オブジェクトを利用すると、関数へ渡された引数の総数を確認したり、それぞれの引数へ直接アクセスしたりできる。

arguments オブジェクトは、関数が呼び出されるときに渡された引数を配列のような形で保存している。
最初の引数は arguments[0] に保存され、次の引数は arguments[1] に保存される。
また、引数の総数は arguments オブジェクトの length プロパティに保存される。

次の例の addNum() 関数は、受け取る引数の数に関係なく常に正常な計算を行う。

function addNum() {
    var sum = 0;                                // 合計を保存する変数 sum を宣言する。
    for(var i = 0; i < arguments.length; i++) { // 受け取った引数の総数だけ繰り返す。
        sum += arguments[i];                    // 受け取ったそれぞれの引数を sum に加える。
    }
    return sum;
}
addNum(1, 2, 3); // 6
addNum(1, 2);    // 3
addNum(1);       // 1
addNum();        // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

arguments オブジェクトは配列に似ているだけで、実際には Array オブジェクトではない。
数値のインデックスと length プロパティだけを持つだけであり、すべてを配列のように扱うことはできない。

デフォルトパラメーターと残余パラメーター

ECMAScript 6 から新しく定義されたパラメーターは次のとおりである。

  1. デフォルトパラメーター (default parameter)
  2. 残余パラメーター (rest parameter)

デフォルトパラメーター (default parameter)

デフォルトパラメーターとは、関数を呼び出すときに指定された引数を渡さなかった場合に使用される基本値を意味する。

JavaScript でパラメーターの既定値は undefined に設定されている。

function mul(a, b) {
    // 引数が 1 つだけ渡されたとき、残りのパラメーターの値を undefined ではなく 1 に設定する。
    b = (typeof b !== 'undefined')  ? b : 1;
    return a * b;
}
mul(3, 4); // 12
mul(3);    // 3

しかし、デフォルトパラメーターを利用すると、このようなパラメーターの既定値を変更できる。

function mul(a, b = 1) { // 引数が 1 つだけ渡されると、残りのパラメーターの値を常に 1 に設定する。
    return a * b;
}
mul(3, 4); // 12
mul(3);    // 3

デフォルトパラメーターは Internet Explorer、Safari、Opera ではサポートされない。

残余パラメーター (rest parameter)

残余パラメーターは、省略接頭辞 (…) を使用して、特定位置の引数から最後の引数までを一度に指定できる。

次の例は、最初の引数から 2 番目の引数以降、最後の引数までを引いた後、その結果を返す例である。

function sub() {
    var firstNum = arguments[0];                  // 最初の引数から
    for(var i = 0; i < arguments.length-1; i++) { // 2 番目から最後の引数までを
        firstNum -= arguments[i+1];               // 引く。
    }
    return firstNum;
}
sub(10, 2, 3);    // 10 - 2 - 3 = 5
sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4

しかし、残余パラメーターを利用すると sub() 関数をより直感的に定義できる。

// 最初の引数を変数 firstNum に保存し、残りの引数は配列 restArgs に保存する。
function sub(firstNum, ...restArgs) {
    for(var i = 0; i < restArgs.length; i++) {
        firstNum -= restArgs[i];
    }
    return firstNum;
}
sub(10, 2, 3);    // 10 - 2 - 3 = 5
sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4

残余パラメーターは Internet Explorer、Safari ではサポートされない。

Web ブラウザー互換性

JavaScript のデフォルトパラメーターと残余パラメーターをサポートする主要 Web ブラウザーのバージョンは次のとおりである。

パラメーター ie edge chrome firefox safari opera
default parameter サポートなし サポートなし 49 15.0 サポートなし サポートなし
rest parameter サポートなし サポートあり 47 15.0 サポートなし 34