コアJavaScript(ECMAScript)の図書室 29冊目【JavaScript】[ECMAScript] 高階関数

トップページ
特集PC技術
コアJavaScript(ECMAScript)の図書室
29冊目【JavaScript】[ECMAScript] 高階関数

コアJavaScript(ECMAScript)の図書室

29冊目【JavaScript】[ECMAScript] 高階関数

関数はデータ型のひとつです。そのため、関数の引数として又は関数の戻り値として扱うことができます。
この関数を引数、戻り値として扱う関数のことを高階関数(こうかいかんすう)といいます。
高階関数の利点は、大枠の機能を定義して詳細な機能を自由に作成することができることにあります。
他にも様々な場面において応用されている技術なため理解しておくべきでしょう。

[1] 引数に関数を渡す

全く意味がないですが、関数の引数に関数を使用したサンプルを説明します。
出力するデータと、出力方法の関数を渡した例を見てください。
よいサンプルではありませんが

// 高階関数
function high_order_function(data, process){
	process(data);
}

// 出力方法1
function output(data){
	document.writeln(data);
}

// 出力方法2
function output2(data){
	var i = 0;
	for(i = 0; i <= data.length; i++){
		document.writeln(data.charAt(i));
	}
}

var data = "ほぷしぃ";

// 高階関数を実行
high_order_function(data, output);
high_order_function(data, output2);

１回目の「high_order_function」では、そのままのデータを出力しています。
２回目の「high_order_function」では、１文字ずつデータを出力しています。
構造はそのままで、実行方法を引数として渡しています。
上記では定義した関数を引数として渡していますが、無名関数を使うと以下のように書き換えられます

// 高階関数
function high_order_function(data, process){
	process(data);
}

var data = "ほぷしぃ";

// 高階関数を実行
high_order_function(
	data,
	function output(data){
		document.writeln(data);
	}
);

この方法は、ソースコードに余計な関数を定義しなくてもよいという利点があります。
その場限りで必要な関数の場合には効力を発揮します。
また、実行内容が高階関数の近くに記述されるのでコードの読みやすさが向上します。

[2] 関数を戻り値とする

続いて関数を戻り値として定義した関数を説明します。
この関数を戻り値とする方法は特に重要になります。
ここでは、戻り値に関数が指定できることだけは理解しておくとよいです。

// 関数を戻り値と定義した関数
function high_order_function(){

	return function(){
		return "PC特集技術";
	}

}

// 関数を戻り値とした場合は一度変数に代入して実行する
var test_func = high_order_function();
document.writeln(test_func());

// 変数に代入したくないときはこのように書く
document.writeln(high_order_function()());