Curried Functions in JavaScript: Simplified
Practical examples & explanation on how to curry in JavaScript
How many times have you written an awesome, highly used function that has a lot of parameters? And how many times have you consumed that function with a nearly identical set of inputs?
Something like this:
Notice each invocation of our function has a long string of inputs that are almost all the same?
Our code works, but it’s messy and hard for us to follow even though we just wrote it and it’s fresh in our mind. Not only that, if it’s hard for us right now, that means we can forget about archeologist programmers in the future being able to understand and maintain it. There must be a better way.
Behold! The curried function!
Instead of creating a single function with a boat-load of parameters, we have the ability to chain our parameters together into a series of functions that return functions until the very last one which returns a value.
Let’s start with a really simple, classic example. We need to create a function that adds two numbers together so we write something like this:
A curried version of this function would look like this:
You can see that the curried add function does not return a value, but instead returns another function that accepts a parameter y.
We can simplify our curried function even more by removing the closure:
const add = x => y => x + y;That’s a cool trick, but what’s the point?
The power comes in assigning parts of your curry to a constant and invoking it later. For example:
We’ve created a new fivePlus function that already has the first argument of 5 prebuilt and ready to go. The function just needs to be invoked with the second argument to execute and have a value returned.
If we refactor our myFunc function in our original example to a curried function, we get:
That looks so much cleaner and will be much easier for our future selves or counterparts to read and maintain.
I’d also like to point out that you’re not locked into having only single parameter functions in your chain. You can do anything you want! Anything!
This example starts with two parameters, that returns a function with one, that returns a function with two, that finally returns the value. Structure them in whatever way that makes the most sense in your app.
Does all the work have to happen at the end?
Actually, no! Check this out:
We’re actually performing operations along the way. The other thing to note from this example is that, because of JavaScript closure, all parameters are in scope at their level and lower. You can see this in action where x is used as part of the calculation in the final return.
We did it!
We’ve illustrated in a few simple examples of the power of curried functions and how they can be used as a tool to simplify your code to make it more readable and maintainable.
