JavaScriptのコールバック関数

JavaScriptのコールバック関数についてのメモです。

コールバック関数とは、ある関数の引数に渡される関数のことです。
Java Scriptはソースコードを上から順番に実行してくれる訳ではありません。
意図した順番に処理を実行するために使われるのがコールバック関数です。

コードは全てプレイグラウンドで実行できますので、試してみてください。

コールバック関数を使わない場合

hello,byeの順番に出力したいのですが、
次のようなソースコードだとbye=>helloの順に出力されてしまいます。

//1秒待ってhelloと出力する関数の定義
function hello() {
   setTimeout(() => {
      console.log('hello')
   }, 1000);
}
//byeと出力する関数の定義
function bye(){
  console.log('bye');
}
//処理の実行
aisatsu();
function aisatsu() {
   hello();
   bye();
}

出力結果

bye
hello

コールバック関数を使った場合

では、hello=>byeの順番に出力するためにコールバック関数を使ってみましょう。
byeの関数をhelloのコールバック関数として渡しています。

byeの関数の書き方も変わってますね。byeの関数をそのまま渡すのではなく、一度変数に入れるようにしました。
アロー関数の書き方については、こちらを見てみてください。

//1秒待ってhelloと出力する関数の定義
//コールバック関数でbyeを渡す
function hello(callback) {
   setTimeout(() => {
      console.log('hello');
      callback(); //ここでコールバック関数のbyeを実行
   }, 1000);
}

//byeと出力する関数の定義を変数byeに入れる
const bye = () =>
  console.log('bye');
  
//処理の実行
hello(bye);

出力結果

hello
bye

hello、byeの順番で出力できましたね。

(参考)setTimeout関数　

次の場合は1秒後に処理が実行されます。

setTimeout(() => {
   //処理
}, 1000);