コールバック関数とは

コールバック関数とは

コールバック関数は、ある関数が実行された後に呼び出される関数です。

通常、他の関数に引数として渡されます。

また、コールバック関数の範囲よりも、外側の関数から呼び出されます。

【引用：MDN】
コールバック関数とは、引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。

// コールバック関数
function greeting(name) {
  alert('Hello ' + name);
}

// コールバック関数を受け取り、処理の最後でコールバック関数を実行する。
function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

//* ほかの関数を呼びだす際に、その関数の引数として渡される。
// よく使われる方法として、その関数の処理が終わった後に、コールバック関数が実行される
/* 結果的に、他の関数が実行された後に、半自動で実行される関数といえる
processUserInput(greeting);

コールバック関数の種類

コールバック関数には、同期型と非同期型の２種類があります。

同期型

配列の繰り返しや並び替え時など、すぐに結果を見たい場合に使用。

同期とは、上から下に、順番に行っていく処理です。

例えば、foreach, map, filter, sortで使用します。

//before → number　→ afterの順番で出力される。
const numbers = [1, 2, 3, 4];

console.log('before')
// numbers.forEachが関数。numbers.forEachの引数がコールバック関数。
numbers.forEach((number) => {
	console.log(number)
}

// console.log('number')のあとに実行される
console.log('after')

非同期型

ファイルの読み書き、ネットワークリクエストなど、待ち時間が起こる処理で使用。

非同期とは、同時並行で行う処理。

// Before→After→Set Timeoutの順で実行される
// １秒後にSet Timeoutが表示されるので、先にAfterが表示される。
console.log('Before');

/*
*1秒後にSet Timeoutと表示する関数。
*１秒後に処理が行われるため、Afterが出力された後に実行される。
*/
setTimeout(() => {
  console.log('Set Timeout');
}, 1000);

console.log('After');