Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 998 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Create a Reusable Mapping Function with Ramda's Map

3:52 JavaScript lesson by

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable map utility function using manual currying and then we'll replace it with Ramda's map.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable map utility function using manual currying and then we'll replace it with Ramda's map.

Here I have an array of numbers, and I'm using the array's built-in map method to apply a function to each value in that array. In the end my result is a new array that has each one of those original values doubled, and I'm logging it out.

Nw let's say I have a second array of numbers. I'm just going to paste the value in here, and I want to apply the same transformation to this other array.

One of the ways I could handle this, would be to copy what I have, paste it, and I'm going to get say result2, and this is going to be a result of calling the same map with the same function on my second array. Now we'll see it will log out the results of both of those transformations. We also have a lot of duplication, so if we look, the function that we're passing into map here is identical, so we can pull that out into its own function.

I'm going to call this double. I'm just going to set that to equal a reference to this function, so I'll cut that right out of there. Now I can call double in this map. I can replace that second one with a call that double function as well.

I'd like to take this a step further and create a reusable map function. I'm going to come up here, and I'm going to define a constant, I'm going to call it map, and this is going to equal a function, and this function is going to take two arguments.

It's going to take the function that we want to apply to all of our values in the array, and it's going to take the array. Inside our function, all we're going to do is we're going to reuse the map method from our array, and pass in our function. Then of course we need to return that value, so I'll just add a return statement right in front of that, and now we can use this function. All I'm going to do is I'm going to come down here, and instead of calling nums.map, I'm going to call map with my double function, followed by my array.

That still works, and then I can do the same thing for the second one, and we're good. Now making this change didn't really buy us a whole lot, so I'd like to update the map function to give us a little more power. What I'm going to do, is I'm actually going to remove the array from my arguments here. Map is going to be a function that takes the first function, so I'll have map and it will take double.

Then what I'm going to do, is I'm going to have map actually return another function, and that second inner function is going to take the array as an argument. Then inside of that function, we'll return our call to the array.map, applying our function.

What's going to happen now, is I'm going to call map with my double function, and that's going to give me back another function. That second function will take the array, and then it will put everything together for me.

That means I can come down here, and I can say const doubleR, and I can make that a call to map with double, and that will give me a new function that I can call on any array. Now I get my result, but I'm getting that result from a reusable mapping function that just takes in the data. What I'm done here with map, is I've curried this function.

I've basically created a function that returns another function, and that gives me the ability to partially apply this function, so I know that I want to double my numbers, I just don't know what the array is yet, so I can create this reusable function, and then I can call it when I have those arrays that need to be doubled.

Luckily all of Ramda's functions are automatically curried for us, so what I'm going to do is I'm just going to pull in map from Ramda, so I use destructuring here, and I'll grab map from Ramda, and then I can take map out and everything will still work as it did before, except this time I'm using Ramda's generic map function, rather than our own DIY version.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?