【JavaScript】超基礎、コールバック関数コードの追い方

はじめに

今回、JavaScriptの基礎的な項目を一通り学んでみて、不安な要素の復習をしてみた際に、JavaScriptをはじめて学んだ際に躓いたというか、理解の難しかった要素であるコールバック関数をひとつずつコードを追っていくことで、自身の理解を深めるとともに、自身と同様にJavaScriptを学びはじめた方の参考になれば幸いでございます。

目次

1.コールバック関数とは？
2.理解に必要な要素
3.コールバック関数の追い方

1.コールバック関数とは？

コールバック関数を端的に説明すると『引数として渡される関数のこと』です。
このコールバック関数を説明するのに、理解しておくべき要素を以下に用意してみたので、見ていきましょう！

2.理解に必要な要素

・引数

引数とは…『関数を実行する時に関数に渡す値』
関数定義のなかの”（）”で引数として使う変数を作れます。
各関数のなかでは以下のように使われます。

allow_kansuu.js

const hello =() => {
  consle.log('hello');
};

kansuu_sengen.js

function hello() {
  console.log('hello');
}

kansuu_shiki.js

const hello = function() {
  console.log('hello');

・関数式

関数式とは…『変数に関数を代入したもの』

kansu_shiki.js

const kansu_shiki = function() {
  console.log('kansu_shiki');
};
kansu_shiki();

この関数式では、定義した変数kansu_shikiにfunction関数を直接代入することで、後ろのkansu_shiki();で関数を実行することができるようになっています。

・高階位関数

高階位関数とは…『関数の引数に関数を受け取ることができる関数』だそうですが、すでによくわかりませんネ、、
実際にコードで順を追って見てみましょう！

①まず、高階位関数の定義（コールバック関数を実行する関数）
引数にcallbackを受け取ることで高階位関数となり、その引数のなかで関数を受け取って、callback();で関数を実行することができます。

koukaii_kansu.js

function koukaii_kansu(callback) {
  callback();
}

②高階位関数に渡す関数を定義（コールバック関数として実行される関数）

koukaii_kansu.js

function hello() {
  console.log('hello');
}

③高階位関数を実行(hello関数を引数にしてkoukaii_kansuを実行する)

koukaii_kansu.js

koukaii_kansu(hello);

①から③を実行すると、
③のkoukaii_kansuが実行されて、①の引数callbackに対して、③の引数になっているhelloという関数が渡ります。
そして、①の引数callbackは②のhelloが入って関数となるので、callback();で実行することができます。
コードの流れを追うのが難しいですが、コールバック関数の理解には欠かせない要素となっているので、覚えておきましょう！

3.コールバック関数の追い方

それではここからが本題です。
実際に、コールバック関数のコードの追い方を見ていきましょう！

callback_kansu.js

function hello(callback) {
  callback('hello');
}

hello(function(message) => {
  console.log(message);
});

①helloを実行した時の関数messageがcallback関数に入ります。
②callbackは関数になるので、中のcallback();で実行することが可能となります。
③実行した時に、callback();内の文字列に'hello'という引数が入っているので、定義元のfunction(message)に渡って、出力するとconsole.log(message)にはhelloが入ってきます。

コードが複雑になってくると、どこがどうなっているかわからなくなってしまうコールバック関数ですが、このように基本的な追い方を抑えて冷静に対処していきましょう！

参考記事

【JavaScript】初心者、コールバックを仕組みから理解する

最後に

自分自身、まだまだ勉強中の身なのでほとんど指導していただいている方の解説の参考にお世話になってしまいました、、
また、理解が深まった段階でこの記事もアップデートして行ければなと思います。
何かしらの参考になれば幸いでございます。