はじめに
本記事は 「JavaScriptのコードで時々出てくるコールバック関数って何？」、「名前だけ知ってるけど何やってるかよくわからない」、などと感じている方向けのものとなっています。
自分が実際にJavaScriptのコードを読んでいて混乱したところなどについて書いているので、参考になれば幸いです。
コールバック関数とは
簡単に言うと、「他の関数に渡されて、あとで呼び出される関数」 のこと。
callback() という特別な関数があるわけではないので注意。
変数として渡される関数をコールバック関数と呼ぶ。
function sayHello() {
console.log("こんにちは");
}
function callFunction(callback) {
callback();
}
callFunction(sayHello);
上のコード例だと、
-
function sayHello()：通常の関数 -
function callFunction(func)：コールバック関数を呼び出すための関数 -
callFunctionの中で呼び出されているfunc()：コールバック関数
という感じになっている。
これだけでは良くわからないので、実際にcallFunction(sayHello)で実行されるプログラムをたどってみる。
1. callFunction(callback)が実行される
callFunctionが呼び出され、関数sayHelloが引数として渡される。
⇒この関数sayHelloが今回のコードではコールバック関数となっている。
2. callback()が実行される
callback()が呼び出される。この時、引数として渡されているのは関数sayHelloなので、関数sayHelloが実行される。
3. プログラム終了
コンソールに 「こんにちは」 が出力され、上のプログラムは終了する。
こうするとだいぶ分かりやすくなる。
例のコードは非常に単純なためあまり混乱しないが、次に紹介するアロー関数と同時に使用される事が多く、そうなると結構混乱しやすい。
アロー関数とは
コードを短く書くための記法。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のコードで頻出のコールバック関数とアロー関数について解説しました。
最初は理解するのに手間取る方かもしれませんが、コードを何度か見るうちに自然と慣れてきます。
ぜひ実際にコードを書いて試してみてください。