とあるJavaScriptの情報図書【JavaScript】[ECMAScript] 関数の引数

トップページ
特集PC技術
とあるJavaScriptの情報図書
【JavaScript】[ECMAScript] 関数の引数

とあるJavaScriptの情報図書

【JavaScript】[ECMAScript] 関数の引数

ここでは、関数の引数について説明をします。
引数(ひきすう)とは、関数を実行する際に渡す値のことです。
関数の引数で、気をつけておく点がいくつかあります。

[1] 引数のデータ型をチェックしない

JavaScriptの関数の引数に定義したデータ型はチェックされません。
よって、どのような値を渡してもエラーとなりません。
そのため、特定のデータ型のときだけ実行させたい場合には開発者自身の手で作成する必要があります。


// ２つの値を合計する関数を作成した
function sum(num1, num2){
	return num1+num2;
}

// 数値同士を渡してみた
document.writeln(sum(10,30));

// 文字列同士を渡してみても問題ない
document.writeln(sum("特集PC","技術"));

[2] 引数の個数をチェックしない

データ型のチェックをしなかったように引数の個数もチェックしません。


function sum(num1, num2){
	return num1+num2;
}

// 引数の数があっていない場合
document.writeln(sum());
document.writeln(sum(30));

// 引数の数が多いけど30が返ってくる。ところで30はどこへ?
document.writeln(sum(10,20,30));

定義されている引数の個数と合わない場合には、「undefined」と判断されます
では逆に定義されている引数より多かった場合には消えてしまったわけではありません。

function sum(num1, num2){
	document.writeln("num1="+num1);	// 10
	document.writeln("num2="+num2);	// 20

	document.writeln("arguments[0]="+arguments[0]);	// 10
	document.writeln("arguments[1]="+arguments[1]);	// 20
	document.writeln("arguments[2]="+arguments[2]);	// 30

}

// 引数の数が多いときは
sum(10,20,30);

関数の内部にはargumentsオブジェクトという特殊はオブジェクトがあります。
実際にはここに格納されているのです。
実行結果をみていただければわかると思いますが、num1とarguments[0]は同じ値です。
つまり引数の定義した順番にargumentsへ格納しているのです。
argumentsは他にも機能がありますので別途説明します。

[3] 基本型と参照型で動作が異なる

引数として渡すデータ型によって動作が変わります。
基本型の場合は関数内でデータを変更しても元に戻りますが、参照型の場合はデータが変更されます。
参照型データはデータが格納されているアドレスを引数として渡すので値が書き換えられます。
基本型データはデータそのものを渡すので書き換えられても影響がありません。

var number = 100;
var array = [1,2,4,6];

// 基本型データを変更してみる
function sum(number){
	number = 20
	return number *2;
}

// 参照型データを変更してみる
function data_insert(array){
	array[0] = 20;
	array[1] = 25;
	return array;
}

// 基本型の場合
document.writeln(number);
document.writeln(sum(number));
document.writeln(number);

// 参照型の場合
document.writeln(array);
document.writeln(data_insert(array));
document.writeln(array);

[4] 名前つきの引数

名前つき引数は、匿名オブジェクトを渡す方法です。
これを使用することに、引数の順番や、引数の省略等に対応することができます。

function output_test(str){
	document.writeln(str.data1);
	document.writeln(str.data2);
}

// 引数の意味が見やすい
output_test({data1:10,data2:20});

// 引数の省略がしやすくなる
output_test({data2:"特集PC技術"});

// 引数の順番が違っても問題ない
output_test({data2:"ほぷしぃ", data1:"特集PC技術"});