JavaScript 引数/戻り値が関数のサンプル(高階関数)

高階関数とは

高階関数とは、関数を引数に取る、または関数を返す関数のことです。

パターン	説明	例
関数を引数に取る	関数に別の関数を渡す	Array.map(), forEach(), setTimeout()
関数を戻り値として返す	関数を実行すると新しい関数を返す	クロージャ・カリー化関数など

引数が関数のサンプル

<script>
  // 引数になる関数
  function writeLog() {
    console.log("テストです");
  }

  // 引数が関数でその関数を実行する
  function procExe(a) {
    a();
  }

  // 関数を実行する
  procExe(writeLog); //テストです
</script>

13行目は、3行目のwriteLog関数を引数にしてprocExe関数を実行しています。
9行目は、変数とかっこ()で関数を実行します。
writeLog関数内のconsole.logが実行されます。

引数が関数と関数の引数の場合

<script>
  // 引数になる関数
  function writeLog(arr) {
    console.log(arr[0] + arr[1]);
  }

  // 引数が関数でその関数を実行する
  function procExe(a,b) {
    a(b);
  }

  // 関数を実行する
  const c1 = [12,13]
  procExe(writeLog,c1); //25
</script>

14行目は、関数と関数の引数の配列を引数にしてprocExe関数を実行しています。

戻り値が関数のサンプル

<script>
  // 戻り値になる関数
  function writeLog() {
    console.log("テストです");
  }

  // 関数を返す関数
  function procExe() {
    return writeLog;
  }

  // 関数を実行する
  procExe()(); //テストです

  // 関数の戻り値を確認
  console.log(procExe());
  // ƒ writeLog() {
  //   console.log("テストです");
  // }
</script>

9行目は、3行目のwriteLog関数を戻り値にしています。
13行目は、procExeの後にかっこ()が2つあります。
1つ目のかっこ()で、8行目のprocExe()を実行して、writeLog関数を取得し、2つ目のかっこ()でwriteLog関数を実行しています。
16行目は、procExe()を実行して取得するwriteLog関数を表示しています。内容は17-19行目のコメントの部分です。