All language subtitles for 13. Working With Immutable Arrays

In React.

Many operations need to be immutable, so operations where we do not manipulate the underlying data

structure.

And so therefore it's quite important to know how to add element to arrays, how to delete elements

and also to update elements all without mutating the original underlying array.

Now, these techniques that we're going to learn here are absolutely essential for React development.

But the good news is that they always work in the same way.

And so if you understand here how it works, then you will be well prepared for the rest of the course.

So as I mentioned, what we want to do here is to learn how to add elements, how to delete elements,

and how to update elements of an array without changing the original one.

And so once again, we are going to work with our array of books.

So an array of objects, which really is the most common thing.

So the most common data structure that we're going to find when we work with data on the front end.

So let's say first.

Add a book object.

To array.

Let's start by creating this new book object here, actually.

So this one is going to be the number six here.

The title.

Should be.

Harry Potter and.

The Chamber of Secrets.

Secrets.

What is still wrong.

And then the author.

Is J.

K.

Rolling.

So we already have one Harry Potter book in the array.

And so now here we add another one.

And in fact, we did already learn how we create a new array based on an original array and then adding

some other element.

So we talked about that right at the beginning of this section when we talked about the spread.

Operator.

Remember that?

So let's say books then after.

Adding, let's say, or after Add.

And so all we need to do is to spread all the books here into this newly created array and then simply

add.

Another book.

So another object.

And then if we take a look at this.

Right here.

You see that?

Now we have six of them.

And the last one is this one that we just created.

And again, we could add this also to the beginning.

So right here.

But it's most common to simply add a new book right to the end of the array.

So this one was quite easy.

Now let's delete a book.

So delete a book.

Object from array.

So again, this is always going to work in the exact same way, no matter how the objects look like.

Well, as long as they have an ID, which they usually have.

So now let's create a new array again.

So always new arrays.

We need always to not mutate anything but create new arrays.

Now, in practice, these operations would be abstracted away into some functions.

So, for example, we would create a function called add book and delete book and update book instead

of creating all these arrays like this.

But of course, this is just to illustrate the idea and the technique.

All right.

So books after delete will be a new array after deleting one of the book objects.

So we will basically now create a new array based on books after Add, which we just created, and now

we are going to use one of our array methods.

And so let's together think about this.

So we want to delete a book.

And so after deleting, the array will be shorter than before.

And so which of the array methods makes an array shorter than it was before?

Well, that's right.

It's the filter array.

Right.

So when we filter out something, then the new array will be shorter.

So let's filter.

And once again, each element here is a book.

And so in this case, let's say we want to delete the book with the ID number three.

And so we can say book.id is different from three.

And that's actually it.

Let's take a look at that.

So this one has id2 and the next one has number four.

So three is no longer there.

Great.

So why did this work?

Well, because of what we already learned before.

So whenever this condition here in the callback returns a false value, then that object will not be

in the final array.

So if we want to delete the book with the ID three, basically what we want is to include in the final

array all the books where the ID is different from three.

Right.

Because again, whenever this condition here is actually true, the object will end up in the final

filtered array.

And so the easiest way of thinking about this is to actually write a condition which does place the

objects into the new array.

And so again, that happens whenever the book ID is different than three because when it is three,

we want to delete it.

And so that's exactly what happened here.

As we saw here in the result.

Great.

And again, we would usually create a function called delete book, and then that function would receive

this ID here, and then here we would simply use that ID like this.

But here we are simply like manually deleting the one with the ID of three.

So again, just to illustrate how it all works.

And so now let's in the final stage.

Update a book object.

Well, in the array.

So books, let's say, after update.

And we're going to do it on the books after delete.

So it's like chaining all of this here one after another.

But we're we're storing the intermediate result inside variables.

And again, let's think about what array method we need here.

So after updating one of the book objects, the resulting array should have the exact same length as

before.

Right?

And so which method produces an array which has the same length as before?

Yes, that's the map method.

So map is our choice.

Whenever we want to update an object that is inside an array.

Okay, so here we now need our ternary operator.

Because we of course, don't want to do anything for most of the books.

We only want to update exactly one book object, which is the one with the ID that we're looking for.

So let's imagine we want to update the book with the ID of one.

Then let's say book.id.

If it is one, then return an updated object, which for now let's just write an empty object temporarily.

But if not, well, then simply return the book as it is so without any changes.

And that's simply book.

Right.

So let's already look at the result here just to see that something happened.

So again, we are trying to update the book with the ID of one.

And so now this one here is indeed just an empty object because this was the one where book ID was equal

to one.

So it was equal to one.

And so therefore then what was returned from this callback function was this empty object, which is

what we see here.

But for all the other ones, it simply returned the original object.

So then nothing changed.

No.

Right.

But of course, we don't want to return this empty object, but we want to return an object which has

an updated property.

And in fact, we already learned how to do that.

Way back again using the spread operator.

So remember, we simply spread out the current book object into this object.

So this newly created object.

So we take basically all of the properties into this new object and then we can simply overwrite one

of them.

Let's say we want pages again.

12.

110.

Let's just do something a bit more dramatic just to see the result a bit better.

And so.

Yeah.

Now we have only one page here while everything else again remains unaffected.

Let's put it to 1210.

And there we go.

So we updated one property in one object of the array.

And this is again something that we do all the time.

And so you just basically need to memorize this recipe right here.

So when we want to add a new object to an array, we do this, we create a new array, spread the current

elements, and add the new element.

When we want to delete one, we use filter because filter makes the resulting array shorter.

Then we simply keep all the book elements.

So all the book objects where the ID is different than the one we want to delete and to update.

We use the map method because the map method creates an array which has the exact same length as the

original.

And so then when we are at the ID that we're looking for so that we want to manipulate, then we create

a new object and overwrite the property that we want to manipulate.

And for all the other books, we simply return the book unchanged.