はじめに

本記事は 「JavaScriptのコードで時々出てくるコールバック関数って何？」、「名前だけ知ってるけど何やってるかよくわからない」、などと感じている方向けのものとなっています。

自分が実際にJavaScriptのコードを読んでいて混乱したところなどについて書いているので、参考になれば幸いです。

コールバック関数とは

簡単に言うと、「他の関数に渡されて、あとで呼び出される関数」　のこと。

callback() という特別な関数があるわけではないので注意。
変数として渡される関数をコールバック関数と呼ぶ。

function sayHello() {
    console.log("こんにちは");
}

function callFunction(callback) {
    callback();
}

callFunction(sayHello);

上のコード例だと、

という感じになっている。

これだけでは良くわからないので、実際にcallFunction(sayHello)で実行されるプログラムをたどってみる。

callFunctionが呼び出され、関数sayHelloが引数として渡される。
⇒この関数sayHelloが今回のコードではコールバック関数となっている。

callback()が呼び出される。この時、引数として渡されているのは関数sayHelloなので、関数sayHelloが実行される。

コンソールに 「こんにちは」 が出力され、上のプログラムは終了する。

こうするとだいぶ分かりやすくなる。

例のコードは非常に単純なためあまり混乱しないが、次に紹介するアロー関数と同時に使用される事が多く、そうなると結構混乱しやすい。

コードを短く書くための記法。Pythonでいう、ラムダ関数のようなもの。

通常

function add(a, b) {
  return a + b;
}

アロー関数

const add = (a, b) => {
  return a + b;
};

functionを書かずに=>を使用するのが特徴。

ここまでで紹介した2つは、同時に使用されることが非常に多い。代表例としては以下のsetTimeoutがある。

setTimeout(() => {
  console.log("3秒経ちました");
}, 3000);

ここでは() => { ... }の部分がアロー関数となっており、同時にsetTimeoutに渡されるコールバック関数にもなっている。

setTimeout(function () {
  console.log("3秒経ちました");
}, 3000);

アロー関数を使用しないで書くと上みたいな感じ。

今回はJavaScirptのコードで頻出のコールバック関数とアロー関数について解説しました。

最初は理解するのに手間取る方かもしれませんが、コードを何度か見るうちに自然と慣れてきます。

ぜひ実際にコードを書いて試してみてください。