[JavaScript] コールバック関数について

まとめ

コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。

※mdn web docsより

目次

• JavaScriptは関数も値
• 関数の呼び出し方と渡した方
• 引数で関数を定義する
• 関数の引数
• 非同期処理（setTimeout関数）

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に渡されている
• 関数を渡すときは、関数名の後ろに()は不要
• ()がない場合は関数の定義そのものを指す。（関数名の後ろに()があると関数が呼び出される。）

コールバック関数の流れ

1. 引数としてintroduceが渡される
2. sayHiが呼び出される
3. 「引数であるintroduceはcallbackに代入される
4. 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

解説

1. 上記のコードでは、console.log('1') → setTimeout() → console.log('3')の順番に処理が登録される （同期処理と同じ順序）
2. setTime関数で登録したコールバック関数(() => { console.log('2') }, 2000)は、2000ミリ秒後に処理を実行させるように、非同期的なタイミングで呼び出される
3. setTimeout()よりも後に書かれているconsole.log('3')が先に実行される

参考リンク

• Callback function
• 【JavaScriptの応用】非同期処理とコールバック関数