JavaScript 高階関数でforEachしてみる

どうもかわうそです！

今日は『JavaScript 高階関数でforEachしてみる』を実践してみたいと思います！

Contents

JavaScript 高階関数とは
JavaScript 簡単な高階関数のサンプル
高階関数 forEachを作ってみる
JavaScript 高階関数のメリット

JavaScript 高階関数とは

高階関数とは、『引数や戻り値に関数を使用する関数』です。

これだけだとなんのこっちゃ分からないので、簡単なサンプルを作ってみましょう！

JavaScript 簡単な高階関数のサンプル

//高階関数
function kawauso(val,callback){
    callback(val);
}
//コールバック関数
function sample(val){
  console.log(val);
}
kawauso(1,sample) //結果　1

//高階関数

function kawauso(val,callback){

callback(val);

}

//コールバック関数

function sample(val){

console.log(val);

}

kawauso(1,sample) //結果　1

シンプルですが、これだけです！

高階関数　kawauso

引数にvalとcallbackを持ちます。

kawauso内で、callbackは関数を受け取り、valを引数とし、実行します。

つまり、『引数や戻り値に関数を使用する関数』となります。

コールバック関数　sample

引数にvalを持ち、console.log( val )を実行します。

後にkawauso内で実行されるので、コールバック関数になります。

高階関数実行　 kawauso( 1 , sample)

val = 1 , callback = sample として、実行しています。

ここでsampleはfunction名です。つまり、格納されているのは関数、データ型が関数ですね。

これによってkawausoは

kawauso ( 1 , sample) {
  sample(1); 
}

kawauso ( 1 , sample) {

sample(1);

}

に変身。

console.log(1);

1	console.log(1);

が実行されます。

高階関数 forEachを作ってみる

自作forEach

function eachSample( data , callback ){
  for (var index in data ) {
     callback( data[index] , index );
  }
}
function kawauso ( value , index ){
   console.log(value+":"+index);
}

eachSample( ["a","b","c"] , kawauso );
//結果　a:0 b:1 c:2

function eachSample( data , callback ){

for (var index in data ) {

callback( data[index] , index );

}

function kawauso ( value , index ){

console.log(value+":"+index);

}

eachSample( ["a","b","c"] , kawauso );

//結果　a:0 b:1 c:2

[alert title=”注意”]indexが欲しかったので、for in を使用しています[/alert]

通常のforEach

var array = ["a","b","c"];
array.forEach(function( value , index ){
console.log(value+":"+index)
});
// //結果　a:0 b:1 c:2

var array = ["a","b","c"];

array.forEach(function( value , index ){

console.log(value+":"+index)

});

// //結果　a:0 b:1 c:2

JavaScript 高階関数のメリット

コールバックする関数を自由に設定、調整できるのがメリットですね。

例えば、

function eachSample( data , callback ){
  for (var index in data ) {
     callback( data[index] , index );
  }
}
var result = 0;
function kawauso2 ( value , index ){
   result += value*5;
}

eachSample( [1,2,3] , kawauso2 );
//結果　30