【Javascript】高階関数(higher order functions)をかじってみた

初めに

javascriptを学習したら、高階関数という概念が出てきたのでそれについて自分なりに理解した内容をまとめてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

高階関数とは

関数の引数に関数を取る関数のこと。英語ではhigher order functionsという。

なぜ使うのか

一度定義した関数に自分なりに味付けをして細かい内容を追加したりしてカスタマイズができるメリットがあるから。その他にも理由があるらしい。

取り敢えず使ってみた

数字をブラウザに表示するシンプルな関数を定義しました。

  <script>

    function printNumber(inputNumber) {
      document.write(inputNumber);
    }

    printNumber(1)
  </script>

ブラウザに数字を表示するこの関数の機能をそのままに残して、足し算や掛け算した結果を表示するように拡張してみたいという場面がありますよね。早速高階関数を定義して使ってみます。

function calcNumber(val1, val2, printNumber) {
      const sumNumber = val1 + val2
      const multiNumber = val1 * val2
      printNumber(sumNumber);
      printNumber(multiNumber);
    }

    calcNumber(3, 4, printNumber);

calcNumberという高階関数を定義して、その引数としてval1,val2と先ほど定義したprintNumberを入れました。printNumberはただ数字をブラウザーに表示するだけですが、calcNumberは足し算した結果や掛け算した結果が表示されます。

高階関数はjavascriptだけのものではない

実はこの高階関数という概念は他の言語にもあります。pythonで高階関数を試してみました。

def printVal(callId):
  print(f"プリントするのは{callId}ですね。")

def calc(val,height, printVal):
  printVal(val * height)

calc( 2 , 3, printVal)

画面に文字列を出力する普通の関数printValを定義します。そしてval,heightという引数の他にprintValという関数も引数にしています。

結果はちゃんと掛け算した結果を出力してくれます。

#終わりに
高階関数は関数を引数として使える便利なものです。いろいろと応用できそうなので、試してみてはどうでしょうか。

参考記事

https://se-tomo.com/2019/02/06/%E3%80%90javascript%E3%80%91%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0%E3%81%A8%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E9%96%A2%E6%95%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%90%86%E8%A7%A3/
https://qiita.com/elipmoc101/items/c34b38ddbbd9b52d0a4f
https://qiita.com/may88seiji/items/8f7e42353b6904af5e9a