KT MEDIA

コールバック関数とは？

コールバック関数とセットとなるものとして、高階関数というものがあります。
高階関数とは引数や戻り値が関数である関数。
その高階関数の引数にあたる関数がコールバック関数と呼ばれます。

簡単な例を以下に示します

//Taroに挨拶をする関数
const hello = (callback) => {//引数にcallback関数を指定
  console.log('hello ' + callback());// 関数内でcallback関数を実行
}

//callback関数
const getName = () => {
  return 'Taro';
}

hello(getName);// hello Taro

// 直接、無名関数を代入することも
hello(() => {
    return 'Taro';
  }
)

• helloが高階関数
• helloの引数に渡されるgetNameがコールバック関数になります。

この場合、getNameがコールバック関数として渡されてhelloが実行されます。

もう一つ例として、二つの値の四則演算にコールバック関数を利用してみます。

//四則演算
const doSomething = (a, b, callback) => {//引数にa, b, callbackを指定
  const result = callback(a, b); // callback関数の引数にa, bを指定
  console.log(result);
}

const addition = (a, b) => {// 足し算
  return a + b;
}
const subtraction = (a, b) => {// 引き算
  return a - b;
}
const multiply = (a, b) => {// 掛け算
  return a * b;
}
const division = (a, b) => {// 割り算
  return a / b;
}

doSomething(5, 5, addition)// => 10
doSomething(5, 5, subtraction)// => 0
doSomething(5, 5, multiply)// => 25
doSomething(5, 5, division)// => 1

こちらではdoSomeThingという高階関数の状態を保持したまま、コールバック関数を変えることで処理を変更することができます。

高階関数・コールバック関数のメリット

• 記述量が減る
• 保守性・メンテナンス性が高まる

もっとコードの記述が増えたり、処理が複雑になった時にさらに威力を発揮すると思いますので、実際に使いながら気づいた点など追記してより良いものにしていこうかと思います。