JavaScriptのコールバック関数のサンプルです。
確認環境 ・Windows 10 ・Google Chrome |
目次
コールバック関数
- 他の関数に引数として渡され、呼び出した先の関数の中で実行される関数です。
- 一般的に非同期処理で使用されます。
- 以下は、MDNのコールバック関数のリンクです。
https://developer.mozilla.org/ja/docs/Glossary/Callback_function
コード
コールバック関数のサンプルです。
<script>
//コールバック関数
function helloWorld1(num1) {
console.log("こんにちは" + num1);
}
function test1(callback) {
const number1 = 3333;
callback(number1);
}
test1(helloWorld1); //こんにちは3333
</script>
4~6行目が、コールバック関数です。
13行目で、8行目の関数を実行します。引数として4~6行目の関数をセットしています。
8行目で引数として受け取った関数は、10行目で実行されます。
※注 これは同期処理です。一般的にコールバック関数は、非同期処理で使用されます。
非同期のコールバック関数が使用される例としては、デバイスの現在位置を取得するgetCurrentPositionメソッドがあります。
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/getCurrentPosition
無名関数を使用する
上記コードを無名関数にしたサンプルです。
<script>
//コールバック関数
//function helloWorld1(num1) {
// console.log("こんにちは" + num1);
//}
function test1(callback) {
const number1 = 3333;
callback(number1);
}
test1(function(num1){
console.log("こんにちは" + num1);
}); //こんにちは3333
</script>
4~6行目をコメントにしています。
4行目の引数num1を13行目に持ってきて、
5行目のconsole.logを14行目に持ってきています。
実行結果は同じです。
無名関数+アロー関数を使用する
上記コードを無名関数+アロー関数にしたサンプルです。
<script>
//コールバック関数
//function helloWorld1(num1) {
// console.log("こんにちは" + num1);
//}
function test1(callback) {
const number1 = 3333;
callback(number1);
}
test1((num1)=>{
console.log("こんにちは" + num1);
}); //こんにちは3333
</script>
13行目は、上記コードからアロー関数に変更しています。
実行結果は同じです。
関連の記事
JavaScript 関数のサンプル
JavaScript 再帰関数のサンプル
JavaScript 関数のデフォルト引数のサンプル
JavaScript 無名関数と即時関数のサンプル
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)