【javascript】コールバック関数について

引数に指定した関数をコールバック関数って呼ぶみたいだけど、なんじゃそれ！って思ったら意外と使ってることに気づいたので備忘録

コールバック関数とは

簡単に言うと引数に渡される関数がコールバック関数

// コールバック関数
const hello = () => {
  console.log("こんにちは");
};
// コールバック関数を実行する関数
const call = (callback) => {
  console.log("↓↓↓コールバック関数を出力↓↓↓");
  callback();// 引数に設定した関数の呼び出し
};
// 出力
call(hello);
// 【出力結果】
// ↓↓↓コールバック関数を出力↓↓↓
// こんにちは

こんなん

注意する点として
call(hello);でhello関数を引数に設定してるんだけど、
call(hello());って()括弧をつけるとコールバックで呼び出してる関数側でエラーになるのとcall(hello());側ですでにhello関数が呼び出されてるから

// 【出力結果】
// こんにちは
// ↓↓↓コールバック関数を出力↓↓↓
// エラー：hello()()が実行されちゃうから

って出力結果が逆になっちゃうから()つけないよう注意

それから、コールバック関数って聞きなれないなぁって思っていたら処理を数秒後とかに変更するsetTimeout関数で使ってた

// 0.5秒後に処理をストップさせる処理
setTimeout(function(){
	$("#hoge").stop();
},500);

上のはes5だからes6で書くとこう

setTimeout(() => {
	$("#hoge").stop();
},500);

ふむふむ、知らず知らずのうちに使ってたなぁって納得

コールバック関数の引数をあらかじめ用意しておく書き方

ここまでは、引数に関数を設定するのがコールバック関数なんだなって納得できたんだけどコールバック関数に設定する引数をあらかじめコールバックを呼び出す関数側に設定をしておくことができるって頭はてなになったので書き出し

// コールバック関数を実行する関数
const call = (callback) => {
  callback("田中", 3);
};
// コールバック関数
call((name,age) => {
  console.log(name+"は"+age+"歳です。");
});
// 【出力結果】
// 田中は3歳です。

どうなってんだ、これ？ちょっと書き出す

call関数に引数でコールバック関数を設定(callback)できるようにして、引数に値を先に入れておくcallback("田中", 3)
↓
コールバック関数に引数を2つ設定call((name,age)できるようにしておいて、呼び出されたら引数を設定(name+"は"+age+"歳です。")して出力

あーなるほどね（わかってない）

枠をコールバックで用意して、値は動的に入れ替えたりできるようにしてる感じかな？
実際に使ってみないといまいちつかめないわ
こういうことができるってことで備忘録