【JavaScript】高階関数に入門してみて【サンプルコードあり】

どーも、ぐるたか@guru_takaです。

JavaScript の高階関数について調べたので、備忘録も兼ねて学習したことをまとめました。高階関数について学び始めた方の参考になれば幸いです！

スポンサードリンク

高階関数とは？
高階関数の具体例
最後に
参考リンク

高階関数とは？

高階関数とは、関数を引数、もしくは戻り値として扱う関数です。高階関数を使用することで、汎用性が高まり、再利用しやすくなります。

例えば、配列操作でよく用いる Array.map や Array.forEach なども高階関数です。

サンプルコード

const nums = [1, 2, 3]

nums.forEach((num) => {
  // 処理
})

forEach メソッドの引数が (num) => {} となっており、無名関数が渡されています。実は、高階関数は身近にあったのです！

高階関数の具体例

実際に、高階関数を自作してみましょう！まず、同じメソッドを指定回数だけ繰り返す高階関数を定義していきます。

コードは以下の通りです。

サンプルコード

const greet = () => {
  console.log('Hello')
}

const repeatFunc = (count, func) => {
  for (let i = 0; i < count; i++) {
    func()
  }
}

repeatFunc(5, greet)

実行結果

Hello
Hello
Hello
Hello
Hello

続いて、戻り値を関数とする高階関数を自作します。ここでは、実行する度にカウントアップする高階関数を定義します。

サンプルコードは以下の通りです。

サンプルコード

const makeCounter = (initVal) => {
  let count = initVal
  return () => {
    return count++
  }
}

const counter1 = makeCounter(0)
const counter2 = makeCounter(5)

console.log(counter1())
console.log(counter1())
console.log(counter1())

console.log(counter2())
console.log(counter2())
console.log(counter2())

実行結果

// counter_1
0
1
2
// counter_2
5
6
7

関数を戻り値とすることで、関数内の状態 state（今回であれば、count）を外部から操作できなくなり、堅牢性が増します。

また、引数ありの関数を戻り値にすることも可能です。上記では +1 カウントアップする高階関数を定義しましたが、ステップ数を引数で変更できるようにすると、以下のようになります！

サンプルコード

const makeCounter = (initVal) => {
  let count = initVal
  return (steps = 1) => (count += steps)
}

const counter1 = makeCounter(0)

console.log(counter1())
console.log(counter1(2))
console.log(counter1(3))

実行結果