Currying in Javascript — arrow function sequence
Tags: functionalprogrammig, programming, javascript
Published: 2019-06-09 06:22:57

---
title: Currying in Javascript — arrow function sequence
published: true
tags: functional-programmig,programming,javascript
canonical_url: 
---

### Currying

> In mathematics and computer science, currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument.  
> (source [wikipedia](https://en.wikipedia.org/wiki/Currying))

### Prologue

Next time you read code that contains a sequence of arrow functions as in the following snippet, don’t freak out. You are not alone!

![](https://cdn-images-1.medium.com/max/1024/1*GmrfdnPto-sfkpUQWL_BRQ.png)

Yes, having a sequence or a chain of arrow functions is hard to read at first but there is a reason why its becoming more popular (checkout [Redux applyMiddleware](http://redux.js.org/docs/api/applyMiddleware.html) as an example) as it allows functional style goodness like passing curried functions to map/reduce functions. Let’s see this means and how we can read it.

### What currying means

Take the following simple _sum_ function as an example. It takes three numeric arguments and returns the sum.

{% gist https://gist.github.com/harouny/8b63d5c7227923b204e4f43b8ed029f5 %}

We can achieve the same result using this syntax (which is not using arrow functions):

{% gist https://gist.github.com/harouny/c95155048bd10c0184a9bc46e01e5ffb %}

Now we have three nested functions each one is taking one argument and returning the following function that takes the next argument, except that last function which is doing the calculation.

#### How to call

Since _sum_ now only takes one argument: _x_, we can call it like this:

> sum(1);  
> // [Function]

However we also know that it returns a function that takes _y_, so we can call it like this:

> sum(1)(5);  
> // [Function]

And we know that that also return a function that takes _z_, so we can call it like this to return the sum of the three numbers:

> sum(1)(5)(6);  
> // 12

#### Why to use

We can now pass curried functions to other functions

> [1, 2, 3, 4].map(sum(1)(5));  
> // [7, 8, 9, 10 ]

#### Rewrite using arrow functions

Now we can also make use of arrow functions to make our functions more concise, and we can still achieve the same result.

{% gist https://gist.github.com/harouny/a082fc25020baa7840134aa2ae434654 %}

[Play with this snippet in babel repl](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Ces2017%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&code=const%20sum%20%3D%20x%20%3D%3E%20y%20%3D%3E%20z%20%3D%3E%20x%20%2B%20y%20%2B%20z%3B%0Aconsole.log(sum(1)(5)(6))%3B)

### How to read

We can split the line into three segments:

#### 1- sum is a function that takes “x” as an argument….

![](https://cdn-images-1.medium.com/max/753/1*O0t8YbipbUWOp5ezPw_VlQ.png)

#### 2- and return a function that takes “y” as an argument…

![](https://cdn-images-1.medium.com/max/751/1*GvlFbD2jiO7_68PXQZd2sQ.png)

#### 3- and return a function that takes “z” as and argument and returns the sum of “x”, “y” and “z”.

![](https://cdn-images-1.medium.com/max/746/1*Yr9gTcvgNAExzofP0E-orQ.png)

### Alternatives

[lodash](https://lodash.com) has a nice [curry](https://lodash.com/docs/4.17.4#curry) function that does exactly the same.