まとめ
コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。
※mdn web docsより
目次
JavaScriptでは関数も値
「関数を定数に代入できる=関数は値の一種として扱うことができる」
JavaScriptにおける関数は、文字列や数値、配列、オブジェクトと言った値と同じように値として扱える。
つまり、定数（文字列や数値、配列、オブジェクトと言った値）が引数として関数に渡されるように、関数もまた引数として渡される。
関数の渡し方と呼び出し方
下記の基本構文にて解説する。
index.js
//関数introduceを定義（渡す側）
const introduce = () => {
console.log('I am XX');
};
//関数sayHiを定義（呼び出す側）
const sayHi = (callback) => {
console.log('Hi!');
callback();
};
//introduceをコールバック関数としてsayHiに渡す
sayHi(introduce);
//以下、出力結果
//Hi!
//I am XX
解説
-
introduceとsayHiが関数として定義されている -
introduceは引数としてsayHiに渡されている - 関数を渡すときは、関数名の後ろに
()は不要 -
()がない場合は関数の定義そのものを指す。（関数名の後ろに()があると関数が呼び出される。）
コールバック関数の流れ
- 引数として
introduceが渡される -
sayHiが呼び出される - 「引数である
introduceはcallbackに代入される -
sayHi内の処理に書かれてるcallbackに代入される（コールバック関数を呼び出す際には、()をつける）
上記の基本構文からわかるように、JavaScriptでは関数を引数に渡すことができる。そして、この引数になっている関数のことをコールバック関数と呼ぶ。
引数で関数を定義する
前章では、既に定義してある関数をコールバック関数として渡しましたが、引数の中で関数を定義することもできます。
index.js
const sayHi = (callback) => {
console.log('Hi!');
callback();
};
//引数の中で関数を定義
sayHi(() => {
console.log('I am XX');
});
//以下、出力結果
//Hi!
//I am XX
解説
-
introduceに代入していた関数をそのままsayHiの引数として記述する。 - このように引数の中で関数を定義することもできる
関数の引数
コールバック関数には、普通の関数と同様に引数を渡すことができる。
index.js
//コールバック関数に引数を渡す
const sayHi = (callback) => {
console.log('Hi!');
callback('XX');
};
sayHi((name) => {
console.log(`I am ${name}`);
});
//以下、出力結果
//Hi!
//I am XX
解説
- 関数
sayHiを定義してる（関数sayHiは、コールバック関数callbackを引数に取る） - 関数
sayHiを呼び出す際に、引数で直接(name) => {console.log(`I am ${name}`);}と言う関数を定義しいる
この関数は、引数にnameを取る - この引数
nameは、関数sayHiを呼び出した際に実行される -
(name) => {console.log(`I am ${name}`);}はcallback('XX')の引数('XX')を受け取り、I am XXが出力される
非同期処理（setTimeout関数）
setTimeout関数を用いて、非同期処理を行う。
index.js
console.log('1');
setTimeout(() => {
console.log('2')
}, 2000);
console.log('3');
//以下、出力結果
//1
//3
//2
解説
- 上記のコードでは、
console.log('1')→setTimeout()→console.log('3')の順番に処理が登録される （同期処理と同じ順序） - setTime関数で登録したコールバック関数(
() => { console.log('2') }, 2000)は、2000ミリ秒後に処理を実行させるように、非同期的なタイミングで呼び出される -
setTimeout()よりも後に書かれているconsole.log('3')が先に実行される