【JavaScript】コールバック（callback）関数とは何か？

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

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

コールバック関数とは？

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

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

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

// 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.

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

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