【Javascript】「高階関数」を使ってみる

ウェブ制作技術

おはようございます、樋口です。
Javascriptの話です。「高階関数」というのを紹介します。

Javascript

「高階関数」とは

まず高階関数の定義から。

高階関数・・・関数を引数、戻り値として扱う関数

メインとなる親玉の関数(これが高階関数)があって、その関数に、個別の機能をもつ関数を引数として渡します。

ちなみに、高階関数に引数として渡される関数はコールバック関数と呼ばれたりします。
こっちの方が馴染みのある用語かと思います。

高階関数のサンプル

ひとつ例をあげてみます。

oyadamaという高階関数があります。
oyadamaには具体的な機能はありません。
データと関数を受け取って、受け取ったデータに対して受け取った関数で処理するという、枠組みがあるだけです。

プログラミング

そこに、別途定義したデータと関数を投入して実行すると、処理されたデータが出力されるという仕組みです。

渡す関数を無名関数に

上記例では、引数として渡す関数を別途定義しましたが、その場かぎりの使い捨ての場合は、実行時に無名関数でそのまま書いたほうがシンプルで、みるときに分かりやすくなります。

高階関数のメリット

高階関数は一見ややこしいですが、当然使うメリットがあります。

  • コードをまとめられる
  • 投入する引数を入れ替えて、いろんな処理ができる

おおまかに書くと、上記のメリットがあります。
それぞれ見ていきます。

コードをまとめられる

高階関数は、繰り返し出てくる処理をまとめて、抽象化するために使われます。
同じパターンの記述があれば、共通するロジックの部分を高階関数でまとめ、個別の機能と切り分けられないか検討してみるといいと思います。
コードがまとまっていると、デバックも楽だし、メンテナンス性も高まります。

投入する引数を入れ替えて、いろんな処理ができる

これに関しては、具体例を見てみます。
※コードサンプルは、書籍『Effective JavaScript』より引用です。

下記は、シンプルに数字を出力する処理です。

さらに別で、ランダムなアルファベット文字列を出力する処理があるとします。

この2つの処理は、それぞれ別の機能を持ちますが、ロジックは共通しています。
共通部分をまとめ、高階関数を作ってみます。

準備ができたので、高階関数buildStringを使って、上記の個別の処理を実装してみます。

共通部分をどのように抽出できるかがポイントですね。


以上、高階関数について見てきました。
パターンを見つけて、積極的に高階関数に置き換える訓練をしていきたいものです。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。