What is JavaScript Function Currying?

[00:00] You may think it's a little weird to write a function which you would call and then call with that returns and then call with that returns. It'd be like one, two, and three where the implementation would be my function is a single argument. That's going to return another function with an argument and another one. Then, all of that combined would be A plus B plus C.

[00:25] Basically, these line up this one and this A and this two and this B and this three and this C, and we add them altogether. You would see the result of this is just going to be result. Hit Save. We get six since that's just one plus two three.

[00:49] Where this gets interesting to you is when you do, we'll change this to A, add event listener and then B will be our element and then add our callback which is an event which says event.target.style.backgroundcolor equals C, and delete this down here.

[01:16] Now, instead of one, two, and three, we'll look up our element which we have one here and we'll say one click and the color red. We don't need this. We don't need that. Now, hit Save. When I click on this, it turns red.

[01:36] Now, where this gets really interesting is if I take all of these off and I instead just return a function. I'll call this one event color. Now, in my one event color function, I can call mouse over and blue. Hit Save. I'll come over and mouse over this and it turns blue.

[02:03] Our original function definition hasn't changed at all. We still have A, B, C which is A, B, and C which is now A, B, and C. It's just that at this point, now we can do things like two, two, and two event color, say mouse out and green. Hit Save.

[02:29] We'll mouse out of two and mouse into one. We've created functions that represent what we want to do. We just have to pass in the event and the color.

[02:37] We can make this style of program even easier by using libraries like Ramda which I've imported as R. Instead of this style where it's parameter, function, parameter, function, parameter, function, I'll just delete all of that. Say R curry and that's going to take a function where I can say A, B, C and then the function block inside of there can be our original function block. I'll hit Save and you'll see that it still works the same.

[03:08] Because our signature here is actually different, it's just three parameters, I can say F and then one and then click and then purple. Hit Save. I'll come and click one and it turns purple because now it's just three parameters. I don't have to call that function, calling function, calling function.

[03:28] Where this gets amazing is doing things with placeholders where I say R dot underscore, underscore. That's a placeholder which means that now we can have a click purple function. That's expecting one more parameter which is this placeholder.

[03:45] We can say click purple one and click purple two. It's going to pass one and two in as this missing placeholder parameter. When I come in and click on one and click on two, we've turned each of those elements purple.

[04:03] You can even put in multiple placeholders. If I turn this into a placeholder, and I'll rename this from click purple to just click. Come down here, say one, green, two, orange, hit Save. Click on one, click on two, and we have a great, little function where we just pass in an element and a color and it handles everything else for us.

[04:29] This is what currying allows us to do. It allows to break apart these pieces like A, B, and C from the implementation or the block inside of our function, pull them out into parameters and then pull those out into individual functions where we can add things like placeholders and create additional functions from those. It gives us a crazy amount of flexibility to create any sort of function to represent what's going on inside of here.

[04:56] While the definition of currying is just breaking down a function that takes multiple arguments into functions that can take one or more of those arguments. The actual definition isn't as important as realizing what it allows you to do when pulling apart these arguments into individual functions and making them these reusable pieces of logic.

[05:16] The last thing to note is that you could write your own curry function. Its implementation is only a few lines of code and it's available in a few libraries. Currying is also built in to other functional programming languages. That's why it might be a bit difficult to wrap your head around what's going on when you're not used to reading functions in this curried style.