コールバック関数

どんな人が学ぶべきか

for eachやmap関数などの書き方が理解できない人
上記関数は使えるがどのような理屈で動いているかわからず気持ちが悪いと感じている人

for each関数 例

function for_each() {
 let test = ["リンゴ","ゴリラ","ラッパ"];

 test.forEach(function(item){
   Logger.log(item);
 });

  /*実行結果
 リンゴ
 ゴリラ
 ラッパ
 */
 }

コールバック関数とは

引数として使用される関数

前提（認識ずれが起きやすい点）

普通の関数は値として変数に格納したり、引数に格納したりすることができる。

関数を変数として格納する例

function test_hello(){
 // あいさつするだけの関数
 function hello() {
   console.log('こんにちは');
   return "こんばんは"
 }

 //関数helloを変数funcに格納してみる。
 //hello()と（）をつけるとhello関数が実行され返り値がfunc1に格納される。
 let func1 = hello();
 console.log(func1); //こんばんは
 
 

 //()をつけないと関数自体がfunc2に格納される。
 let func2 = hello;
 console.log(func2); //[Function: hello]



 // 格納された関数は変数名＋（引数）で呼び出せる
 func2()　//こんにちは
}

関数を引数として格納する例

以下では関数twiceの引数として関数helloを格納している。

function nest_func() {
 // 引数で関数を値として受け取り（func）、（）をつけることで2回実行している。
 function twice(func) {
   func(); // 1回目！
   func(); // 2回目！
 }


 // あいさつするだけの関数
 function hello() {
   console.log('こんにちは');
 }



 // hello関数自体を引数としてtwice関数に引き渡している
 twice(hello);
 /*結果
 こんにちは
 こんにちは
 */ 

}

引数に直接関数を書いてみる（ほぼコールバック関数と見え方が同じになる）

function nest_func2() {
 function twice(func) {
   func(); // 1回目！
   func(); // 2回目！
 }


 //引数に実際に関数を渡す。
 //この時関数名の定義は必要なくなる
 twice(function () {console.log('こんにちは');}); 
 /*結果
 こんにちは
 こんにちは
 */ 

}

引数として格納する関数自体が引数を必要とする場合の書き方

map関数やfor each関数で見るコールバック関数はこの場合

function nest_func3() {
 function twice(func) {
   func('Hello'); // 1回目！
   func('World'); // 2回目！
 }


 //引数に入れた関数が引数を取る形にする
 //messageは実際に関数が実行されるtwice内で渡される
 twice(function (message) {console.log(message);});
 /*結果
 Hello
 World
 */ 

}

「引数として格納される関数」は関数twice内にて実行される。

つまり関数twice内にて渡された引数（Hello、World）をもとに「引数として格納される関数」が実行されている。

アロー関数

コールバック関数や値として関数を定義する際に毎回function(){}と書かなくてもいい書き方。

実際には書き方以外にも違いがあるらしいが難しく。for eachやmap関数を扱う中では問題にはならない。
https://qiita.com/suin/items/a44825d253d023e31e4d

nest_func3の関数をアロー関数を使用して書き換える

function nest_func3() {
 function twice(func) {
   func('Hello'); // 1回目！
   func('World'); // 2回目！
 }


 //引数に格納する際にfunctionを書かず、代わりに＝＞を書く
 twice((message)=> {console.log(message);}); //←ここが変更
 
 
 //引数が一つだったり、関数処理が一行で書ける場合は（）や｛｝も省略できる
 twice(message=> console.log(message)); //←ここが変更
 
 
 /*結果
 Hello
 World
 */ 

}

参考サイト

JavaScriptの「コールバック関数」とは一体なんなのか