Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Transduce over any Iteratable Collection

    Paul FrendPaul Frend

    So far we've been transducing by manually calling .reduce() on arrays, but we want to be able to transduce over other collection types as well.

    In this lesson we'll create a transduce function to support transducing over any data structure that implements the es2015 iterable protocol. We’ll put it to the test by transducing over strings and maps, as well as going from one collection type as input to another as output.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Let's begin by parameterizing our previous transduction. Everything that's going on up here, we want to put into a new function. Let's call this transduce, and we want this to do exactly what we're doing above.

    00:13 It will take some arguments, and then perform the same thing. The first argument will be our transform. If this is our transducers, which could be composed, then we'll take our inner reducer, which is this guy, and then we'll take our initial seed, and finally, our collection.

    00:32 This is our initial seed, and this is our collection. Then we'll just put these pieces together again. We will reduce over our collection, calling our transform with our reducer and our seed. Let's try this out. First, we'll just paste in the transducers we created from before.

    00:51 Then I will call transduce, and I'll put these on separate lines. Let's create our transform. We'll use is not two filter, is even filter, and double map. We'll use our push reducer as the inner reducer, an empty array as our seed value, and one, two, three, four as our collection.

    01:14 Let's verify the result. We see we're left with the value eight, which is the same as we got before. Now, we've black boxed our iteration, meaning the fact that this transduce function iterates through the collection with a call to reduce is hidden from the consumer of this function.

    01:32 That's the first step to making this transduce function reusable across different collection types. At the moment, it will only work with a collection that has a reduce method. That's the interface that we've coupled ourselves to. The rest, we're in control of through all the arguments.

    01:47 Now, let's make it more generic, so that we can transduce over any iterable. To manage this, we're going to recreate reduce, but as a for-of loop. Let's comment out this line, and then we're just going to loop through our collection.

    02:00 We know we want to build up an accumulation, so let's start by capturing that in a variable. We also know we want this accumulation to start off as the value of our seed. Then let's create our loop. In here, we just want to build up our accumulation.

    02:18 The value of this accumulation is going to be the result of calling a transform with our reducer, which creates our transformed reducer. Then we will call that with our accumulation and our value. However, creating this transformed reducer has the same output every time.

    02:38 Let's extract that to a variable. We'll call that TransformedReducer, and let's define that up here. As the final step, we just want to return our accumulation. Now, since we're using this for-of loop, we're no longer coupled to working with arrays.

    02:56 Instead, we can use it with anything that implements the iterable protocol. The iterable protocol was added with ES2015, and the types that support it are maps, sets, arrays, and strings. Let's put it to test with a string.

    03:11 First, let's verify that it still works with our array, let's look at the same result as before. Then let's do a transduction that changes a lowercase string to the uppercase version. We need to our toUpper transformer, and then we can call transduce.

    03:27 We want our map transducer with the toUpper transformer. As the inner reducer, we just want a simple string addition. The accumulation here would be the string. The value will be a character. The new accumulation will be the string, plus the character.

    03:44 The seed value will be an empty string. Let's use the name as Adrian as our collection. Let's see how that works. As expected, we get our uppercase version of Adrian back. That works, but let's make it a bit more complex, and add filtering logic to only include vowels.

    04:01 Let's create an isVowel predicate. That will take a character, and I'm just going to paste in the vowels here. It will return true if our character is included in those vowels. Let's add that into our transduce call. Now, we can see that reflected in the result.

    04:24 As another example, let's keep working with the same composition we did down here, but with a map as the collection type instead of an array. Let's create our new map up here. I'm just going to paste in some values.

    04:38 Then instead of our array, let's use our map. We can't, however, use the map as it is. We have to specify if we want to iterate through the values or the keys. Let's use the values. Let's see if this works. Just like before, we get our result back of eight.

    04:54 This is pretty cool, because what's important to understand here is that the call to values does not create an array. It creates an iterable. This iterable doesn't have a reduce function. We can prove that by trying to call it.

    05:07 If we call num.Map.values, and then we try and call reduce, you can see we get an error saying that reduce is not a function. The reason we can transduce over it is purely because we rewrote our transducer helpers to iterate with the for-of loop, instead of calling reduce.

    05:24 Another thing that's pretty cool is that we're going from one collection type in our map into another collection type as our output, which is our array.

    Discuss

    Discuss