A practical example on how to use Currying in Javascript

A lot of times I see explanations of concepts in X language that, while I get what they do, I think "where the hell I can use that?".
Or some other times the examples used are too theoretical that it makes hard for you to understand when to use it in your day-to-day coding.

One of those concepts that I found confusing in the past was Currying.

If you don't know what Currying is, essentially is a programming technique where you take a function with multiple arguments, and you turn it into smaller sequential functions where you pass one argument at a time.

And you will probably see some examples like this one:

// your normal functionconst add = (a, b) => {  return a + b;}console.log(add(1,2)); // 3// using curryingconst add = (a) =>{  return (b) => {    return a + b;  }}console.log(add(1)(2)); // 3

And if you are like me, you are probably thinking "why on earth I should use the second case?".

And the answer is that you shouldn't.

But not because currying is pointless, is just because that example is rather unpractical in my opinion.

When you should use currying

Now, let's say that we have an array of objects, something like this:

const list = [  {    id: 1,    name: 'Steve',    email: '[email protected]',  },  {    id: 2,    name: 'John',    email: '[email protected]',  },  {    id: 3,    name: 'Pamela',    email: '[email protected]',  },  {    id: 4,    name: 'Liz',    email: '[email protected]',  },];

And you want to remove one of the objects if a specific property matches a value, for example if the object name property is equal "John", you want to filter it out.
The simplest way is to do it in this way:

const noJohn = list.filter(item => item.name !== 'John');console.log(noJohn);/**[  { id: 1, name: 'Steve', email: '[email protected]' },  { id: 3, name: 'Pamela', email: '[email protected]' },  { id: 4, name: 'Liz', email: '[email protected]' }]*/

That works, but it's not reusable because you are hardcoding the name you want to remove.
A better way is to wrap it into a function and pass the name as an argument:

const filterByName = (list, name) => {  return list.filter(item => item.name !== name);}console.log(filterByName(list, 'John'));/**[  { id: 1, name: 'Steve', email: '[email protected]' },  { id: 3, name: 'Pamela', email: '[email protected]' },  { id: 4, name: 'Liz', email: '[email protected]' }]*

Now, imagine that you are going to use the same filter function in two or more places in the same code, or maybe you want to keep the code DRY and you want to place the filtering in a variable on its own. You could try this:

const filtering = item => item.name !== name;const filterByName = (list, name) => {  return list.filter(filtering);}

But the above will throw you an error as the filtering will have no clue of what name is.

And here is where currying comes to action!

So you will need to change the above code to this:

// we add another function on top of the previousconst filtering = (name) => (item) => item.name !== name;const filterByName = (list, name) => {  return list.filter(filtering(name));}console.log(filterByName(list, 'John'));/**[  { id: 1, name: 'Steve', email: '[email protected]' },  { id: 3, name: 'Pamela', email: '[email protected]' },  { id: 4, name: 'Liz', email: '[email protected]' }]*

So what happened? The filtering function, has a top layer function, that accept the name as input, then return a new function that then accept the item as argument.

Then the filter function will run the result of the filtering(name), which is a function, and it will pass down the item.

If we use the old fashion function syntax, for old timers like me, it would be translated to something like this:

function filterByName(list, name) {  return list.filter(function(nameToFilter) {    // nameToFilter is declared at this point    return function(item) {      // item is declared here      return item.name !== nameToFilter;    }  }(name));}

I hope that this explained a little bit better how currying works in Javascript.