javascript コールバック(callback)関数を利用する
- 2020.08.20
- javascript
- javascript

javascriptでコールバック(callback)関数の簡単な使い方とサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
※windows10にApacheのインストールはこちら
コールバック(callback)関数使い方
一番簡単な使い方は、以下となります。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//fooを関数を引数とする function hoge(func){ console.log('hello'); //foo関数を実行 func(); } //foo関数を定義 var foo = function(){ console.log('world'); } //hoge関数にコールバック関数fooを引数として渡して実行 hoge(foo); |
実行結果

コールバックのメリットは、順番に実行されない非同期なjavascriptで、意図した順番でプログラムを実行できる点にあります。
setTimeoutもコールバックを利用して、
1秒経過 → 処理を実行
と順番にプログラムを実行しています。
1 2 3 |
setTimeout(function() { console.log('hello world'); }, 1000); |
また、コールバックを利用するとコードの保守性がよくなることも利点の1つです。
以下のコードでは、新しい関数を作成して引数に指定すれば「hoge関数」を
変更することなく実行結果を変更することが可能になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 既存の関数 function hello(){ console.log('hello'); } // 既存の関数 function world(){ console.log('world'); } // 新しい関数を作成 function add(){ console.log('add'); } // hogeを変更することなく関数を指定すれば実行結果を変更できる function hoge(foo){ foo(); } // 新しく作成した関数を実行 hoge(add); |
-
前の記事
docker composeでnetboxをインストールする手順 2020.08.19
-
次の記事
Nuxt.js ライブラリ「vue-toggles」をインストールしてlightbox galleryを実装する 2020.08.20
コメントを書く