関数はJavaScriptで繰り返し行う処理などをまとめたものを言います。 他の言語を使っている方には特に説明は必要無いかとは思いますが、 JavaScript特有の記述もあります。 関数の宣言方法の違いによって以下の２種類がありますので、それぞれについて見ていきます。
■一般的な関数の宣言(functionを使った宣言)
function キーワードを使った関数宣言の構文は以下の様になっています。 function キーワードの後に「関数名」を書いて関数の引数が在れば「引数リスト」（複数あれば「,」カンマで区切ります）を記述します。 関数内部には行いたい処理を記述し、最後に関数として戻したい値があれば return 文で戻してやります。
function 関数名( [ 引数リスト ] ) {
// 関数内の処理
...
[return [戻り値];]
}
基本的な使い方は以下のソースを見て下さい。
func1 という名前で関数を宣言しています。１から引数に与えられた数値までの合計を計算する簡単な関数です。 本来ならば、引数の値チェック（数値以外の文字列等が渡されたらどうするか）や、合計値の桁あふれなどにもチェックが必要かもしれません。
取敢えずこの関数を実行するために、関数の戻り値を変数に代入しています。 尚、戻り値を直接別の関数に渡すことも可能です。（以下では console.log への引数の値として渡されます）
//関数の宣言(引数までの合計を計算)
function func1( intPara ) {
var sum = 0;
for (var i = 1; i <= intPara; i++) {
sum = sum + i;
}
return sum;
}
//変数の宣言
var val;
//関数の実行
val = func1(10); // 変数への代入
console.log(val); // 55 と表示される
console.log(func1(100)); // 5050 と表示される
「引数」が文字列の場合を想定した関数の例を以下に示します。
//関数の宣言(引数に文字列指定)
function func2( strPara1, strPara2 ) {
var strRet = "" + strPara1 + "..." + strPara2;
return strRet;
}
//関数の実行
console.log(func2("10", "aaaa")); // 10...aaaa と表示される
関数の戻り値としてオブジェクトを指定
関数の戻り値としてオブジェクトを指定できます。以下にその例を示します。
関数としては2個の引数を持ち、それぞれをオブジェクトのプロパティの値として設定しています。 関数の実行後、戻り値をそのままコンソールに表示すれば結果はオブジェクトが戻されることが分かります。
ここで注意が必要なのですが、関数の引数としては数値でも文字列でも指定できますので オブジェクトのプロパティ値もそれぞれ設定したままが戻されます。
//関数の宣言(戻り値がオブジェクトの場合)
function func3( strPara1, strPara2 ) {
//オブジェクトの宣言
var obj = {
Para1: strPara1,
Para2: strPara2,
}
//オブジェクトを戻す
return obj;
}
//関数の実行(変数の宣言も同時に行う)
var val = func3(100, "aaaa");
console.log(val); // Object { Para1: 100, Para2: "aaaa" } と表示される
console.log(val.Para1); // 100 と数値として表示される
console.log(val.Para2); // aaaa と文字列として表示される
val = func3("100", "aaaa");
console.log(val); // Object { Para1: "100", Para2: "aaaa" } と表示される
console.log(val.Para1); // 100 と文字列として表示される
console.log(val.Para2); // aaaa と文字列として表示される
上の例でもありますが、引数の型等をどの様に定義するかは関数を作る前によく考えておく必要があります。
関数の引数としてオブジェクトを指定
引数にArrayやユーザ定義のオブジェクトを指定できますが、 関数内でそのオブジェクトのプロパティを変更すると、関数の呼出元にも反映されるため注意が必要です。 以下にその例を示します。
//関数の宣言(引数がオブジェクトの場合)
function func4( objPara ) {
//プロパティを変更
objPara.prop1 = "000";
}
//オブジェクトの宣言
var obj = { prop1: "1234" , prop2: "abc" };
console.log(obj); // Object { prop1: "1234", prop2: "abc" } と表示される
//関数の呼出
func4( obj );
console.log(obj); // Object { prop1: "000", prop2: "abc" } と表示される
//-----
//関数の宣言(引数がArrayの場合)
function func5( arr ) {
//配列の内容を変更
arr[1] = "111";
}
//Arrayの宣言
var arr = new Array("aaa", "bbbb", "123");
console.log(arr); // Array(3) [ "aaa", "bbbb", "123" ] と表示される
//関数の呼出
func5( arr );
console.log(arr); // Array(3) [ "aaa", "111", "123" ] と表示される
引数にオブジェクト、及びArrayの場合を例にしましたが、関数内でのプロパティの変更が 関数外にも影響していることが分かります。
■関数式（関数リテラル）による宣言
今までは function キーワードを使った構文としての関数宣言でしたが、 関数式として宣言することができます。
//関数式による関数の宣言
var test = function (strPara) {
//引数の前後に括弧（[]）を付加して戻す
return "[" + strPara + "]";
}; //ここで文の最後であるセミコロン「;」を記述（無くてもOKですが）
//関数の実行
var str = test("12345");
console.log(str); // [12345] と表示される
//ちなみに「test」を表示する
console.log(test); // function test()... と表示される
上の例からもわかりますが var test と変数 test を宣言しているようですが、 test の実体は関数として存在しますので、これを関数の様に呼出すことができます。
ただし関数式は名前をつけることもでき、関数内で自身を参照することができます。 以下の例では、１から引数値までの総和を求める処理を行っています。 sum と言う名前を関数に付けて自分自身の中で再帰的に呼び出しを行い、 引数値から順次１小さい値を加算することを再帰的に行っています。
//[1～N]までの総和を求める関数を関数式で宣言
var summation = function sum(intPara) {
if (intPara <= 1) {
//１になったらそこで再帰呼出し終了
return 1;
} else {
//再帰呼出しで順次１小さい値を加算してゆく
return intPara + sum(intPara - 1);
}
};
//関数の実行
console.log(summation(1)); // 1 と表示される
console.log(summation(2)); // 3 と表示される
console.log(summation(3)); // 6 と表示される
console.log(summation(10)); // 55 と表示される
console.log(summation(100));// 5050 と表示される
関数式で宣言した関数オブジェクトを引数にした関数を宣言し、 それぞれの関数式での関数を呼び分ける方法を以下に記します。
//関数オブジェクトを引数にした関数宣言
function math(fn, val) {
//関数オブジェクトを実行
return fn(val);
}
//関数式による引数を２乗する関数宣言
var sqr = function(val) {
return val * val;
};
//関数式による引数を +1 する関数宣言
var inc = function(val) {
return val + 1;
};
//関数式による引数を -1 する関数宣言
var dec = function(val) {
return val - 1;
};
//関数式による引数を２倍する関数宣言
var mul2 = function(val) {
return val * 2;
};
//関数オブジェクトを変えて関数をコールする
console.log(math(sqr, 10)); // 100 と表示される
console.log(math(inc, 10)); // 11 と表示される
console.log(math(dec, 10)); // 9 と表示される
console.log(math(mul2, 10)); // 20 と表示される
コメント