JavaScriptチュートリアル:高階関数

先週、メモ化について話すときに、「高階関数」という用語を何気なく削除しました。今はそのような言葉を投げかけるのは快適ですが、それが何を意味するのかいつもわかりませんでした。今週は、高階関数とは何かを調べ、いくつかの一般的な例を示し、独自の関数を作成する方法を学びます。

本質的に、高階関数は、関数を引数として受け入れるか、関数を返す関数です。これは、JavaScriptのファーストクラス関数のおかげで可能です。つまり、JavaScriptの関数は、他の変数と同じように渡すことができます。これは非常に単純に聞こえますが、ファーストクラスの関数で得られる種類のパワーを完全に伝えるものではありません。

JavaScriptを作成する場合は、おそらく高階関数を使用していて、気付くことさえありません。forループを配列メソッドに置き換えたことがある場合は、高階関数を使用したことがあります。AJAX呼び出しの結果(async/なしawait)を使用したことがある場合は、高階関数を使用したことがあります(promiseとcallbackの両方に高階関数が含まれます)。アイテムのリストを表示するReactコンポーネントを作成したことがある場合は、高階関数を使用したことがあります。それらの例を見てみましょう:

const items = ['a'、 'b'、 'c'、 'd'、 'e']

//これの代わりにforループ...

for(let i = 0; i <items.length-1; i ++){

  console.log(items [i]);

}

//高階関数forEachを使用できます

//(forEachは関数を引数として取ります)

items.forEach((item)=> console.log(item));

//コールバックまたは約束(作成している場合)

//非同期リクエスト、使用しています

//高階関数

get( '// aws.random.cat/meow'、(response)=> {

  putImageOnScreen(response.file);

});

get( '// random.dog / woof.json')。then((response)=> {

  putImageOnScreen(response.file);

});

//以下のReactコンポーネントでは、mapが使用されています。

//これは高階関数です

const myListComponent =(props)=> {

  戻る(

   

          {props.items.map((item)=> {

            戻る(

  • {項目}
  •       })}

      );

    };

これらは関数を引数として受け入れる高階関数の例ですが、それらの多くは関数も返します。2組の括弧を持つ関数呼び出しを見たことがあれば、それは高階関数です。この種のことは以前はあまり一般的ではありませんでしたが、Reduxを使用する場合は、おそらくconnect高階関数である関数を使用したことでしょう。

デフォルトのconnect(mapStateToProps、mapDispatchToProps)(MyComponent);をエクスポートします。

上記の場合、connect2つの引数を使用して呼び出すと、関数が返され、すぐに1つの引数を使用して呼び出します。関数を戻り値として使用する単純なロギングライブラリを見たことがある(または書いている)こともあるかもしれません。以下の例では、メッセージの前にコンテキストをログに記録するロガーを作成します。

const createLogger =(コンテキスト)=> {

  return(msg)=> {

    console.log( `$ {context}:$ {msg}`);

  }

};

const log = createLogger( 'myFile');

log( '非常に重要なメッセージ');

//「myFile:非常に重要なメッセージ」をログアウトします

上記の例は、高階関数の力の一部を示し始めています(メモ化に関する以前の投稿も参照してください)。createLogger返される関数の本体で参照する引数を取ることに注意してください。変数logに割り当てた、返さcontextれた関数は、関数が定義されたスコープ内にあったため、引き続き引数にアクセスできます。

おもしろい事実:参照contextはクロージャによって可能になります。クロージャは独自の投稿に値するため、ここでは説明しませんが、高階関数と組み合わせて使用​​すると、いくつかの非常に興味深い効果が得られます。

たとえば、クロージャを高階関数と一緒に使用することが、JavaScriptで「プライベート」または改ざん防止変数を使用できる唯一の方法でした。

protectedObject =(function(){

  myVar = 0とします。

  戻る{

    get:()=> myVar、

    増分:()=> myVar ++、

  };

})();

protectedObject.get(); // 0を返します

protectedObject.increment();

protectedObject.get(); // 1を返します

myVar = 42; //おっと!グローバル変数を作成しました

protectedObject.get(); //それでも1を返します

でも、夢中にならないようにしましょう。高階関数は、クロージャのような特別なものを必要としません。これらは、他の関数を引数として受け取る関数、または関数を返す関数です。終止符。より多くの例や詳細を知りたい場合は、MarijnHaverbekeによる「EloquentJavaScript」の高階関数に関する章を確認してください。

質問やコメント?Twitterでお気軽にご連絡ください:@freethejazz。