Reusable Functions in JavaScript- Currying

The web has been updating and changing rapidly since it’s creation. One of the pros of working as a developer is the joy of learning new frameworks constantly. In today’s trend, programming is becoming more modular and dynamic.

With the rise of React and Angular 2, components are quickly taking over the web. This type of code organization brings to my mind the power of currying in Javascript. So what exactly is currying?

Currying

A simple definition of currying is: The breaking down of a function that takes multiple arguments into functions that can take one or more of those arguments. Those broken down functions will pass arguments that provide the necessary data to run logic from the original function. The original function’s logic in most cases stays the same, thus making the functions like reusable components. Before I go further, let’s see some examples.

const t = a => b => c => a + b + c;
console.log(t(1)(2)(3));
// 6

The example above shows three functions that each hold one argument and return each other. The final function returns a simple math logic that returns a value. This power can be reused when assigned to other variables with additional logic and more complex data. For example, if you are working in an application that uses the same logic with different inputs, then currying is a great choice.

const one = document.getElementById('one');
const t = a => b => c => a.addEventListener(b, (event) => {
  event.target.style.color = c;
});
t(one)('click')('red');

As you can see in this example, this functionality is dynamic in the fact that it can be reused in many different formats. I have found multiple use cases for this type of programming.

const objects = [{ id: 1 }, { id: 2 }, { id: 3 }];
const getIds = (objects) => objects.map( (o) => o.id );
getIds(objects);  
// [1, 2, 3]

Here is another code snippet where the function “getIds” can be used dynamically throughout your code base.

The Catches

It is important to note that when trying to execute a curried function, all parameters in the original function have to be fulfilled in order to work. For example, if we ran the first code snippet with only two arguments…

const t = a => b => c => a + b + c;
console.log(t(1)(2));
// function(c) {return a + b + c}

or

const t = a => b => c => a + b + c;
console.log(t(1)(2)();
// NaN

There are libraries such as Ramda that enhance this functionality and provide work arounds of the gotchas. Another popular one is Functional.js, that works similar to Ramada. However I have found that it is usually better to avoid the extra bytes and create your own curry functions as you go along.

Conclusion

Currying is a powerful way to dynamically create functional programming. Reusability of code is the present and future web organization. This mindset might take a moment longer in the beginning but can save you a lot of time in the end.