コールバック関数って使用頻度高いのに今までちゃんと理解できていなかったのでまとめます。。

コールバック関数とは

コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。（MDN参照:https://developer.mozilla.org/ja/docs/Glossary/Callback_function）

MDNの説明では、私には意味がさっぱり理解できませんでした。（ ; ; ）

いろいろ調べた結果、要は、
#####コールバック関数とは、高階関数に渡す関数のこと。
#####高階関数とは、関数に関数を渡すことが出来るやつ。

はい。ここまで調べて見ても私にはしっくりきません😭

要の要は、
#####コールバック関数は、
ボタンクリックした時に〇〇を実行して！
〇秒後に〇〇を実行して！
というように、今じゃなくて、任意のタイミングで何かを実行してほしい時に使える便利なものっていう理解に留まりました。(果たしてこの理解は合っているのかどうか...間違っていたらごめんなさい🙏)

構文

構文その1（関数宣言で書くとこれ）

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

構文その2（無名関数／匿名関数で書くとこれ）

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

構文その3（アロー関数で書くとこれ）
※アロー関数は、...=(コールバック関数)=>{...の（）括弧は、中のコールバック関数（引数）が1つのみであれば、（）括弧の記載を省略出来る。

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

使用例

「おにぎりの具は何が好き？」というダイアログが表示されて、「梅」と入力した場合のみ、「だと思った！」とコンソールに表示するというものを実装しました。（自分でも意味わからないのですが、思いつくままに作ったら、こんなものになりました😅）
高階関数　-> onigiri
コールバック関数　-> (fn)
window.prompt -> テキストを入力することを促すメッセージを持つダイアログを表示(参照: https://developer.mozilla.org/ja/docs/Web/API/Window/prompt)

function onigiri(fn) {
  const input = window.prompt("おにぎりの具は何が好き？");
  if (input === "梅") {
    fn();
  }
}

onigiri(function () {
  console.log("だと思った！");
});

setTimeoutメソッドという、「〇秒後に表示する」というメソッドを利用して、5秒後にコンソールに「Hello!」と表示するものを実装してみました。

setTimeout(function () {
  console.log("Hello!");
}, 5000);

まとめ

高階関数、コールバック関数について、勉強してみましたが、まだまだ完全理解には届いていないような気がします。
コールバック関数について調べていると、「同期処理、非同期処理」や「promise」など初めて耳にする用語が次から次に現れて、コールバック関数の奥の深さを知らしめられました💦
本投稿の内容に至らない点も多々あると思いますが、ご了承下さい。いつも皆さんが投稿して下さるQiitaの投稿を見て勉強させて頂いてます！プログラミングの勉強これからも頑張りましょう✨

参考文献

初学者にもとても分かりやすく説明してくれている Youtuberさんのチャンネルです♪