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

作成日 2020.08.20
更新日 2022.06.06
javascript
javascript

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

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

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.63

Javascript サンプル集はこちら

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

一番簡単な使い方は、以下のようになります。

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

function hoge(func){
  console.log('hello');
  //foo関数を実行
  func();  
}

//foo関数を定義

let foo = function(){
  console.log('world');
}

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

hoge(foo);

実行結果

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

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

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);

実行結果