はじめに
こんにちは、かずん(@kazoonLab)です。
前回の記事では、JavaScriptの高階関数についてご紹介しました。
今回は、前回の記事の続きで、JavaScriptの「カリー化」と「関数の部分適用」についてご紹介します。

この記事を読むと、JavaScriptのカリー化関数と関数の部分適用についてわかるよ!/p>
カリー化とは
カリー化の説明の前に、まず高階関数の復習から入りましょう。
高階関数とは、「関数を引数にしたり、関数を戻り値とする関数」のことです。サンプルコードを見てみましょう。
const hof = function (m) { return function (n) { return m + n; } } // アロー関数で書いてみる const hofArrow = m => { return n => { return m + n } } // return をなくしてシンプルに const hofSimple = m => n => m + n; // hofSimpleを呼び出す console.log(hofSimple(3)(4)); // --> 7
関数hofは、引数にnをとり、「引数にmをとり、n+mの結果を返す関数」を返します。
関数hofArrowはアロー関数を使って書いた形、関数hofSimpleはそこからreturnを省略した形です。できるだけシンプルな形で書いていきましょう。
ところで、hofSimpleを呼び出すとき、(3)(4)と引数が2つ続いていることにお気づきでしょうか。
hofSimple(3)が「nを引数にとり、n + 3を返す関数」なため、もうひとつ引数(n)が必要になります。(ここでは、n = 4を代入しています。)
このように、高階関数の引数を一つずつ返していって、引数が複数つながっている状態にすることを「カリー化」と呼びます。
続いて、カリー化された関数の部分適用について見ていきましょう。
関数の部分適用とは
const curry = m => n => m + n; // 2を足す関数 const plusTwo = curry(2); console.log(plusTwo(3)); // --> 5 (2 + 3) console.log(plusTwo(5)); // --> 7 (2 + 5) // 5を足す関数 const plusFive = curry(5);
今回は、関数curryの引数mに2が入ったとき、その戻り値をplusTwoという変数に代入(=関数に名前をつけている)しています。
この時、関数plusTwo(n)は「引数nをとり、2 + nを返す関数」になりますね。
このように、カリー化された関数の任意の引数を固定し、別の関数を作ることを「関数の部分適用」といいます。
サンプルコードでは、他にも5を足す関数plusFive(n)を定義しています。当然、7を足す関数、9を足す関数も関数curry(m)(n)を使って定義できますね。
どんなところで使う?
一見便利そうだなあと思うんですが、使いどころは難しいですね。。
例えばReactだと、Material UI のwithStyles()なんかが高階関数にあたります。
const styles = { comp: { fontSize: 12, } } const Wrapped = () => <p className={classes.root}>wrapped</p> export default withStyles(styles)(Wrapped);
最初の引数であてたいstyleを、次の引数であて先のコンポーネントを指定しています。
styleが固定なら、withStyles(style)を変数に代入して、各コンポーネントでimport/exportして使いまわすことができる、、とかでしょうかね。
自分自身でもよりいい例が見つかったら、この記事は更新していこうかと思います。
最後までご覧いただきありがとうございます。
この記事がいいなっと思ったら読者登録をお願いいたします♪
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)