JavaScriptの常識①コールバック関数

JavaScriptの便利なところなのに、なかなか理解しにくいものにコールバック関数というのがあります。

どういうものなのか、ここにメモを置いておきます。

JavaScriptの常識というタイトルで書いてますが、おそらく私自身がわからない、忘れてるであろうことがいくつもあると思うので、一応①という番号を振っておきます。

順序が正しいかはちょっとわかりませんが、こう考えたら楽だなーというような感じで書きます。

コールバック関数とは、関数を引数にするものですから、関数は二つ定義されることになります。

まあ関数の名前は適当でいいんで、一つはTekitou、Tekitouを引数にする予定の関数を親、Oyaとでもしておきます。

  function Oya(){
    //親関数の処理
  }


  function Tekitou(){
    //適当な関数の処理
 }

で、親関数の引数にはコールバック関数が入るわけなので、callbackという関数をぶち込みます。

callback()と書いてしまうと、その場で処理されることになってしまうので、あくまで引数としてcallbackとだけ書きます。

 function Oya(callback){
    //親関数の処理
  }

そうすると、呼び込んだコールバック関数を自分の関数内で使うわけなので、それを書き込みます。

　function Oya(callback){
    //親関数の処理
    callback();
  }

コールバック関数が引数として使えるようになったので、あとは適当に定義した関数を引数に入れて実行します。

  Oya(Tekitou);

まとめるとこんな感じ。

  function Oya(callback){
    //親関数の処理
    callback();
  }


  function Tekitou(){
    //適当な関数の処理
  }


  Oya(Tekitou);

functionをアロー関数で書くと、アロー関数、つまり名前がない関数が渡され、実行も行われるので、省略できます。

「アロー関数＝渡して実行させるもの」って感じで理解しておけばいいです。

例文

function leftFist(callback) {
    console.log("左拳は死んだよ、だがな・・・");
    callback(); // ←ここで「呼び出す（＝コール）」してる
  }
  
  leftFist(() => {
    console.log("もう一つあるぜ！！");
  });

実行結果は以下の通り。

「左拳は死んだよ、だがな
・・・もう一つあるぜ！！」

一応分解して書いておくと、

() => {
    console.log("もう一つあるぜ！！");
  }

これがleftFistの引数であり、コールバック関数です。

const anotherOne = () => {
    console.log("もう一つあるぜ！！");
  }

と定義しておけば

leftFist(anotherOne);

で呼び出せてわかりやすいかと思います。

html-css-javascript.hatenadiary.com

まあコールバック関数に関してはこんな感じでいいかと思います。

わかりやすいように身近なもので説明、とかしたら多分さらにわからなくなるかもしれないので。