WEBVTT 1 00:00:01.260 --> 00:00:02.760 So I have counted, 2 00:00:02.760 --> 00:00:04.800 and since the beginning of the course, 3 00:00:04.800 --> 00:00:09.180 we have learned a total of 30 different array methods. 4 00:00:09.180 --> 00:00:10.980 That's pretty incredible. 5 00:00:10.980 --> 00:00:13.230 But it makes sense, because arrays 6 00:00:13.230 --> 00:00:17.670 are probably the most used data structure in JavaScript. 7 00:00:17.670 --> 00:00:20.130 We use arrays really all the time 8 00:00:20.130 --> 00:00:22.710 when we work with data in JavaScript. 9 00:00:22.710 --> 00:00:24.870 And so we need to be able to perform 10 00:00:24.870 --> 00:00:27.720 all kinds of operations with them. 11 00:00:27.720 --> 00:00:29.670 Now, the problem is that choosing 12 00:00:29.670 --> 00:00:33.210 between 30 different methods is not always easy, 13 00:00:33.210 --> 00:00:35.430 especially when you just started learning 14 00:00:35.430 --> 00:00:37.860 about them like you have. 15 00:00:37.860 --> 00:00:40.740 So most likely, in your mind right now, 16 00:00:40.740 --> 00:00:44.220 there is a big confusion between all these methods, 17 00:00:44.220 --> 00:00:48.060 and especially about when to use each of them. 18 00:00:48.060 --> 00:00:51.840 And so to help you with that, I created this summary lecture 19 00:00:51.840 --> 00:00:55.530 with all 30 array methods, plus some other techniques 20 00:00:55.530 --> 00:00:58.230 to work with array that we've also learned 21 00:00:58.230 --> 00:01:01.623 throughout this section and some previous one. 22 00:01:02.910 --> 00:01:05.580 Now, I believe that the best way to figure out 23 00:01:05.580 --> 00:01:08.580 which method to use in each situation 24 00:01:08.580 --> 00:01:10.740 is by starting to ask the question, 25 00:01:10.740 --> 00:01:14.550 what do I actually want from this method? 26 00:01:14.550 --> 00:01:17.220 Do I want to mutate the original array, 27 00:01:17.220 --> 00:01:21.540 or do I want a new array based on the original one? 28 00:01:21.540 --> 00:01:23.700 Do I want an array index, 29 00:01:23.700 --> 00:01:27.570 or do I want to retrieve an entire array element? 30 00:01:27.570 --> 00:01:31.650 Or do I want to know if an array includes a certain element, 31 00:01:31.650 --> 00:01:34.890 or maybe I just want to get a new string 32 00:01:34.890 --> 00:01:37.740 to transform the array to a new value 33 00:01:37.740 --> 00:01:40.800 or simply loop over the array? 34 00:01:40.800 --> 00:01:43.260 And by asking these different questions, 35 00:01:43.260 --> 00:01:45.510 we can now categorize the methods 36 00:01:45.510 --> 00:01:48.090 and easily choose between them. 37 00:01:48.090 --> 00:01:51.840 So this is kind of a decision framework that I developed. 38 00:01:51.840 --> 00:01:53.370 And so let me go briefly 39 00:01:53.370 --> 00:01:57.030 through all of these different scenarios with you. 40 00:01:57.030 --> 00:01:59.730 First off, if we want to add an element 41 00:01:59.730 --> 00:02:04.170 to the original array, we can use 'push' or 'unshift.' 42 00:02:04.170 --> 00:02:06.690 And we already talked about all of these methods, 43 00:02:06.690 --> 00:02:09.300 so of course, I will not explain them again. 44 00:02:09.300 --> 00:02:12.270 This is just a reference for you to keep. 45 00:02:12.270 --> 00:02:15.900 Now anyway, if we want to remove from the original, 46 00:02:15.900 --> 00:02:19.530 then we use either 'pop,' 'shift,' or 'splice.' 47 00:02:19.530 --> 00:02:23.550 And finally, we also talked about these three other methods 48 00:02:23.550 --> 00:02:26.460 that mutate the original array as well, 49 00:02:26.460 --> 00:02:30.870 which are the 'reverse,' 'sort,' and 'fill' methods. 50 00:02:30.870 --> 00:02:34.980 Okay, now keep in mind that with all these methods here, 51 00:02:34.980 --> 00:02:38.340 you have to be very careful, because they do change 52 00:02:38.340 --> 00:02:41.580 the underlying array that you're working with, 53 00:02:41.580 --> 00:02:44.910 and that, many times, is not what we want. 54 00:02:44.910 --> 00:02:47.490 In fact, these methods should actually 55 00:02:47.490 --> 00:02:49.470 mostly be avoided these days, 56 00:02:49.470 --> 00:02:51.900 because JavaScript development is moving 57 00:02:51.900 --> 00:02:56.130 more and more into a direction of using a more functional, 58 00:02:56.130 --> 00:02:59.520 non-destructive approach, where instead of mutating 59 00:02:59.520 --> 00:03:04.140 the original data structures, we simply create new ones. 60 00:03:04.140 --> 00:03:07.440 And speaking of creating a new array 61 00:03:07.440 --> 00:03:09.360 based on the original array, 62 00:03:09.360 --> 00:03:13.920 the most straightforward method here is the 'map' method. 63 00:03:13.920 --> 00:03:16.170 And this one we use all the time, 64 00:03:16.170 --> 00:03:18.540 as it loops over the original array 65 00:03:18.540 --> 00:03:23.280 and creates a new one with the same length of the original. 66 00:03:23.280 --> 00:03:25.680 So one very nice trick to decide 67 00:03:25.680 --> 00:03:28.770 whether we want to use the map method or not 68 00:03:28.770 --> 00:03:31.650 is to ask ourselves, should the new array 69 00:03:31.650 --> 00:03:35.160 have the exact same length as the old one? 70 00:03:35.160 --> 00:03:36.690 And if the answer is yes, 71 00:03:36.690 --> 00:03:40.200 then we probably need the map method. 72 00:03:40.200 --> 00:03:43.920 We can also create new arrays by filtering for a condition, 73 00:03:43.920 --> 00:03:47.160 or by taking a slice of the original array. 74 00:03:47.160 --> 00:03:50.640 So basically, just a piece of the original. 75 00:03:50.640 --> 00:03:54.720 If we want a new array where one of the items is different, 76 00:03:54.720 --> 00:03:59.160 so where it's replaced, we use the width method. 77 00:03:59.160 --> 00:04:01.710 We can also flatten the original array 78 00:04:01.710 --> 00:04:03.837 by using 'flat' and 'flatMap.' 79 00:04:04.860 --> 00:04:08.640 Now, three very important of the mutating methods, 80 00:04:08.640 --> 00:04:11.040 which we also call destructive methods 81 00:04:11.040 --> 00:04:14.010 are reverse, sort, and splice. 82 00:04:14.010 --> 00:04:18.120 But what if we do not want to change the original array? 83 00:04:18.120 --> 00:04:21.434 Well, then we can use the new 'toReversed,' 84 00:04:21.434 --> 00:04:24.900 'toSorted,' and 'toSpliced' methods, 85 00:04:24.900 --> 00:04:28.170 which will all return brand new arrays. 86 00:04:28.170 --> 00:04:30.330 Finally, we can also concatenate 87 00:04:30.330 --> 00:04:34.113 or join two arrays using the concat method. 88 00:04:35.160 --> 00:04:37.230 Alright, now next up, 89 00:04:37.230 --> 00:04:40.290 sometimes what we need is an array index. 90 00:04:40.290 --> 00:04:43.120 And for that, we have the index of findIndex 91 00:04:43.992 --> 00:04:46.980 and findLastIndex methods. 92 00:04:46.980 --> 00:04:49.740 Now, the difference between them is that findIndex 93 00:04:49.740 --> 00:04:52.650 and findLastIndex can basically search 94 00:04:52.650 --> 00:04:56.280 for an element in the array based on a test condition 95 00:04:56.280 --> 00:04:59.160 that we can provide in the callback function. 96 00:04:59.160 --> 00:05:01.680 But besides that, they are pretty similar. 97 00:05:01.680 --> 00:05:06.210 And both give us the index of a certain element in an array. 98 00:05:06.210 --> 00:05:09.900 Now, if we actually need the array element itself, 99 00:05:09.900 --> 00:05:12.150 again, based on a test condition, 100 00:05:12.150 --> 00:05:15.930 then we can use the 'find' or 'findLast' method. 101 00:05:15.930 --> 00:05:17.850 And so these ones are pretty similar 102 00:05:17.850 --> 00:05:20.700 to 'findIndex' and 'findLastIndex,' 103 00:05:20.700 --> 00:05:23.220 but instead of just giving the index, 104 00:05:23.220 --> 00:05:27.270 they gave us the entire element that we're looking for. 105 00:05:27.270 --> 00:05:32.270 So in practice, 'find' and 'findLast' are a bit more useful. 106 00:05:32.370 --> 00:05:35.790 But what if we already know the position of the element 107 00:05:35.790 --> 00:05:38.340 that we want to get from the array? 108 00:05:38.340 --> 00:05:41.220 Well, then we can just use the 'at' method, 109 00:05:41.220 --> 00:05:43.350 which will do the exact same thing 110 00:05:43.350 --> 00:05:47.250 as using square brackets to retrieve an element. 111 00:05:47.250 --> 00:05:50.460 Next up, sometimes it's pretty helpful to know 112 00:05:50.460 --> 00:05:54.000 whether an array includes a certain element or not. 113 00:05:54.000 --> 00:05:58.260 And for that, we have 'includes,' 'some,' and 'every.' 114 00:05:58.260 --> 00:06:00.750 So with 'includes,' we can simply test 115 00:06:00.750 --> 00:06:03.480 whether an array contains a single value, 116 00:06:03.480 --> 00:06:06.510 while on the other hand, with 'some' and 'every,' 117 00:06:06.510 --> 00:06:11.100 we can specify a test condition based on a callback again. 118 00:06:11.100 --> 00:06:13.950 So the 'some' method is gonna return true 119 00:06:13.950 --> 00:06:16.530 if at least one of the elements in the array 120 00:06:16.530 --> 00:06:18.600 satisfies the condition. 121 00:06:18.600 --> 00:06:21.720 And the 'every' method only returns true 122 00:06:21.720 --> 00:06:25.530 if all of the elements satisfy the condition. 123 00:06:25.530 --> 00:06:29.490 So these three methods all return a Boolean value, 124 00:06:29.490 --> 00:06:33.210 which is very helpful in something like an if-else statement 125 00:06:33.210 --> 00:06:35.220 or a turn array operator. 126 00:06:35.220 --> 00:06:37.440 So that's where you many times will use 127 00:06:37.440 --> 00:06:39.360 one of these methods. 128 00:06:39.360 --> 00:06:41.430 Alright, next, sometimes, 129 00:06:41.430 --> 00:06:45.510 all we want is to just transform an array into a string. 130 00:06:45.510 --> 00:06:49.470 And for that, we use the very simple 'join' method, 131 00:06:49.470 --> 00:06:52.200 or we might want to reduce the entire array 132 00:06:52.200 --> 00:06:55.680 to just one value, no matter if that's a string 133 00:06:55.680 --> 00:06:57.360 or any other type. 134 00:06:57.360 --> 00:06:58.890 And as we already know, 135 00:06:58.890 --> 00:07:01.800 for that, we use the 'reduce' method. 136 00:07:01.800 --> 00:07:05.220 So in the 'reduce' method, we use an accumulator, 137 00:07:05.220 --> 00:07:08.010 which we can think of as like a snowball, 138 00:07:08.010 --> 00:07:09.930 which accumulates all the values 139 00:07:09.930 --> 00:07:13.920 of an entire array into just one single value. 140 00:07:13.920 --> 00:07:17.400 And that value can actually be of any type. 141 00:07:17.400 --> 00:07:19.920 So it can be a number, string Boolean, 142 00:07:19.920 --> 00:07:24.390 or even a new array or a new object now, all right? 143 00:07:24.390 --> 00:07:27.510 And so in fact, we could actually replace 144 00:07:27.510 --> 00:07:31.470 most of these methods that we have here with a 'reduce,' 145 00:07:31.470 --> 00:07:35.460 but we don't do that because it's a lot more work to do so. 146 00:07:35.460 --> 00:07:38.460 But in theory, we could just use a 'reduce.' 147 00:07:38.460 --> 00:07:41.160 For example, 'for' and 'includes,' 148 00:07:41.160 --> 00:07:44.973 or really, most of the other methods that we have here. 149 00:07:45.870 --> 00:07:49.410 Now finally, if all we want to do is to just loop 150 00:07:49.410 --> 00:07:53.190 over an array without producing any new value, 151 00:07:53.190 --> 00:07:55.560 we use the 'forEach' method. 152 00:07:55.560 --> 00:07:59.250 So remember, this one does not create a new array, 153 00:07:59.250 --> 00:08:02.940 and in fact, it doesn't create any new value at all. 154 00:08:02.940 --> 00:08:06.240 All we do in the 'forEach' method is to basically 155 00:08:06.240 --> 00:08:10.260 just do some work but not produce a new value. 156 00:08:10.260 --> 00:08:12.210 All right, and that's it. 157 00:08:12.210 --> 00:08:15.450 That's an overview of all the 30 array methods 158 00:08:15.450 --> 00:08:16.680 that we talked about. 159 00:08:16.680 --> 00:08:18.060 And it might be a good idea 160 00:08:18.060 --> 00:08:20.670 to somehow keep this overview handy. 161 00:08:20.670 --> 00:08:23.550 For example, you can print it out on a paper 162 00:08:23.550 --> 00:08:27.030 or just store it somewhere on your computer. 163 00:08:27.030 --> 00:08:30.480 But we're actually not done with this video yet, 164 00:08:30.480 --> 00:08:32.850 because I also want to briefly summarize 165 00:08:32.850 --> 00:08:35.430 the additional array tool and techniques 166 00:08:35.430 --> 00:08:39.090 that we learned throughout this section and a previous one, 167 00:08:39.090 --> 00:08:42.630 but which aren't exactly array methods. 168 00:08:42.630 --> 00:08:46.290 So first of all, besides all the array operations 169 00:08:46.290 --> 00:08:49.320 that we just looked at, we can also group arrays 170 00:08:49.320 --> 00:08:50.760 by different categories 171 00:08:50.760 --> 00:08:54.780 by leveraging the Object.groupBy function. 172 00:08:54.780 --> 00:08:58.080 So again, this isn't technically an array method, 173 00:08:58.080 --> 00:09:02.580 which is why it's on this separate slide for array tools. 174 00:09:02.580 --> 00:09:05.820 Now, if we want to create a new array from scratch, 175 00:09:05.820 --> 00:09:07.410 we have two options. 176 00:09:07.410 --> 00:09:11.040 First, we can use the Array.from function 177 00:09:11.040 --> 00:09:14.730 where we pass in the desired length and a map callback 178 00:09:14.730 --> 00:09:16.410 to fill up the new array 179 00:09:16.410 --> 00:09:19.620 as we learned in one of the previous videos. 180 00:09:19.620 --> 00:09:21.780 And this is the preferred way 181 00:09:21.780 --> 00:09:24.450 of creating a new array from scratch. 182 00:09:24.450 --> 00:09:28.710 But we can also use the array constructor with new array 183 00:09:28.710 --> 00:09:31.290 and pass in the number of empty elements 184 00:09:31.290 --> 00:09:33.270 that this array should have. 185 00:09:33.270 --> 00:09:34.890 We can then remember, 186 00:09:34.890 --> 00:09:39.090 fill up this empty array using the fill method. 187 00:09:39.090 --> 00:09:40.920 Now, in an earlier section, 188 00:09:40.920 --> 00:09:43.740 we learned that besides the concat method, 189 00:09:43.740 --> 00:09:46.740 we can also use the spread operator like this 190 00:09:46.740 --> 00:09:50.793 in order to join two or more arrays into a brand new one. 191 00:09:51.750 --> 00:09:55.530 Now, if we want to get all the unique values of an array, 192 00:09:55.530 --> 00:09:59.130 we can place them into a new set, just like this, 193 00:09:59.130 --> 00:10:03.540 and then again, spread the result into a brand new array. 194 00:10:03.540 --> 00:10:06.300 And now finally, here comes the most complex 195 00:10:06.300 --> 00:10:07.860 technique of all. 196 00:10:07.860 --> 00:10:10.380 So if we want to find all elements 197 00:10:10.380 --> 00:10:12.870 that are present in two arrays, 198 00:10:12.870 --> 00:10:16.200 then we can again convert them into sets, 199 00:10:16.200 --> 00:10:19.140 use the intersection method on the set, 200 00:10:19.140 --> 00:10:20.760 and then spread the result 201 00:10:20.760 --> 00:10:23.850 into a brand new array once again. 202 00:10:23.850 --> 00:10:27.390 So these are just a few more ways to work with arrays 203 00:10:27.390 --> 00:10:29.820 that you should always keep in mind. 204 00:10:29.820 --> 00:10:32.880 Now, okay, and with this, we're finally done 205 00:10:32.880 --> 00:10:34.500 with this summary lecture. 206 00:10:34.500 --> 00:10:38.280 Even though it's a summary, it still runs pretty long. 207 00:10:38.280 --> 00:10:41.130 So now, all that's left to do in this section 208 00:10:41.130 --> 00:10:43.710 is to complete the final coding challenge. 209 00:10:43.710 --> 00:10:45.633 And so let's do that next.