Immutable Update Operation Solution

[00:00:00]
>> Anjana Vakil: Let's continue with our update. So again, we have in JavaScript this syntax for updating an array in place by assigning to the array element at that index. What can we do? We can use some of these non mutating array methods to help ourselves out here. Would anyone like to share with me how they would approach this updating?

[00:00:31]
This is a little trickier.
>> Speaker 2: I mapped it.
>> Anjana Vakil: Okay, we could map, and I don't know if we have access to our helpers here, so let's just use a radop map, which is again not mutating, and then what do we pass in?
>> Speaker 2: I put in the item and then the index.

[00:00:56]
>> Anjana Vakil: Okay, so if you're used to writing map functions that look like this, like item to item, which I think most of us are. Don't forget, you also have the option in JavaScript map input functions, the transformer functions. If you add another variable here that will be given the index of each element.

[00:01:20]
So, we can then use that to check if it's the correct index by checking the value of i. So if i is the index that we're interested in,
>> Speaker 2: Then return the value, otherwise, just the normal item.
>> Anjana Vakil: No, sorry, value. You're right. So if I, if we are at the stage in our mapping where we have reached the index that we are interested in, forget that original item and just return the value and otherwise return the original item.

[00:01:58]
>> Anjana Vakil: Sounds good to me.
>> Speaker 3: Say we have one more suggestion from the chat that kind of mirrors the push to run a statement where it spreads over the array.slice from zero to the index, then includes the value and then includes the spreaded array from the index to the end.

[00:02:22]
>> Anjana Vakil: Okay, I think I'm picking up what you're putting down. So it'd be something like return new array. Let's say we can make a like items before or like, items before is array.slice
>> Speaker 3: From zero to the index.
>> Anjana Vakil: From zero to the given index. So that's gonna stop right before that index.

[00:02:47]
And then the items after would be array.slice.
>> Speaker 4: Index plus 1.
>> Anjana Vakil: Index plus 1. Because we want the things after the index, not the thing at the index. So if we split up this array, we've isolated there's one thing in the array that I care about, one index in the array that I care about.

[00:03:14]
I want to capture everything in the array that was before that, and everything in the array that was after that, and then what I can do is spread those out. Now, if I did this.
>> Anjana Vakil: I would not be satisfying the spec, because where's the updated value? So I need to put that right in between them.

[00:03:46]
Yeah, is this the solution that we had?
>> Speaker 5: Yep, that's what they had in there.
>> Anjana Vakil: Cool, and I do I need these variables items before, items after? No, I could also just do this directly in that line and so on and forth. But that's just a question of readability.

[00:04:06]
So, these are legit ways to do this. And the point of this exercise, [LAUGH], is to get us thinking carefully about when we're mutating data and when we are not. So, am I going to demand that you only use this update function instead of assigning things to the square bracket notation of the, no.

[00:04:30]
But I do think it's a great idea in JavaScript or any other place to make sure that you know what of the features of the language or built-ins or libraries or whatever that you're using are messing with your data and which ones are copying it. So that you can be assured the old one will never get messed up.

[00:04:53]
So, I just clicked the Solve button here to show you another possible way we could do this. It's very similar to that spread one that we just saw, which is to kinda chain these calls together, which you might see this kind of array and then dot this, and then dot that and then dot the other thing.

[00:05:14]
You might be used to seeing that a lot in your code, right? This is a way that we can essentially pipe information through multiple functions if we know that these methods take in, let's say, in this case, slice takes in an array and returns an array, and so does concat, and so does map.

[00:05:34]
If we through a reduced in the middle of here, where now I've just got one value instead of a whole array. That might get a little confusing, but as long as we are working on the same types of data. We can kinda chain these method calls together to essentially create a functional pipeline without having to flip our code around in our minds, and without having to indulge on in exercises where we implement our own functional utilities.

[00:06:08]
[LAUGH] So this is also another way that you might have solved it, but basically all the same idea.