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

JavaScriptの引数または戻り値が関数のサンプルです。

目次	引数または戻り値が関数の関数
	引数が関数のサンプル
	引数が関数と関数の引数の場合
	戻り値が関数のサンプル

引数または戻り値が関数の関数

引数または戻り値に関数を使用する関数は高階関数と呼ばれます。
以下は、wikiの高階関数のリンクです。
https://ja.wikipedia.org/wiki/%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0

引数が関数のサンプル

<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行目のコメントの部分です。