WEBVTT 1 00:00:01.260 --> 00:00:03.030 To finish this section, 2 00:00:03.030 --> 00:00:05.220 let's now go back to a few methods 3 00:00:05.220 --> 00:00:07.500 that we say are destructive 4 00:00:07.500 --> 00:00:11.430 because these methods mutate the original array. 5 00:00:11.430 --> 00:00:14.250 And in particular, we're gonna look at the methods 6 00:00:14.250 --> 00:00:16.860 reverse, sort, and splice, 7 00:00:16.860 --> 00:00:19.320 because all of these actually mutate 8 00:00:19.320 --> 00:00:21.750 the original underlaying array. 9 00:00:21.750 --> 00:00:24.360 And so we're gonna explore some more modern 10 00:00:24.360 --> 00:00:27.030 alternatives to these methods. 11 00:00:27.030 --> 00:00:30.030 And this is necessary because oftentimes, 12 00:00:30.030 --> 00:00:32.640 and actually most of the times 13 00:00:32.640 --> 00:00:35.760 we do not want to mutate the original array. 14 00:00:35.760 --> 00:00:38.670 And so that's why now in modern JavaScript, 15 00:00:38.670 --> 00:00:40.470 we have some alternatives. 16 00:00:40.470 --> 00:00:44.493 And so let's look at these alternatives one by one now. 17 00:00:45.900 --> 00:00:49.080 And we're gonna start with reversing an array, 18 00:00:49.080 --> 00:00:50.710 which remember we can use 19 00:00:52.200 --> 00:00:55.950 the reverse method on an array. 20 00:00:55.950 --> 00:00:57.063 So just like this. 21 00:00:58.050 --> 00:01:00.210 Let's also store this in some variable. 22 00:01:00.210 --> 00:01:01.843 Let's say reversedMov, 23 00:01:04.020 --> 00:01:05.073 like this. 24 00:01:06.390 --> 00:01:07.650 All right. 25 00:01:07.650 --> 00:01:09.660 But then watch what happens 26 00:01:09.660 --> 00:01:12.720 as we log the original array. 27 00:01:12.720 --> 00:01:15.870 So the movements before and after 28 00:01:15.870 --> 00:01:17.793 the reversing operation here. 29 00:01:18.900 --> 00:01:22.410 So can you guess what's gonna happen in these logs? 30 00:01:22.410 --> 00:01:25.413 And actually let's also log the reversed movement. 31 00:01:29.340 --> 00:01:32.640 All right, and so here we have all three results. 32 00:01:32.640 --> 00:01:34.680 So this is, of course, the original array. 33 00:01:34.680 --> 00:01:36.360 Then we have the reverse one. 34 00:01:36.360 --> 00:01:39.390 So nothing strange here, that's just the result 35 00:01:39.390 --> 00:01:40.800 of doing the operation. 36 00:01:40.800 --> 00:01:43.200 But then last here in the end, 37 00:01:43.200 --> 00:01:45.510 we again log the original array. 38 00:01:45.510 --> 00:01:49.110 But as you see, this one has also been reversed, 39 00:01:49.110 --> 00:01:52.590 meaning that the original underlaying data structure 40 00:01:52.590 --> 00:01:54.540 has actually been mutated. 41 00:01:54.540 --> 00:01:57.000 And as I just mentioned in the introduction, 42 00:01:57.000 --> 00:01:59.580 many times, this is not what we want. 43 00:01:59.580 --> 00:02:02.430 So again, the reverse method here 44 00:02:02.430 --> 00:02:04.140 is a destructive method 45 00:02:04.140 --> 00:02:07.230 because it did indeed destroy basically 46 00:02:07.230 --> 00:02:09.630 the original movements array. 47 00:02:09.630 --> 00:02:12.660 And many times, this is not what we want. 48 00:02:12.660 --> 00:02:15.480 So we want to basically preserve the original 49 00:02:15.480 --> 00:02:18.360 and here, essentially, taking a copy. 50 00:02:18.360 --> 00:02:22.440 So we could actually achieve that by using the slice method. 51 00:02:22.440 --> 00:02:24.300 And I think we've done this before. 52 00:02:24.300 --> 00:02:28.590 And so then we would actually get the result that we want. 53 00:02:28.590 --> 00:02:32.760 So only reversed movements would now be reversed, 54 00:02:32.760 --> 00:02:35.580 but the original would remain untouched. 55 00:02:35.580 --> 00:02:37.020 But instead of doing this, 56 00:02:37.020 --> 00:02:41.340 we now have a nice small quality of life improvement, 57 00:02:41.340 --> 00:02:43.740 which is the toReversed method. 58 00:02:43.740 --> 00:02:46.590 So that method will basically just replace 59 00:02:46.590 --> 00:02:48.600 these two steps in one. 60 00:02:48.600 --> 00:02:49.433 So toReversed 61 00:02:51.810 --> 00:02:54.270 like this and there we go. 62 00:02:54.270 --> 00:02:56.340 So we get, again, the same result 63 00:02:56.340 --> 00:02:58.860 as before where the original data structure 64 00:02:58.860 --> 00:03:00.990 has not been touched. 65 00:03:00.990 --> 00:03:03.780 All right, now we also have two other 66 00:03:03.780 --> 00:03:05.370 non-destructive versions, 67 00:03:05.370 --> 00:03:09.363 which are the toSorted method instead of sort. 68 00:03:10.770 --> 00:03:14.310 So the one that we actually talked about a moment ago. 69 00:03:14.310 --> 00:03:18.540 And then we also have toSpliced, 70 00:03:18.540 --> 00:03:21.720 which replaces the splice method, 71 00:03:21.720 --> 00:03:24.240 which is also a destructive method. 72 00:03:24.240 --> 00:03:26.880 So these two work just exactly the same way 73 00:03:26.880 --> 00:03:28.470 as their originals. 74 00:03:28.470 --> 00:03:31.230 So toSpliced works in the same way as splice 75 00:03:31.230 --> 00:03:34.050 and toSorted works in the same way as sort. 76 00:03:34.050 --> 00:03:36.030 But the only difference that, again, 77 00:03:36.030 --> 00:03:39.780 they will not touch the original array and leave it intact. 78 00:03:39.780 --> 00:03:43.380 So there's no need to go over these two here now again, 79 00:03:43.380 --> 00:03:46.080 because you already know how it works. 80 00:03:46.080 --> 00:03:48.090 There is, however, one completely 81 00:03:48.090 --> 00:03:50.280 new non-destructive method, 82 00:03:50.280 --> 00:03:53.790 which we can use toChange elements in an array. 83 00:03:53.790 --> 00:03:57.510 And again, without changing the original one. 84 00:03:57.510 --> 00:04:01.650 So let's start with the destructive way. 85 00:04:01.650 --> 00:04:03.690 And remember that if we want to change 86 00:04:03.690 --> 00:04:07.530 a value in an array, we just do it like this. 87 00:04:07.530 --> 00:04:09.090 So we say movements, 88 00:04:09.090 --> 00:04:10.830 and let's say that we want to change 89 00:04:10.830 --> 00:04:13.320 the second element to something else. 90 00:04:13.320 --> 00:04:15.060 So zero and one. 91 00:04:15.060 --> 00:04:17.520 So this one here, this 450, 92 00:04:17.520 --> 00:04:21.720 let's say we want to change this to 200. 93 00:04:21.720 --> 00:04:26.720 So at position [1] should become two, or let's say 2000. 94 00:04:27.120 --> 00:04:30.903 So if we do this, let's move this one down here actually. 95 00:04:31.860 --> 00:04:33.340 So if we do this here 96 00:04:34.260 --> 00:04:37.890 and then log the movements array to the console again, 97 00:04:37.890 --> 00:04:41.370 then indeed that array has been updated. 98 00:04:41.370 --> 00:04:43.950 And at this position number one here, 99 00:04:43.950 --> 00:04:45.810 now the value is 2000. 100 00:04:45.810 --> 00:04:49.110 So once again, we did mutate the original array. 101 00:04:49.110 --> 00:04:51.240 Now if we do not want to do that, 102 00:04:51.240 --> 00:04:54.210 so if you want to keep the original intact, 103 00:04:54.210 --> 00:04:58.110 then we have now an alternative method of doing this. 104 00:04:58.110 --> 00:05:01.383 So instead of doing this, let's comment it out. 105 00:05:02.430 --> 00:05:04.350 We can create a brand new array, 106 00:05:04.350 --> 00:05:07.440 let's call it newMovements. 107 00:05:07.440 --> 00:05:10.500 And then we use the movements array. 108 00:05:10.500 --> 00:05:13.710 And then there we call the with method. 109 00:05:13.710 --> 00:05:18.030 So not copyWithin, but really like this. 110 00:05:18.030 --> 00:05:20.280 And so here, this receives two arguments 111 00:05:20.280 --> 00:05:22.320 where the first one is the index 112 00:05:22.320 --> 00:05:25.020 that we want to update in this new array. 113 00:05:25.020 --> 00:05:26.880 So that's again number one. 114 00:05:26.880 --> 00:05:29.760 And then the new value is 2000. 115 00:05:29.760 --> 00:05:33.150 So basically this reads like we want the movement array, 116 00:05:33.150 --> 00:05:37.647 but with position number one updated to 2000. 117 00:05:37.647 --> 00:05:41.200 And so let's log this to the console 118 00:05:43.440 --> 00:05:45.600 so we get our newMovements. 119 00:05:45.600 --> 00:05:49.140 And so this newMovements, we'll now get this new value 120 00:05:49.140 --> 00:05:51.570 of 2000 here at position one. 121 00:05:51.570 --> 00:05:54.150 But then again, the original stays intact, 122 00:05:54.150 --> 00:05:56.910 so it hasn't been updated here in this position. 123 00:05:56.910 --> 00:05:58.413 It's still 450.