javascript コールバック（callback）関数を利用する

2020.08.20
javascript
javascript

javascriptでコールバック（callback）関数の簡単な使い方とサンプルコードを記述してます。

1. 環境
2. コールバック（callback）関数使い方

環境

OS windows10 pro 64bit
Apache 2.4.43

※windows10にApacheのインストールはこちら

コールバック（callback）関数使い方

一番簡単な使い方は、以下となります。

//fooを関数を引数とする
function hoge(func){
  console.log('hello');
  //foo関数を実行
  func();  
}
//foo関数を定義
var foo = function(){
  console.log('world');
}

//hoge関数にコールバック関数fooを引数として渡して実行
hoge(foo);

//fooを関数を引数とする

function hoge(func){

console.log('hello');

//foo関数を実行

func();

}

//foo関数を定義

var foo = function(){

console.log('world');

}

//hoge関数にコールバック関数fooを引数として渡して実行

hoge(foo);

実行結果

コールバックのメリットは、順番に実行されない非同期なjavascriptで、意図した順番でプログラムを実行できる点にあります。

setTimeoutもコールバックを利用して、
1秒経過　→　処理を実行
と順番にプログラムを実行しています。

setTimeout(function() {
  console.log('hello world');
}, 1000);

setTimeout(function() {

console.log('hello world');

}, 1000);

また、コールバックを利用するとコードの保守性がよくなることも利点の1つです。

以下のコードでは、新しい関数を作成して引数に指定すれば「hoge関数」を
変更することなく実行結果を変更することが可能になります。

// 既存の関数
function hello(){
  console.log('hello');
}
// 既存の関数
function world(){
  console.log('world');
}
// 新しい関数を作成
function add(){
  console.log('add');
}

// hogeを変更することなく関数を指定すれば実行結果を変更できる
function hoge(foo){
  foo();
}
// 新しく作成した関数を実行
hoge(add);