【js】コールバック関数を理解しよう①

前段

javascriptは、関数も変数に代入できる

おさらい

定義して、実装する
関数名に「()」を付けると実装する

//関数の定義と実行のおさらい
function testfunk(a,b){
  return a + b;
}

//関数の実行
console.log(testfunk(5,7));

//結果
12

無名関数を変数に代入

そう、javascriptは、関数を変数に代入できる
変数名に「()」を付けると実装する

//無名関数として変数に代入する
let testfunc = function(a,b){
          console.log(a * b);
            }

//関数の実行
testfunc(4,6);

//結果
24

つまり、()を付けると関数として実行され、()をつけないと「値」になるのだ

//無名関数として変数に代入する
let testfunc = function(a,b){
          return a * b;
            }

//関数の実行
const dataA = testfunc(4,6); //実行結果の24が代入される
const dataB = testfunc; //関数そのものが代入される

console.log(dataA);
console.log(dataB);

f:id:aruku-hito:20191224223101p:plain

このようにjavascriptは、関数を「値」として様々な部分に活用することができる!

値だから関数の引数になる

今、関数が定義された。値は関数。()をつけてしまえば実装されるのを逆手に取ると、この関数の役割は、「2回関数を実装する」こと。
つまり、引数には関数が入ることが前提。

//関数B = 高階関数
function dublefun(func){
  func();
  func();
}

次、関数の実行。当然、dublefunを実装するには、dublefun();の記述である。
勿論、()内に入れるものは、その実装する関数に渡すことができる。
つまり、()内に下記のどちらかを入れることで関数Aを別の関数Bに渡すことができる

・関数が代入された変数
・直接無名関数を記述する

この、渡されている関数Aのことを「コールバック関数」といいちなみに
関数を受け取る関数Bは「高階関数」と呼ぶ。
つまりコールバック関数とは、”別の関数に実行してもらう関数”のこと

//関数A = ()内の無名関数が、コールバック関数
dublefun(function(){
  console.log('コールバック関数だよ!');
});

f:id:aruku-hito:20191224230017p:plain


ajaxとイベントとコールバック関数についてから始める!
https://sbfl.net/blog/2019/02/08/javascript-callback-func/