新人の頃訳がわからなかった三兄弟を JavaScript を使って説明してみる
同期処理
記述された通りの順番に処理すること
console.log('前の処理が終わるまで')
console.log('次の処理は')
console.log('行われません')
実行結果
非同期処理
他の処理と並列で処理を行うこと
setTimeout(() => {
console.log('どうぞどうぞ')
}, 100)
setTimeout(() => {
console.log('いやおれが')
}, 50)
console.log('ここはおれが')
実行結果
プログラムの記述された順番通りに実行されません（行番号の順番通りという意味で）
コールバック
一番わけがわからなかったやつ。こいつを説明したいがために記事を書いた。
〇〇したら（されたら)引数として渡された関数を実行するというのが、コールバックの考え方だ
例えば
addEventListener
というメソッドがある
文字通り、イベントのリスナーを(HTMLElementに)追加するメソッドだ
第一引数にイベント名、第二引数にコールバック関数(イベントリスナー)を追加する
使い方はこんな感じ
window.addEventListener('click', () => {
console.log('window がクリックされました')
})
これにより、windowをクリックすると window がクリックされました とコンソールログが出るようになる。コンソールログを出す関数をコールバック関数として引数に渡しているからだ。
当然、
window.addEventListener('click', function() {
複雑な処理
})
書き方が変わろうが、実行する処理が複雑になろうが、windowがクリックされたら第二引数の関数が実行されるところは変わらない。
また、先ほど例に出したsetTimeout関数も、引数にコールバック関数を取っている
// setTimeout(コールバック関数, 何秒待つかms)
これは第二引数に渡されたミリsec分待ってから、第一引数に渡された関数を実行するという関数
addEventListenerコールバックの例と比べて、ウィンドウでイベントが発火したら、という条件から何ms待ってからという条件に変わったものの、コールバックの考え方自体は変わっていない。
〇〇したら（されたら）引数として渡された関数を実行している
コールバックは他の言語でも実装されている。JavaScriptだけではなく、Javaにだって、Objective-cにだって、Swiftにだって存在している。
スマホの画面をつけた時、ページ遷移した時、ボタンが押された時など、とにかく〇〇したら（されたら）引数として渡された関数を実行する = コールバック は色々なところで使われているが、考え方は変わらない
〇〇したら（されたら）引数として渡された関数を実行するという考え方だ
もしよくわからない場合は、わからないメソッド（関数）のリファレンスをちゃんと読んで、使用例を見て、正しいメソッドの使い方を調べればきっとできるはずだ