Currying in JavaScript

No, I’m not talking about food 😜

First of all, currying is not just a JavaScript concept. Currying is a concept everyone must know when working with functional programming!

Before understanding currying you have to have a clear concept of what a pure function is.

Pure Functions

Pure functions can be simply defined as a function that given a specific input it will always return the same output. For instance,

// ES5 syntax
const multiplyByTwo = function(numberToMultiply) {
  return numberToMultiply * 2;
};

// ES6 arrow function expanded syntax
const multiplyByTwo = (numberToMultiply) => {
  return numberToMultiply * 2
};

// ES6 reduced syntax (used when the function has just one line)
const multiplyByTwo = (numberToMultiply) => numberToMultiply * 2;

console.log(multiplyByTwo(2)) // 4

As you can see, you can call the multiplyByTwo() function as many times as you want and you will always get the same result, it doesn’t matter if you call that function today, tomorrow or in one year, it will always produce the same result.

This is merely a basic explanation about pure functions. There is more behind them. For more info check my previous article about pure functions.

Back to currying

In simple words, currying is just the action of calling the function produced as a result of another function. It basically looks like this,

const num = 1;

console.log(add(1)); // (num2) => num1 + num2

console.log(add(1)(1)); // 2

You might be wondering what does add do?, or why does add(1)(1) have two pair of parenthesis instead of just two arguments?. This is just because add is a function that returns a function. So we are calling the function returned by add. That’s called currying!

Currying is really powerful because it allows you to compose different functions with a basic behavior and without repeating code. Let’s see the definition of our add function and the definition of a ‘normal’ add function,

const normalAdd = (num1, num2) => num1 + num2;

const add = (num1) => (num2) => nun1+ num2;

So now you might be thinking that the normalAdd approach is clearer and more straightforward, but our curried add version has a power hidden inside!

With our curried add function we could compose an increment or decrement function as follows,

const incrementByOne = add(1);

const decrementByOne = add(-1);

console.log(incrementByOne(3)); // 4

console.log(decrementByOne(3)); // 2

As you can see, we were able to create 2 new specific functions using our previously created function add.

Thanks to currying we can compose new functions with a specific implementation. Of course the example mentioned above is quite simple, but with currying you can compose more elaborated functions. For instance, React uses this composition pattern all the time with High Order Components.

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

In other words a HOC in React is a function that returns another function (just like our add function!) adding some properties to the function that is being passed into the HOC.

Conclusion

Currying allows us to compose simpler base functions into more specific functions. Using currying in your applications will allow you not to only create reusable code, but start getting used to some of the concepts of functional programming.

An awesome book to learn more about functional programming: https://www.amazon.com/-/es/gp/product/1661212565/ref=dbs_a_def_rwt_bibl_vppi_i0