【JavaScript初心者向け】JavaScriptの高階関数について　～関数型プログラミングの第一歩～

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、配列を反復処理するメソッドをご紹介しました。

今回は、配列の反復処理にも用いられている、「高階関数(HOF)」というキーワードについてご説明いたします。

この記事を読むと、高階関数の考え方と使用例が分かるよ！

はじめに
高階関数とは
Reactでの高階関数の利用について
まとめ

高階関数とは

高階関数(High Order Function)とは、「関数を引数にしたり、関数を戻り値とする関数」のことを言います。

「関数を引数に」という点は、前回の記事で登場したmap()やfilter()がちょうど当てはまりますね！

ちなみに、同じ記事で登場したpush()メソッドは当てはまりません。

より理解を深めるため、例文を見てみましょう。

const hof = (fn, num1) => num2 => fn(num1 + num2);

const plusThreeDouble = hof(n => n * 2, 3);

const result = plusThreeDouble(4);  // --> 14

関数fn1は、引数に関数と数値(num1)の2つをとります。戻り値は、「引数に数値(num2)をとり、(num1)と(num2)を足してから実行する関数」です。一文だとわかりにくいですね。。

関数fn2にどのような関数が入っているか見てみましょう。

plusThreeDouble = hof(n => n * 2, 3);
// ↓
plusThreeDouble = num2 => (num2 + 3) * 2;

このように、関数fn2は、「引数に数値(num2)をとり、3(num1)とnum2を足してから『×2を実行する(hof)』」関数であるとわかります。上記ソースのnum2に7をいれると、(4 + 3) * 2 = 14 となるかと思います。

このことにどのような意味があるんだろう、と思われる方も多いかと思います。が、使いこなすと便利なものなのです。(わたしはまだ十分使いこなせていませんが、、)

Reactでの高階関数の利用について

高階関数の利用例として、Reactの関数コンポーネントを紹介したいと思います。

今までの内容とだいぶ離れてしまいますが、ご了承ください。

import * as React from 'react';
const HelloWorld= () => <span>Hello World</span>;

const wrapByH1= (Wrapped) => <h1><Wrapped /></h1>;

export default wrapByH1(HelloWorld);  // --> <h1><span>Hello World</span></h1>

上記では、関数コンポーネントHelloWorldを、関数wrapByH1でラップしています。

wrapByH1は、引数にコンポーネント(クラス・関数を問わない)をとり、それ

で囲んだものを返します。

wrapByH1が、上記で説明した「引数に関数をとる」関数にあたりますね。

まとめ

今回は、JavaScriptの高階関数についてご説明しました。

私が考える高階関数のメリットとしては、

「基本の関数を作り、それを拡張する方針であるため、同じ処理は基本の関数にまとめることができ、ソース量の削減につながる」

といったところかと思います。どんどん作っていきましょう。

次回の記事では、今回の内容の続きである「カリー化」と「関数の部分適用」についてご紹介できればと思います。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)