関数のパラメータ

 JavaScriptでは関数に渡すパラメータを指定することができます。関数に渡されるパラメータはカンマで区切って複数列記することができます。例えば以下のようにcalc(2,6)とすると関数側には数値の2と6の2つが渡されます。(サンプル01を実行する)

function calc(a,b){
return a+b;
}
document.write(calc(2, 6));

関数側では関数名の()内に変数名を書きます。上記サンプルだと変数aと変数bに渡された数値が入ります。受け取るデータは関数を呼び出す側で指定されたパラメータ順になります。この場合だと変数aには2が、変数bには6が入ることになります。

上記の例は最も多く利用されている記述パターンです。JavaScriptに限らずC言語やJavaなどもほぼ同様です。スクリプト言語ではない一般的なプログラミング言語の場合、関数に渡される/受け取るパラメータは固定されているか、いくつかのパターンを指定します。これに対してJavaScriptでは、どんな型のパラメータを受け取らなければならない、指定された数のパラメータでなければならない、という制限はありません。
JavaScriptでは無制限にパラメータを受け取って処理することができます。これを可能にしているのがarguments配列です。arguments配列にはパラメータが順番に入ります。先ほどのスクリプトをarguments配列を使ったものに書き直すと以下のようになります。(サンプル02を実行する)

function calc(){
return arguments[0]+arguments[1];
}
document.write(calc(2, 6));

arguments[0]には数値の2、arguments[1]には数値の6が入ります。これにより2+6が計算され8を返すことになります。argumentsを使えば余計な変数を使わなくても済むという、ちょっとしたメリットもあります(これは、あまり役に立つ事はないでしょうけど)。
関数に不特定多数のパラメータが渡される場合とパラメータの型が決まっていない、どんなパラメータが渡されるか全く分からない場合にargumentsは威力を発揮します。

まず、パラメータが不特定多数の場合のサンプルを見てみます。以下のサンプルは関数に渡された数を全て加算して返すものです。(サンプル03を実行する)

function calc(){
var n = 0;
for (var i=0; i<arguments.length; i++) {
n += arguments[i];
}
return n;
}
document.write(calc(7,11,4)+"<br>");
document.write(calc(1,2,3,4,5,6,7,8,9,10)+"<br>");

argumentsは配列なのでarguments.lengthとすると数が分かります。これが、そのまま受け取ったデータの数になります。全て加算するにはarguments.lengthの数だけ繰り返せばよいことになります。argumentsは配列なのでforを使って順番にデータを変数に加算していきます。

今度は型が不明でなおかつ順番も決定されていない場合を見てみましょう。渡されたパラメータが数値の場合のみ合計を返すようにします。渡されたデータの数だけ繰り返すのは上記サンプルと同じです。しかし、数値かどうかを調べなければ期待通りの動作にはなりません。データの型を調べるにはtypeof()を使います。数値であればnumberが返されるので、number文字列の場合のみ加算していけばよいことになります。(サンプル04を実行する)

function calc(){
var n = 0;
for (var i=0; i<arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
n += arguments[i];
}
}
return n;
}
document.write(calc("セブン",7,"イレブン",11)+"<br>");
document.write(calc(1,2,3,"数値だけ",4,"加算","されます")+"<br>");

argumentsにより数に制限なくパラメータの処理ができるのは便利ですが、ライブラリなどを作成する場合には不便な面もあります。例えば表示する画像のID名とURLは指定したいが、width、height属性の値は任意(オプション)としたい場合などです。なおかつ、widthまたはheightのどちらか一方だけ指定することができる、という条件になると単純にパラメータとして渡すだけでは処理が面倒になってしまいます。
そのような場合には以下のようにプロパティリストの形式で渡すと処理が簡単になります。(サンプル05を実行する)

function proc(obj){
document.write(obj.x+","+obj.y);
}
proc({x:123, y:456});

このようにするとプロパティ名を指定するだけで渡されたデータを処理することができます。もちろんargumentsを使っても同様の処理を行うことができます。上記サンプルを書き換えたものが以下のサンプルです。(サンプル06を実行する)

function proc(){
document.write(arguments[0].x+","+arguments[0].y);
}
proc({x:123, y:456});

ここまでは関数側で渡されたパラメータの数に応じた処理でしたが、逆に呼び出す関数がいくつのパラメータを必要としているかを求めることができます。この場合「関数名.length」とすると関数が求めている数のパラメータ数が返されます。また、Firefoxでは関数名.arityとしても同じ結果になります。以下のサンプルでは関数側が求めているパラメータ数は7になります。(サンプル07を実行する)

function proc(a,b,c,d,e,f,g){
// none
}
alert(proc.arity);
alert(proc.length);

最終更新日:2007年1月25日

>目次に戻る