JavaScriptのコールバック関数をざっくり理解したので個人的解釈をまとめてみる

コールバック関数ってなんなんだ?

JavaScriptの重要な要素として、コールバック関数なんてものが出てきます。
最初見た時は「なんかカッコいい名前だけど何者なんだコイツ…」と思いましたが、勉強していくうちにこんなもんか、となんとなく理解できてきたので超個人的な解釈を書いていきます!

コールバック関数は使いたい関数を渡すと実行してくれる便利なやつ

MDNを参照すると、以下のような説明があります。

コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。

Callback function (コールバック関数) – MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

「他の関数に引数として渡される関数」と、少しややこしい表現ですが、個人的には「引数として関数名(関数自体)を受け取り、それを実行できる」ものがコールバック関数だと理解しました。

簡単な例をもとに考えてみます。

function favoriteVegetable(food){
  console.log("私は野菜の中で、" + food + "が大好きです");
};

// コールバック関数------------ここから
function call(callback){
  let food = "なす";
  callback(food);
};
// コールバック関数------------ここまで

call(favoriteVegetable);

上記プログラムを実行すると、コンソールに以下が出力されます。

私は野菜の中で、なすが大好きです

12行目でcall関数を呼び出していますが、ここで実行したい関数名(favoriteVegetable)を渡しています。
それをcall関数側でcallbackという変数に代入し、受け取っています。
疑似的に「callback = favoriteVegetable」と考えるとイメージしやすいと思います。

そしてその後、callbackもといfavoriteVegetable関数を呼び出している、処理としてはそれだけです。
一見複雑に思えましたが、順を追ってみていくとそこまで難しいものではないですね。
というかかなり便利…
Javaとかだと、関数名を渡してそのまま実行とかできなかったはずなので…(自分が知らないだけかもですが)

上記は引数名をcallbackとしていますが、引数名は任意に決められるため、極論favoriteVegetableでもよいのかもしれませんね。

コールバック関数の具体的な使い方を少し考えてみる

コールバック関数がどんなものかを理解したところで、有効な使い方について考えてみます。
使い方としてパッと思い浮かんだのは、条件分岐処理を書くときに使えるんじゃないかなと思います。

例えば以下のようなプログラムがあったとしましょう。

// calc関数
function calc(process){
  switch(process){
    case "足し算":
      // 足し算を行う関数を呼び出し
      addition();
      break;
      
    case "引き算":
      // 引き算を行う関数を呼び出し
      subtraction();
      break;
  }
}

// 処理呼び出し
calc("足し算");

上記は電卓のプログラムです。calc関数を呼び出す際、足し算か引き算かを引数として渡し、それをswitch文で振り分けて処理を実行しています。

これをコールバック関数を使うと以下になります。

// calc関数
function calc(process){
  // 足し算、もしくは引き算を行う関数を呼び出し
  process();
}

// 処理呼び出し
calc(addition);

コードの量が減り、先ほどと比べてかなり見やすいコードになりました。
今後呼び出したい関数が増えた場合でも、calc関数自体を修正する必要はないので、修正箇所が少なく済むのも助かりますね。

またHTMLと組み合わせて使うことを考えた場合、各要素のid属性やclass属性と同名の関数を用意しておけば、属性の名前を渡すだけで処理を呼び出せるなど、結構幅広く使えるのではないでしょうか。

まとめ

コールバック関数がどんなものかざっくりと書いてきましたが、やはり一番のメリットはすっきりとしたコードが書けるということだと思います。
見やすいコードを書けるかどうか、それも重要な要素ですので、是非ともコールバック関数の使い方をマスターしていきたいですね!

ここまで閲覧ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アーカイブ

カテゴリー