以下の記事で関数の超基礎知識のみにふれましたが、そこで触れられなかった内容を本記事では解説します。本記事ではコールバック関数に焦点をあてて解説してゆきます。

コールバック関数

関数の引数として渡し、その処理の中で実行してもらう関数のことをコールバック関数と呼びます。

// コールバック関数（渡される関数）を定義
function f(name) {
  console.log('My name is ' + name);
}

// 関数を受け取る関数
function g(func) {
  func('Taro');
  func('Jiro');
}

g(f);
// My name is Taro
// My name is Jiro

コールバック関数は以下のことを押さえておくと良いと思います。

関数を受け取る関数と渡される関数の２つを定義する
関数を受け取る関数を実行する。実引数にコールバック関数を与える
コールバック関数は関数を受け取る関数内で実行される。

またコールバック関数として無名関数も渡せます

// 無名関数を定義
const f = function (name) {
  console.log('My name is ' + name);
}

// 関数を受け取る関数
function g(func) {
  func('Taro');
  func('Jiro');
}

g(f);
// My name is Taro
// My name is Jiro

関数を呼び出す際に無名関数を直接引数に入れることも出来ます。

// 関数を受け取る関数
function g(func) {
  func('Taro');
  func('Jiro');
}

g(function (name) {
  console.log('My name is ' + name);
});
// My name is Taro
// My name is Jiro

コールバック関数の使用例

setTimeout関数

コールバック関数の使用例として真っ先に登場するのがsetTimeout関数です。

このsetTimeout関数は関数を受け取る関数ですが、JavaScript に組み込まれているので定義する必要はありません。
第一引数にコールバック関数、第二引数にミリ秒単位で秒数を指定して実行すればOKです。

指定した時間がたつと、コールバック関数が実行されるというものです。

function hello () {
  console.log('こんにちは');
}

setTimeout(hello, 3000); // 3秒後に出力
// "こんにちは"

とりあえず setTimeout の使用方法はこれだけです。後述する非同期処理でも登場するのでひとまず頭にとどめておいて頂きたいと思います。

addEventListener関数

こちらも JavaScript に組み込まれている関数で、関数を受け取る関数です。以下のように記載します。

<input type="button" value="button" id="xxx">

<script>
    function butotnClick(){
        console.log('Hello');
    }

    let button = document.getElementById('xxx');
    button.addEventListener('click', butotnClick);
</script>

button.addEventListener('click', butotnClick); の部分に示す通り、
第１引数にイベントの種類、第２引数にコールバック関数を指定します。
※イベントに対して登録した関数のことを特にイベントリスナーまたはイベントハンドラと呼びます。

非同期処理

コールバック関数は主に非同期処理で使われます。
非同期処理というのはすでに挙げた setTimeout や addeventListene を使った処理です。

基本的にプログラムは書いた順に動きますが、非同期処理はその限りではありません。

下の setTimeout を例にすると A → C → B の順に実行されます。

console.log( 'A' );
setTimeout(() => console.log( 'B' ), 5000);
console.log( 'C' );

ではどうすればいいかというと、「終わったら実行したい処理」をコールバック関数として渡してしまえばいいのです。

addEventListener はまさにその例で、クリックイベントが実行された（終わった）あとにコールバック関数が実行されます。

XXX.addEventListener('click', コールバック関数);

あと似たようなコールバックを利用した例は node.js でもありますね。
createServer というメソッドですが、こちらも指定のポート番号（ソースは省略していますが）にリクエストがあると、コールバック関数が実行されます。
実行時には、次の情報・変数が引数として渡されます。

req → 誰がどのような要求を送ってきたか
res →その要求を判定し内容を設定するための変数

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
  res.end('Hello World\n');
});

res の方に情報がセットされ、レスポンスを送信するという流れです。

以上、コールバック関数の基礎知識でした。コールバック関数を渡される関数の方は JavaScript 側で組み込まれているものが多いですが、冒頭で記載した通り、関数を受け取る関数と渡される関数の２つをセットで覚えておくと良いと思います。