Zenn
🐡

JavaScriptを学ぶ ~コールバック関数(＋高階関数)編~

2021/08/18に公開
JavaScript
#
コールバック関数
#
高階関数
tech

コールバック関数
何となく使ってしまっている。読めるけど自分では使わない。そもそも理解できない。
結構難敵と知られるコールバック関数。
私自身しっかり理解できてるか怪しいのでこちらでまとめておきたいと思います。

そもそもコールバック関数とは？

コールバック関数とセットとなるものとして、高階関数というモノがあります。

高階関数とは引数や戻り値が関数である関数の事だそうです。

その高階関数の引数にあたる関数がコールバック関数と呼ばれます。

早速コードで確認してみましょう。

const hello = (callback) => {
  console.log("hello");
  callback();
};

const getName = () => {
  console.log("Taro");
};

hello(getName);
  • helloが高階関数
  • helloの引数で渡されている引数callbackがコールバック関数というわけです。

この場合、getNameがコールバック関数として渡されてhelloが実行されるので
出力結果は
//hello
//Taroとなります。

良く分からないと思うかもしれませんが、一つ一つを分けて考えると理解しやすいです。

  1. 高階関数helloは"hello"を出力してからコールバック関数を実行する関数。
  2. getName関数は"Taro"を出力する関数。
    つまりよく知ってる関数なのです。

もう少し具体的な例で書いてみましょう。

// コールバック関数を受け取り'bye'を追加して出力する高階関数
const bye = (callback, lastName) => {
  console.log('bye' + callback(lastName));
};

// 即時関数 引数を'Tanaka'と結合して出力する無名関数に'Taro'を渡して実行している。
// 下のbye()の中で使用している無名関数とほぼ同等の関数の実行を確認する為に使用。
((name) => console.log('Tanaka' + name))('Taro'); 

// callback関数にnameを引数として'Tanaka'と結合して値を返す無名関数
// 第２引数(lastName)に'Taro'を渡す
bye((name) => {
  return 'Tanaka' + name;
}, 'Taro');

//出力結果
TanakaTaro
byeTanakaTaro

こちらは何か処理を追加するために高階関数を使用しています。

もう一つ。

// 2つの引数をコールバック関数で処理して出力する高階関数
const doSomeThing = (num1, num2, callback) => {
  const result = '結果:'callback(num1, num2);
  console.log(result);
};

// 引数を2つ受け取りかけ合わせる関数
const multiply = (a, b) => {
  return a * b;
};

// 引数を２つ受け取り足し合わせる感関数
const plus = (a, b) => {
  return a + b;
};

doSomeThing(2, 3, multiply);
doSomeThing(5, 19, plus);

//出力結果
結果:6
結果:24

こちらではdoSomeThingという高階関数には手を加えずにコールバック関数自体を変えることで処理の仕方を変えることができています。

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

  • 使いまわしが効くようになる
  • 一部分を変えるだけで済む
  • 保守性・メンテナンス性が高まる

メリットに関しては実際使ってみて、もっとコードの記述が増えたり、処理が複雑になった時に威力を発揮すると思います。
なので、
こちらの記事に関してはこれからも追記してより良いものにしていこうかと思います。

Discussion