JavaScriptのコールバック関数について

2023 2/16

1月 27, 2023 2月 16, 2023

URLをコピーしました！

ProgateでHTML/CSS、JavaScriptのチュートリアルをやって、その次のステップとしてUdemyのJavaScript講座を進めています。

しかし、どちらでもコールバック関数とアロー関数の説明があまり理解できていない気がしたので、順番に調べてみることにしました。

ということで、まずはコールバック関数から調べていきます。

MDN web docsのコールバック関数の説明

まずは、MDN web docsから引用します。

コールバック関数とは、引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。簡単な例を以下に示します。

function greeting(name) {
alert(Hello, ${name});
}

function processUserInput(callback) {
const name = prompt("Please enter your name.");
callback(name);
}

processUserInput(greeting);

Google検索をして上位のサイトをいくつか見てみましたが、「コールバック関数とは、ある関数を呼び出す際に、その関数の引数に指定される別の関数のこと」という説明がされているところもありました。

また、上記の処理は同期型コールバックと言うが、コールバックは非同期操作において用いられるられることが多いとのこと。

非同期操作というのは、あとに出てくるYouTube動画の例のように、「子どもが手を洗ったかチェックする」「手を洗ったのがチェックできたら、リンゴの皮むきを手伝ってもらう」のように、同時に行うことができずに、段階的に行う必要がある操作のことを指します。

YouTubeにおけるコールバック関数の説明

上記の説明だけではよくわからなかったので、コールバック関数について説明しているYouTube動画を参照しました。

【JavaScript初心者】コールバックを分かりやすいイメージで説明！

・Callbackは、「あとからしてね」という関数
・他の関数に引数として渡す
・Callbackのメリットは、同じ処理をしたいけれど、この部分だけこの指示をして欲しい。というときに使える

僕が探した中では、こちらの動画が一番やさしくコールバック関数について説明されていました。

コールバック関数とは？【分かりやすい解説シリーズ #40】【プログラミング】

・コールバック関数はある関数を呼び出す時に引数に指定する別の関数のこと
・判定処理を行っている部分を丸々別の関数として呼び出すことが出来る
・配列をループしてチェックするといった共通処理は、関数側に任せたうえで、判定処理は、呼び出し元で自由に指定することができる
・その結果として、関数を複製していくつも作ったりすることなく１つの関数がより汎用的になる
・無名関数はJavaScriptではよく使われる手法
・汎用性が上がる反面、ソースコードの処理を追いかけづらくなってしまうデメリットもある
・PHPの標準関数やJavaScriptの非同期処理などを行う場合はコールバック関数を指定しなければならない場合も多い

コールバック関数の定義については、こちらの動画が簡潔にまとまっていて参考になりました。

【JavaScript入門 #7】匿名関数、高階関数、コールバック関数を攻略せよ！【ヤフー出身エンジニアの入門プログラミング講座】

//構文

function 高階関数(コールバック関数){
    //処理
    コールバック関数();
}

//上記動画　17:36 無名関数とコールバック関数のあわせた処理

function confirmed(fn){
    if(window.confirm("実行しますか？")){
        fn();
    }
}

confirmed(function () {
    console.log("フォローを外しました")
});

//上記動画23:12　無名関数、引数を使った処理の例

function confirmed(fn){
    const input = window.prompt("実行しますか？");
    fn(input);
}

confirmed(function (input) {
    if (input === "実行"){
        console.log("リポジトリを削除");
    })

実際の使用例としては、こちらが一番参考になりました。