ぽんぽこ開発日記

主にHTML, CSS, JavaScriptなどフロントエンドの話を。目指せ脱初心者。

文系にも分かりやすいJavaScriptの高階関数の基本と使い方

高階関数とは何か?今までよくわからなったので改めて勉強してみた。

高階関数とは

・引数や返り値に他の関数をセットした関数
というものらしいです。とかいっても全然わからなかったので自分なりに解釈して飲み込んでみた。

高階関数は上司と部下の関係に似てると思った。

ある新規事業開拓の調査を行なう部署が存在していたとする。
部長は佐藤さん。佐藤さんには山田と後藤という2人の部下がいる。

ある日、社長からその部署へ「ホテルを立てようと思っているので採算性があるのかどうか調べてくれ。」と頼まれた。

部長である佐藤さんは「かしこまりました。調べてみます。」と返事をした。
さて、これから佐藤さんは何をするべきか考えてみた。
まず

プロセスはこうだ。

  1. 佐藤さんは社長からデータをもらう
  2. 山田と後藤に初期投資費用と収益を調査してもらう
  3. 佐藤さんは山田と後藤が調査して出してくれた結果をみていけるかどうか判断する
  4. 結果を社長に報告する

ここまでをソースコードに落としてみる

var satou = function(location, buildingCost, manageCost, yamada, gotou){
     // location = 立地
     // cost = 建物、設備を用意するための費用
     // manageCost = 運用するための人件費
     var a= yamada(location, buildingCost, manageCost);
     var b= gotou(location);
     
     var conclution = b - a;
     if(conclution > 0){
          var answer = console.log(‘この事業をするべきだ’);
     } else{
          var answer = console.log(‘この事業をするべきでない’);
     };
     return answer;
}; 

var preInvest = function(){
     // 初期投資にかかる費用を計算するロジックが書かれる
};


var income= function(){
     // 見込める収益を計算するロジックが書かれる
}; 

//実行
satou(‘熱海’, 10000, 500, preInvest, income);
 



いろいろと事業内容の精度にはツッコミがあるかもしれないが、この部署ではざっくりとこんなことをする。
このとき、佐藤さん、山田、後藤それぞれが目的を持った関数になっていることに注目していただきたい。

佐藤さんはまず社長から立てる場所(location)と施設建設の費用(buildingCost)、運用コスト(manageCost)のデータを受け取る。それを山田と後藤にそれぞれ渡し、集計を取ってもらう。つまり山田と後藤の目的はコストと収益の集計をとることだ。
そして山田と後藤から返ってきた集計データを合わせ、佐藤はこの事業をするべきか否かを判断し、社長に報告する。これが佐藤のやること・目的にあたる。

つまり部署のメンバーをまとめ、そのメンバーに役割を振っていくのが佐藤さんという高い階級に位置する人(関数)で、その下に役割ごとの調査をしてくれる部下(関数)がいる。これがいわゆる高階関数なのか、と解釈した。

以上のことから高階関数の特徴をより具体的に書くと目的を達成するための機能を分解し、それぞれ別の関数にわけることでカスタマイズ・メンテナンス性を向上させることができるなーと思った。