JavaScript コールバック関数の使用例

コールバック関数とは

関数の引数に関数を渡すことで実現されます。
呼び出し先で実行してもらう関数と考えてください。
コールバック関数を使うことで、ある処理が終わったら次の処理を実行、次の処理が終わったらその次といった具合に
処理を連続して記述していくことができます。
※多用すると可読性が悪くなる(=コールバック地獄)ので注意が必要です。

mapを使用した実装例

const array = [1,2,3,4,5];

//引数の数値を2乗する関数
const squareNumber = (number) => number * number;

//mapメソッドを使ってsquareNumber関数（ここではコールバック関数)を呼びます
const new_array = array.map(squareNumber);
//これは以下と同じ動きです
array.map((number) => number * number);

console.log(new_array);　// => [1,4,9,16,25]

mapを使い配列の要素を1つずつ取り出し、取り出した要素をsquareNumber関数の引数にして関数を実行しています。

コールバック関数の応用

コールバック関数をうまく利用して、処理の内容・順番を柔軟に変化させることができます。

//例) 
//下記の２つの関数があります
//底を指数で累乗する関数
const baseExponent = (base, exponent) => Math.pow(base, exponent);
//絶対値を返す関数
const absoluteDifference = (num1, num2) => Math.abs(num1 - num2);

//通常はbaseExponent(2,10)のように数値を引数として関数にわたしますが、
//引数にわたす数値だけが先に決まっているとします。
//処理をつなぎ、数値を引数として受け取り、後からコールバック関数を受け取って
//コールバック関数を実行する関数をつくってみます。
const sampleFunc = (...args) => func => func(...args);
//上記関数に先に数値を引数としてわたします。
const numberAppliedFunc = sampleFunc(2,10);

//後から柔軟に関数を適用させることができます。
console.log(numberAppliedFunc(baseExponent)); // =>　1024
console.log(numberAppliedFunc(absoluteDifference)); // => 8