Javascript初心者が自分なりに高階関数を解説してみた

Javascriptを勉強している人たちの多くがつまづくであろう 高階関数 、自分もその例外ではなく最初は全く理解ができませんでした。

ここではその高階関数を自分なりに説明してみました、もし間違えていたり変な部分があればご指摘いただけたら恐縮です。

---

高階関数とは

高階関数とは関数を引数、戻り値に使う関数のことです。

例えば関数には引数をセットし、宣言時にそこに値または変数を入れ渡すことができます。

function test(a, b){
  console.log(a + b);
}

const num1 = 10;
const num2 = 5;

test(num1, num2); // 実行結果: 15

また、関数式によって変数に関数を代入することもできますね。

const test = (a,b) => { //変数testに関数を代入している
  console.log(a + b);
}

高階関数は、引数に関数(を代入した変数)を渡して呼び出してやろうと言うわけです。

コードを書いてみた

// 高階関数
const quiz = (answer, callback) => {
  answer = parseInt(answer); // 入力された文字を数字に変換
  let result;
  if(isNaN(answer)){ // 入力された文字が数字以外の場合反応する
    result = '数字を入力してください';
  } else if(answer === 1){
    result = '正解です!';
  } else {
    result = '不正解です!';
  }
  callback(result);　//callbackにresultを返す（代入する）
}

// resultを出力するための関数式
const outputResult = result => {
  console.log(result);
}

// 文字入力用の変数
const inputAnswer = prompt('1 + 1 = ?');

quiz(inputAnswer,outputResult);

// outputResultを使わず直接引数内に関数式を記入する書き方もできます
quiz(inputAnswer, (result) =>{
  console.log(result);
});

サンプル(codepen)

ここでは、まず最初に高階関数、次に高階関数の引数となる関数を定義しています。
この高階関数quizは、入力した文字によって引数に代入される文字を変える処理を持っています。

次に、代入された引数を出力する処理を持つ関数outputResult、最後に文字を入力する処理をもつ変数inputAnswerを用意しました。
最後に高階関数の引数に関数を設定することで、それぞれの機能をまとめた処理をすることができるようになるました。
また、高階関数の引数に直接関数を記入しても問題なく機能します。

それと、高階関数内で、最後に関数に引数を渡していますが、こういった処理のことをコールバック関数と言います。詳しくはまた別の記事で書こうかと、、、