Help us understand the problem. What is going on with this article?

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

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

前回2つの記事は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をそれぞれコンソールに表示


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


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

kana-wwib
フロントエンジニア を目指して独学中です。 理解を整理する為JavaScriptメインで記事にしていきます。 現在React学習中です。
tensyoku_quest
未経験からエンジニア転職する人に対し「地図」「情報」「仲間」「メンター」「戦略」を共有するコミュニティです。
https://engineer-sokutsu.com/salon/lp/announce4/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした