コールバック関数とは何か

今回は私のような初心者にとって恐らく最初の壁で、何が起きているのか理解しにくいコールバック関数についてです。

前回２つの記事はES5で書いてたので、今日からES6で書いていきます。

コールバック関数とは何か　

関数の引数に渡す関数
※渡される関数は「高階関数」といいます。

なので、高階関数の中で実行される関数のことですね。
「関数」の単語ばかりでややこしいですが...

実はこれは結構色々なところで見かけます。

例えば、addEventListenerやfind、mapメソッド等ですね。
だから理解は必須で、理解することで何が起こってるかわかりやすくなるということです。

早速超絶シンプルな例

let red = function() {
  console.log('I am red'); 
}

let blue = function(callback) {
  console.log('I am blue');
  callback();
}

blue(red); 
//結果：
// I am blue 
// I am red

二つ目のfunctionの引数にcallbackが渡されてますね。
①関数「I am red と表示してね」 をredに代入
②関数「I am blue と表示してね」をblueに代入　
　この子は関数に引数callbackをもち、そのcallback引数も実行。
③blueの関数が呼び出される時、引数にredを渡す。
　この引数callback = red


ちなみにこちらの引数にはわかりやすいように、「callback」の名前を付けてますが、この名前はなんでもいいのです。
ABCとかでも動きます。任意の名前を引数に付ければOK。

let red = function() {
  console.log('I am red');
}

let blue = function(abc) {
  console.log('I am blue');
  abc();
}

blue(abc);
//結果：
// I am blue 
// I am red

次は、よく見る一つの例、mapのコールバック関数について。

mapは、与えられたコールバック関数を配列それぞれに順番に実行し、その結果から新しい配列を作成できるというメソッドですね。

• value : 現在処理中の要素の値
• index : 配列のindex番号
• array : 現在の配列そのもの

詳細はこちらから MDN

mapメソッドを使ってそれぞれの年齢を計算した配列を作ってみます。

const birthYears = [1980, 2000, 1995];

const ages = birthYears.map((value) => {
  const thisYear = new Date();
  return thisYear.getFullYear() - value;
});

console.log(birthYears); //結果: [1980, 2000, 1995]
console.log(ages); //結果: [40,20,25]

mapの引数に、その場で作られた無名関数を渡してます＝コールバック関数
①birthYearsに誕生年が格納されてる
②birthYearsに対してmapを実行。
その時その場で作られたコールバック関数も実行。
＊今年の年を取得する為Dateオブジェクトも使用してみた
＊今年 - 現在の要素の値をリターン
③bithYearsとagesをそれぞれコンソールに表示


以上簡単な二つの例でした。


コールバック関数は非同期処理にも使われていたりするので、
その辺はまた記事にまとめて理解を整理していきます！