JavaScriptのコールバック関数とか簡単な非同期処理について

Posted at 2019-05-18

##コールバック関数とは

関数に引数として渡される関数のことです。

JavaScriptの関数は「ファーストクラスオブジェクト（第一級オブジェクト）」というもので、
数値や文字列のように変数に代入したり、配列にセットしたりと、
なんらかの計算処理ができたりといったプログラミングの基本機能が使えます。

上記を踏まえ、
関数を引数にして実行してみます。

test.js

// 挨拶を実行
sample(hello);

// 関数を実行する関数
function sample(hoge) {
  hoge(); 
}

// 挨拶する関数
function hello() {
  console.log('hello');
}

関数を受け取る関数、なので高階関数というやつですね。

wikiによると...

高階関数（こうかいかんすう、英: higher-order function）とは、
第一級関数をサポートしているプログラミング言語において、関数（手続き）を引数にしたり、
あるいは関数（手続き）を戻り値とするような関数のことである。

この様に実行できます。

無名関数でもOK。

test.js

// 挨拶を実行
sample(function(){console.log(2)});

// 関数を実行する関数
function sample(hoge) {
  hoge(); 
}

さらに無名関数は省略出来るので…

test.js

// 挨拶を実行
sample(() => console.log('hello'));

// 関数を実行する関数
function sample(hoge) {
  hoge(); 
}

こう書けます。

##コールバック関数と非同期処理の関係

簡単な非同期処理です。

// 数字を順番に表示
console.log(1);
setTimeout(() => console.log(2), 1000);
console.log(3);

上から順番に実行されていきますが、
実際にコンソールに表示されるのは…

1
3
2

こうなります。

###順番としては、

console.log(1);で1を表示。
↓
setTimeout(～省略～);でタイマーをセット。
↓
console.log(3);で3を表示。
↓
タイマーの時間が経過したのでconsole.log(2);で2を表示。※非同期処理

つまりsetTimeoutがコールバック関数を実行しています。
このようにコールバック関数は非同期処理とともに用いられることが多いです。