コールバック関数がわからないので動かしてみた
why
remark.js を使って json 形式からの html への変換をやっていたところ
remark()
.use(recommended)
.use(html)
.process('## Hello world!', function (err, file) {
console.log(String(file))
})
というコードが出てきたが、
なぜ実行する関数の第二引数にきた関数が動いているのか意味がわからなかった
これはコールバック関数だと教えてもらい、調べてみる
MDN doc HTML window
ここで使っている alert も prompt も Terminal では使えないので html を使う
久しぶりに jsx ではなくて html を書いた
なお npm の prompt はめんどくさそうだった
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src='callback.js'></script> </body> </html>
callback.js
function greeting(name) {
alert(` Hello: ${name}`)
}
greeting('kaede')
これで
引数に応じた Alert のポップアップが出た
引数に関数、コールバック
function processUserInput(callback) {
const name = prompt('Enter your name')
callback(name)
}
次にこれで、プロンプトとしてウインドウがポップアップするようになる
そしてここの input に入れた値が name に入るようになった
その値を引数として、callback を発動するが、 callback という関数が js に組み込まれているわけではなく、この callback は processUserInput が引数として受け取っている関数である。
この MDN のサンプルでは次に
processUserInput(greeting);
greeting を引数として使用して processUserInput を使用しているので、
callback は greeting を使用することになる。
よって greeting によって prompt に入力された 'kaede' が alert で返される。
まとめ
よって callback とは、関数 A の引数に関数 B を指定して、その関数 B を 関数 A の内部で使用することになる。実際に一つ一つ動きを追ったらわかった。
しかし remark はメソッドチェーンだし、即時関数っぽいし、 file どこからきてるのかわからないから callback がわかったところで remark のコードの詳細はわからない。ありゃりゃ
次は メソッドチェーンを見てみる
