概要

この記事では、JavaScriptで少し理解が難しいコールバック関数について、超基本的な知識をメモ的にまとめています。
自分用の備忘録なのであしからず。

コールバック関数とは

コールバック関数とは、どのような関数のことを言うのでしょうか。以下MDN web docsからの引用です。

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

引数として渡される関数。。。

関数って引数で渡せるの？って感じで少しイメージが湧きにくいですね。

順序立てて解説していきます。

JavaScriptは関数も値

コールバック関数について詳しくみていく前に、「JavaScriptでは関数も値」と言う話をします。

以前関数を定義する際に、定数に代入することができること(関数式)を学びました。
(関数について詳しくまとめている記事はこちらから)

これが意味していることを考えます。

結論から言うと、JavaScriptでは、関数を定数に代入できるため「関数は値の一つとして扱うことができる」と言うことです。
JavaScriptにおける関数は、文字列や数値、配列、オブジェクトと言った値と同じように値として扱えます。

よって、定数が引数として関数に渡されるように、関数もまた引数として渡されます。

まずはここを理解しましょう。

関数の呼び出し方と渡した方

以下のコードを見ながら解説していきます。

index.js

//関数introduceを定義
const introduce = () => {
    console.log('私の名前はたいちです');
};

//関数callを定義
const call = (callback) => {
    console.log('こんにちは！');
    callback();
};

//introduceをコールバック関数としてcallに渡す
call(introduce);

//以下、出力結果
//こんにちは！
//私の名前はたいちです

ここでは、introduceとcallが関数として定義されています。
また、introduceは引数としてcallに渡されています。

関数を渡すときは、関数名の後ろに()は要りません。()がない場合は関数の定義そのものを指します。（関数名の後ろに()があると関数は呼び出されます。）

コールバック関数の流れとしては、まず引数としてintroduceが渡され、callが呼び出されます。
次に引数であるintroduceはcallbackに代入され、call内の処理に書かれてるcallbackに代入されます。コールバック関数を呼び出す際には、()をつけます。

この流れで処理が実行されます。

この例でわかるように、JavaScriptでは関数を引数に渡すことができます。そして、この引数になっている関数のことをコールバック関数と呼びます。

引数で関数を定義する

前の例では、既に定義してある関数をコールバック関数として渡しましたが、関数を直接引数の中で定義することもできます。

index.js

const call = (callback) => {
    console.log('こんにちは！');
    callback();
};

//引数の中で関数を定義
call(() => {
    console.log('私の名前はたいちです');
});

//以下、出力結果
//こんにちは！
//私の名前はたいちです

introduceに代入していた関数をそのままcallの引数として記述します。

このように直接定義することも可能です。

関数の引数

コールバック関数には、普通の関数と同様に引数を渡すことができます。

index.js

//コールバック関数に引数を渡す
const call = (callback) => {
    console.log('こんにちは！');
    callback('たいち');
};


call((name) => {
    console.log(`私は${name}です`);
});

//以下、出力結果
//こんにちは！
//私の名前はたいちです

一気にわかりにくくなりましたね笑
処理の流れを見ていきましょう。

まず関数callを定義しています。関数callは、コールバック関数callbackを引数に取ります。

関数callを呼び出す際に、引数で直接(name) => {console.log(`私は${name}です`);}と言う関数を定義しています。
ここで定義されている関数は、引数にnameを取ります。

では、この引数nameはどこから渡されるかと言うと、関数callを呼び出した際に実行されるcallback('たいち')の部分で渡されます。

このような流れで処理が実行されます。

どこから値が渡されるのかわかりにくいので、難しいですね。

まとめ

今回は、コールバック関数について簡単に解説してみました。コールバック関数は、非常に使用頻度が高めなのでしっかりと理解しておきたいところです。

最後まで読んでいただきありがとうございました。ではまた。

概要

目次

コールバック関数とは

JavaScriptは関数も値

関数の呼び出し方と渡した方

引数で関数を定義する

関数の引数

まとめ