JavaScript　#5　コールバック関数

2020年10月31日2020年12月13日

前回は、関数の基本に関してまとめていきましたが、JavaScriptにはいろいろな関数がありますので、もう少しまとめていきたいと思います。

コールバック関数

コールバック関数とは、関数に関数を渡すことができます。
これだけだと全く言っていることがわからないですよね。以下に例を書いてみました。
まず、goCallbackという関数を定義してみました。goCallback関数は引数に変数callbackを呼び出し元から受け取り、受け取った引数callbackの内容を関数として実行するような関数です。Callback()の「()」は関数として実行させるものです。
以下の例の「goCallback(HelloWorld);」はgoCallback関数実行時の引数に「HelloWorld」関数を渡します。"をつけていないので文字列としては値を渡していません。以下３行目のgoCallbackの実行結果を見てみると「変数Callbackにはfunction HelloWorld() {console.log('Hello World!’);}が入ってます。これを実行します。」と表示されます。関数の定義内容をまるっと渡しているのがわかります。４行目で「callback()」で受け取った関数の定義内容を実行しています。

// 関数を呼び出す関数
function goCallback(callback) {
  console.log('変数callbackには' + callback + 'が入ってます。これを実行します。');
  callback(); 
}

// コンソールにHelloWorldを出力するだけの関数
function HelloWorld() {
  console.log('Hello World!');
}

// コールバック関数を実行する
goCallback(HelloWorld);

ちなみに、関数に関数を渡して実行させるので、もちろん以下もできます。goCallback関数に「helloWorld」を渡せば、helloWorld関数を実行しますし、「goodbyWorld」を渡せばgoobyWorld関数を実行します。

// 関数を呼び出す関数
function goCallback(callback) {
  console.log('変数Callbackには'+callback+'が入ってます。これを実行します。');
  callback(); 
}

// コンソールにHelloWorldを出力するだけの関数
function HelloWorld() {
  console.log('Hello World!');
}

// コンソールにGoodbyWorldを出力するだけの関数
function GoodbyWorld() {
  console.log('Goodby World!');
}

// コールバック関数を実行する
goCallback(HelloWorld);
goCallback(GoodbyWorld);

仕事（helloWorld関数）を相手（goCallback関数）にこれやっといてと言って丸投げしているような感じです。自分でやればいいじゃんという気もしますが、何に使うのかもう少し勉強していきたいと思います。