
Lesson Description
The "Implement Map Function Exercise" Lesson is part of the full, Functional JavaScript First Steps, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Students are instructed to implement the map function. This function transforms an array by passing each element to a function passed as an argument. This recursive operation continually calls map while concatenating the head of the array with each subsequent recursive call.
Transcript from the "Implement Map Function Exercise" Lesson
[00:00:00]
>> Anjana Vakil: Let us move on to our next higher order friend, map. Okay, so we have our filter function already done, this time, our task is to fill in the map function and to get the tests to pass. Again, you still have your array helpers down here. Let us put our functional brains to work.
[00:00:24]
>> Anjana Vakil: Same as ever, we've got a recursive function. We need a base case, we need a recursive case. So our base case in this case [LAUGH] might be a similar case to a previous case. [LAUGH] How do I know I'm already done? Well, if there's nothing in my array to map over, so just like before, we can take essentially this same line and just say, if we have nothing in the array, then we're done.
[00:00:54]
We've already mapped over everything in the array, which is nothing. So our base case it remains the same, and now we need our recursive case. So because it's recursive, it's gonna involve some kind of call to map, [LAUGH] which similarly to before is not gonna take in the exact same array value.
[00:01:14]
So what am I gonna pass in to map this time?
>> Speaker 2: The function.
>> Anjana Vakil: The same function, I still wanna be doing the same transformation, exactly. But then instead of array, I'm gonna pass in.
>> Speaker 2: Tail.
>> Anjana Vakil: The tail of the array, tile, okay, right? So the middle part here is what we still have to do.
[00:01:37]
But I'm gonna do a similar thing to what I did here with my filter. And I am going to take whatever that array is of the mapped rest of the OA and smush it together with the transformed value that came out of the array first. Now here, let's try to do this all in one line, just so we can feel like they elite decoders, but also because that means we don't have variables that may or may not change values over time.
[00:02:08]
So, a little bit more functional, a little bit more declarative. So, instead of setting up some variables, I'm gonna return something map, is not yet that thing, I have too many, yeah. And similarly to before, we might wanna use our friend, the concat function, to,
>> Anjana Vakil: Concat something to the beginning of this array.
[00:02:37]
And what that thing is, you will walk me through. We are going to take.
>> Speaker 2: An array?
>> Anjana Vakil: An array with-
>> Speaker 3: Head of an array?
>> Anjana Vakil: The head of our array, but not unmodified.
>> Speaker 2: We wanna call the function on it.
>> Anjana Vakil: We wanna call the function on it, booms, we did it.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops