2018年6月12日火曜日

コールバック関数を自分のために解説 (JavaScript)

ここまで理解したことのメモ。

主な解説はfreeCodeCampから
https://guide.freecodecamp.org/javascript/callback-functions/

  • JavaScript では、functionも first-class object。変数に格納したり、引数として渡したりできる。

  • Callback Functions (コールバック関数)とは
    • 他の関数に引数として渡される関数。 後で実行する( いつ 実行されるかは後述)
      • 他の関数を引数として受け取る関数を higher-order function (高階関数) という
      • このhigher-order function に、 いつ コールバック関数を実行するかを書く

  • 引数として渡すときは、関数名の後に()を付けない。渡した時点で今すぐ実行するのではなく、関数の定義をhigher-order functionに渡すだけなので。
    • 実際に実行する場所で、引数を渡す
  • 無名関数も、callbackとして(引数として)渡すことができる。(下記Gistのuse_anonymous_function.js)

以下、freeCodeCampのページに載っていた例を理解するためにしつこいほどコメントを入れたもの(笑)
変数名も多少変えさせてもらってます。


// higher-order function(コールバック関数を引数として受け取る関数) を定義する
function createQuote(quote, callbackFunction){ // 二つ目の引数callbackFunctionに渡されるのが「コールバック関数」
  var myQuote = "Like I always say, " + quote;
  callbackFunction(myQuote); // ※(2) ここで、(1)の箇所で引数として渡したlogQuoteが実行される。コールバック関数logQuoteへの引数はここで渡す。
}

// 下記(1)でコールバック関数として渡す関数を定義する
function logQuote(quote){ 
  console.log(quote);
}

// ※(1) createQuoteを実行する。引数としてlogQuoteを渡す。
createQuote("eat your vegetables!", logQuote); 
// ↑ここではlogQuoteに()を付けない。今すぐ実行するのではなく、関数の定義を渡すだけなので。

// Result in console: 
// Like I always say, eat your vegetables!

/* Original code was taken from https://guide.freecodecamp.org/javascript/callback-functions/ */

// 上記Gistの13行目、logQuoteの代わりに無名関数を渡して同じことをする
createQuote("eat your vegetables!", function(quote){ 
  console.log(quote); 
});

0 件のコメント:

コメントを投稿