【JavaScript】コールバック(callback)関数とは何か?

Pocket
LINEで送る

よくコールバック地獄とか耳にして、コードもちらっと見て、なんとなく「ネストは深くしない(関数の中で関数を書き過ぎない)」とか、可読性を高めるために気をつけたほうが良いこと。としての認識はあるものの、そもそもコールバック関数ってなんぞや?

というのが、どうしてもわからなかったので、調べました。

コールバック関数とは?

引数として渡され、関数の中で所定のタイミングで実行される関数。

わかりやすくするとこんな感じ。

20160317_02

実際に書いてみるとこのような記述になります。

// HTMLを読み込み後、実行
function hou_nyou(callback){
  document.write("たかし は おしっこ を すべて はいしゅつ した");
  callback();
}

function hou_nyou_complete(){
  document.write("<br>\(^o^)/ { ちょうかん ! ミッション コンプリートです!}");  
}

// HTMLを読み込み後、実行
window.onload = function(){
  // 引数にコールバック関数をいれて実行
  hou_nyou(hou_nyou_complete); 
}

関数の実行後にコールバック(呼び出される)関数。というイメージですね。
ですので、setTimeout()もコールバックを利用した関数になります。

setTimeout(function(){
   //ここに処理を記述
},2000)

サンプルコード

See the Pen 【JavaScript】コールバック関数について by nkmrkisk (@rekid) on CodePen.

改めて調べて見ると、たいして難しい話ではないですね。

独学なせいでちゃんとした知識を身につけられてないな。と痛感じたのと、
「あ、コールバック地獄ってそういうことか!」と知らぬ間にコールバック地獄を経験していたことを自覚しました。笑

SNSでもご購読できます。