Jonas: To finish this section,
let's now go back to a few methods
that we say are destructive
because these methods mutate the original array.
And in particular, we're gonna look at the methods
reverse, sort, and splice,
because all of these actually mutate
the original underlaying array.
And so we're gonna explore some more modern
alternatives to these methods.
And this is necessary because oftentimes,
and actually most of the times
we do not want to mutate the original array.
And so that's why now in modern JavaScript,
we have some alternatives.
And so let's look at these alternatives one by one now.
And we're gonna start with reversing an array,
which remember we can use
the reverse method on an array.
So just like this.
Let's also store this in some variable.
Let's say reversedMov,
like this.
All right.
But then watch what happens
as we log the original array.
So the movements before and after
the reversing operation here.
So can you guess what's gonna happen in these logs?
And actually let's also log the reversed movement.
All right, and so here we have all three results.
So this is, of course, the original array.
Then we have the reverse one.
So nothing strange here, that's just the result
of doing the operation.
But then last here in the end,
we again log the original array.
But as you see, this one has also been reversed,
meaning that the original underlaying data structure
has actually been mutated.
And as I just mentioned in the introduction,
many times, this is not what we want.
So again, the reverse method here
is a destructive method
because it did indeed destroy basically
the original movements array.
And many times, this is not what we want.
So we want to basically preserve the original
and here, essentially, taking a copy.
So we could actually achieve that by using the slice method.
And I think we've done this before.
And so then we would actually get the result that we want.
So only reversed movements would now be reversed,
but the original would remain untouched.
But instead of doing this,
we now have a nice small quality of life improvement,
which is the toReversed method.
So that method will basically just replace
these two steps in one.
So toReversed
like this and there we go.
So we get, again, the same result
as before where the original data structure
has not been touched.
All right, now we also have two other
non-destructive versions,
which are the toSorted method instead of sort.
So the one that we actually talked about a moment ago.
And then we also have toSpliced,
which replaces the splice method,
which is also a destructive method.
So these two work just exactly the same way
as their originals.
So toSpliced works in the same way as splice
and toSorted works in the same way as sort.
But the only difference that, again,
they will not touch the original array and leave it intact.
So there's no need to go over these two here now again,
because you already know how it works.
There is, however, one completely
new non-destructive method,
which we can use toChange elements in an array.
And again, without changing the original one.
So let's start with the destructive way.
And remember that if we want to change
a value in an array, we just do it like this.
So we say movements,
and let's say that we want to change
the second element to something else.
So zero and one.
So this one here, this 450,
let's say we want to change this to 200.
So at position [1] should become two, or let's say 2000.
So if we do this, let's move this one down here actually.
So if we do this here
and then log the movements array to the console again,
then indeed that array has been updated.
And at this position number one here,
now the value is 2000.
So once again, we did mutate the original array.
Now if we do not want to do that,
so if you want to keep the original intact,
then we have now an alternative method of doing this.
So instead of doing this, let's comment it out.
We can create a brand new array,
let's call it newMovements.
And then we use the movements array.
And then there we call the with method.
So not copyWithin, but really like this.
And so here, this receives two arguments
where the first one is the index
that we want to update in this new array.
So that's again number one.
And then the new value is 2000.
So basically this reads like we want the movement array,
but with position number one updated to 2000.
And so let's log this to the console
so we get our newMovements.
And so this newMovements, we'll now get this new value
of 2000 here at position one.
But then again, the original stays intact,
so it hasn't been updated here in this position.
It's still 450.