LoginSignup
4
3

More than 5 years have passed since last update.

[javascript] Javascriptでカレーを作る

Last updated at Posted at 2018-02-16

カレーを食べたくて入ってきた方々には申し訳ありませんが、:bow: :bow: :bow:

残念ながら、ここで言うカレーは インド料理のカレーではない です。
たまたま カレーの英単語と同じスペル(Curry)になっているだけです。 :bow: :bow: :bow:

カレー(Curry) とは

ラムダ式を使って 複数引数を持つ関数単一引数の関数に変換(Recuce)する手法です。
名前は、Haskell B. Curry. という方の名字( Curry )を取ったものです。

手法なので、Curry が動詞化され、正確には Currying と呼びます。

式で表すと、

f(n, m) --> f'(n)(m)

になります。

実例

  • f(n, m)
multiply = (n, m) => (n * m)
multiply(3, 4) === 12 // true
  • f'(n)(m)
curryedMultiply = (n) => ( (m) => multiply(n, m) )
triple = curryedMultiply(3)
triple(4) === 12 // true

どこで使われているの?

例をあげてみましょう :expressionless:

JavaScript Bind

Function.prototype.bind() 実は currying で実現されています。

increment = add.bind(undefined, 1)
increment(4) === 5

React and Redux

react-redux の connect() 関数が一番 カレー的 かもしれないですね。

export default connect(mapStateToProps)(TodoApp)

Event Handling

const handleChange = (fieldName) => (event) => {
  saveField(fieldName, event.target.value)
}
<input type="text" onChange={handleChange('email')} ... />

Rendering HTML

enderHtmlTag = tagName => content => `<${tagName}>${content}</${tagName}>`

renderDiv = renderHtmlTag('div')
renderH1 = renderHtmlTag('h1')

Curryingの逆

当然、Curryingの逆となっている Uncurrying というのがあります。

式と実例も Currying のと逆ですが、

f(n)(m) --> f'(n, m)

実例

curryedMultiply = (n) => (m) => n * m
curryedMultiply(3)(4) === 12 // true

multiply = (n, m) => curryedMultiply(n)(m)
multiply(3, 4) === 12 // true

参考になったリンク

[javascript] Javascriptでカレーを作る | AI Fan 愛飯 (音量注意)
Currying in JavaScript ES6 – Bene Studio

4
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3