Functional-Light JavaScript, v3

# List Operations Solution: Modify Collection

## Kyle Simpson

You Don't Know JS

### Check out a free preview of the full Functional-Light JavaScript, v3 course

The "List Operations Solution: Modify Collection" Lesson is part of the full, Functional-Light JavaScript, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle live codes the part of the solution that uses list operations to modify a collection of numbers in an array.

Preview
Close
Get \$100 Off
Get \$100 Off!

### Transcript from the "List Operations Solution: Modify Collection" Lesson

[00:00:00]
>> Kyle Simpson: Just for the sake of brevity and our codes I'm not doing all the scrolling I'm gonna go ahead and eliminate those don't worry. All three versions are in the solution file species to be able to see those, okay now item six and the read me said to start with some just come up with some list of numbers I'm just gonna make a list of numbers here.

[00:00:22]
And let's see, and I'll just start typing some numbers 4, 2, 7, 9, 17, 6, 3, 2, 4, 8, 10, 5, 12, 13 I'm just making up a bunch of numbers. Okay, just make a big list of numbers that way we prove to ourselves that this really is working fully intuitively okay?

[00:00:52]
And you notice there's a bunch of duplicates in there so the first item, item six says we need to come up with a unique list of numbers. How are we gonna take a list of numbers and produce it or reduce it down only the unique numbers have been included?

[00:01:09]
Well, there's a couple of different ways of approaching that but since we're talking about least operations, let's think could we use something like a filter? It seems like filter might do the job, the problem with filter is that it only works on an individual discrete value we don't know whether that value is repeated anywhere else because we don't see the built up list.

[00:01:34]
So if we can't do it with a filter the next most powerful tool that we might turn to would be a reduced, okay? Map wouldn't work, because map is gonna produce a new array of the same length of items, and we want a shorter list of items, so since it wasn't gonna be filter, maybe we can do it with a reduce.

[00:01:54]
So let's do it that way, let's do numbers and then .reduce, basically, anytime Napier or filter fails you, you might turn to reduce because it's more powerful. Okay, so let's try a reducer, I'll call it unique and we're gonna have a acc,v which again I'm gonna rename in just a moment but let's think what do we want the end result of our reduction to be?

[00:02:23]
>> Kyle Simpson: We want it to be another list, right? So what's a good initial value for a reduction that's reducing to another list?
>> Kyle Simpson: How about an empty list, okay? So the thing that's coming in here, the accumulator is gonna be our new list so I'm just gonna name it new list and of course, the v that's coming in is our number, okay?

[00:02:46]
So I'll just leave it at v and call it num if you prefer, okay? So how do we decide if num needs to be put into new list?
>> Speaker 2: Check it against the array-
>> Kyle Simpson: If num is not already in new Let's try, so if not, newList.includes num, then let's stuff num into newList, right.

[00:03:19]
>> Kyle Simpson: And then, we definitely need to keep returning newList no matter what even if we didn't push anything in, we need to return new list. Now there should be a red flag going off on your heads right now, what's the red flag?
>> Speaker 3: Mutating array.
>> Kyle Simpson: Yep, we're mutating an array by reference value, that's a bad sign.

[00:03:41]
So let's not mutate it, even though we know in this particular case it's an empty array and it's probably safe just to be practicing this good best practice here, instead of pushing to a new list, let's go ahead and just return a new list with the value having been upended.

[00:03:59]
So I'm gonna say newlist.concat num .concat, if you're not aware of that array method, it actually produces a whole new array with the value array appended onto the end of it. So rather than calling newList.push, we're gonna have newList.concat and that's gonna be returned directly It doesn't mutate it, it creates a new one, so that's why.

[00:04:27]
>> Speaker 4: So it basically, in a sense, does what you did, not right here, but before when you did the spread operator.
>> Kyle Simpson: Yes.
>> Speaker 4: And you made a copy and then-
>> Kyle Simpson: Yes, yep, they're doing that, I could do it that way, yep, we could write it that way, as well.

[00:04:38]
We could say array... NewList, and then just list none That's maybe more syntactically declared, a way of doing it, okay, good question let's test this real quick. Let's move this part over to our little testing round, and-
>> Speaker 5: I'm sorry, isn't that second return unreachable in there, did I miss something?

[00:05:01]
>> Kyle Simpson: No, because it's in an if-statement we have an if statement there so we only do the return of the concatenation otherwise we just return,
>> Speaker 5: Enter, I had missed that it was an if statement,
>> Kyle Simpson: Okay, no problem at all. Let's just test, we know that this thing is gonna give us 35 so I'll just comment that out for a moment, we just wanna see if this is gonna give us a unique list of numbers, And if I scan through real quick we'll see if we see, I don't see any repeats.

[00:05:29]
So it looks like it's giving us a unique list, okay?
>> Kyle Simpson: Okay, so item number 7 in the read me tells us that now that we've got a unique list of numbers, we want to reduce that list or break that list down to only include the evens. What is that operation sound like?

[00:05:55]
Sounds like a filter to me so let's do function only evens or I'll just call it isEven
>> Kyle Simpson: And this is real straightforward, we just simply say v mod 2 = 0, that lets us know and of course, if we already had an isOdd, we could have done the not of isOdd, if you recall back to early in the course on Point free.

[00:06:26]
Alright, so let's add that filter on to the end, so lets move that back over to our test ground and when we do that. What did I do wrong? Oops! There we go.
>> Kyle Simpson: We run the code, and now, you notice that we have only even numbers on the list, okay?

[00:06:52]
So let's go one final time back to item 8 in the read-me, item 8 said, we need to turn all of those numbers which we've now created Into functions, and then pass them to the ad and utility, okay? So how do I take a list of numbers and turn it into a list of functions that are wrapped around those numbers.

[00:07:17]
>> [INAUDIBLE]
>> Kyle Simpson: What's that?
>> Speaker 6: Say that one more time.
>> Kyle Simpson: If I have a list of numbers, and I want to turn that into a list of functions wrapped around those numbers what list operation is that?
>> [INAUDIBLE].
>> Kyle Simpson: Remember our three list operations, we have the reduce, we have the filter, and we have-

[00:07:45]
>> Speaker 3: Map.
>> Kyle Simpson: Map, map takes a list of values and turns it into a new list of transformed values, right? So we wanna take dot map on this array and what is our thing doing? It's needing to make a function that's wrapped around the value if we have been given the value, we need to make a function and return it back but this sounds awfully familiar.

[00:08:08]
It sounds like the function that we're writing here, which is making a function that can remember the value and return it, does that function look like that function? The constant utility, so why don't we just use constant as our mapper. Remember equational reasoning if those functions have the same shape, they are interchangeable so now if we were to run this we're not gonna see much from it.

[00:08:39]
But if we were to pull this over here and run it now we're gonna get an array of functions. We don't know what's in those functions, but we have an array of functions okay, the last thing that we need to do is take that array of functions and pass it into our ad and utility.

[00:09:05]
Let's try that out and we'll copy this over.
>> Kyle Simpson: Let's replace this, and we cross our fingers and it completes itself.
>> Kyle Simpson: By the way, I want to let you in on a little trick, how did I just randomly type out all of those numbers and magically end up with the number 42 having been added?

[00:09:55]
There's a little mathematic trick that I used, all of the even numbers from 2 up to 12 when added together equal to 42. So as long as I make sure in my random list of number generation that 246 810 and 12 show up, I can have as many repeats and as many odds thrown in there as I need to.

[00:10:16]
We're still gonna end up with a summer 42

### Learn Straight from the Experts Who Shape the Modern Web

• In-depth Courses