Alessio Michelini

Posted on Sep 22, 2021 • Edited on Oct 8, 2021

A practical example of how to use Currying in Javascript

#javascript #currying #webdev #programming

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 function
const add = (a, b) => {
  return a + b;
}

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

// using currying
const 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: 'steve@example.com',
  },
  {
    id: 2,
    name: 'John',
    email: 'john@example.com',
  },
  {
    id: 3,
    name: 'Pamela',
    email: 'pam@example.com',
  },
  {
    id: 4,
    name: 'Liz',
    email: 'liz@example.com',
  },
];

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: 'steve@example.com' },
  { id: 3, name: 'Pamela', email: 'pam@example.com' },
  { id: 4, name: 'Liz', email: 'liz@example.com' }
]
*/

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: 'steve@example.com' },
  { id: 3, name: 'Pamela', email: 'pam@example.com' },
  { id: 4, name: 'Liz', email: 'liz@example.com' }
]
*

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 previous
const 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: 'steve@example.com' },
  { id: 3, name: 'Pamela', email: 'pam@example.com' },
  { id: 4, name: 'Liz', email: 'liz@example.com' }
]
*

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.

Top comments (10)

Bob Bass • Sep 23 '21

Wow, I'm a full-time JavaScript developer and I am familiar with currying, if I'm being honest it's something I picked up when I was studying for interviews.

I recall seeing the double arrow function once and not making the connection that it was a curried function.

It's pretty wild to make that connection now.

Alessio Michelini • Sep 23 '21 • Edited

Hi! Yes I know, that's what I would normally do, but I feel that with the limited width of dev.to pages, using the return makes it a bit more readable ;-)
But yeah, in my normal coding I would do as you suggested

Kyle Kravette • Sep 23 '21

Thank you so much for putting this into a practical application! Much easier to read and understand.

Prajwal Jain • Aug 19 '22

Thanks for this awesome blog.
I wanted to know why

**filtering** function does not **look up** in its parent scope where name is present.

Gökhan İpek • Sep 24 '21

Thanks for the article, when learning a new concept there are times when people think like 'okay it looks cool but where/when should I use it' currying is probably one of the top concepts when it comes to this.
I remember thinking of a useful usage case to add to my article that's explaining currying, months ago. I'll bookmark yours and show people when I talk about it next time!

Andrew Pierno • Oct 14 '21 • Edited

This is a solid tutorial, Alessio!
Would you be interested in writing some tutorials for our companies? Happy to pay!
You can either DM me on twitter at twitter.com/AndrewPierno or fill out this little airtable form airtable.com/shrN6S3NMZ7oxRXTt.