1 00:00:01,220 --> 00:00:02,990 So, I did the math, 2 00:00:02,990 --> 00:00:05,060 and since the beginning of the course, 3 00:00:05,060 --> 00:00:09,610 we have studied, exactly 23 different array methods. 4 00:00:09,610 --> 00:00:11,690 And that's really amazing. 5 00:00:11,690 --> 00:00:13,090 And not just because, 6 00:00:13,090 --> 00:00:15,640 23 is my favorite number, 7 00:00:15,640 --> 00:00:17,690 but because that means, 8 00:00:17,690 --> 00:00:21,910 that you cannot do everything you can imagine, with arrays. 9 00:00:21,910 --> 00:00:23,730 Now, the problem is that, 10 00:00:23,730 --> 00:00:26,260 choosing between 23 different methods, 11 00:00:26,260 --> 00:00:28,230 is not always easy. 12 00:00:28,230 --> 00:00:31,560 And especially when you just started learning about them. 13 00:00:31,560 --> 00:00:32,700 Right? 14 00:00:32,700 --> 00:00:35,080 So probably, in your mind right now, 15 00:00:35,080 --> 00:00:37,110 there is a big confusion, 16 00:00:37,110 --> 00:00:39,170 between all these methods, 17 00:00:39,170 --> 00:00:42,390 and about which one to use, when. 18 00:00:42,390 --> 00:00:44,880 So, to help you out with that, 19 00:00:44,880 --> 00:00:47,110 I created this summary lecture, 20 00:00:47,110 --> 00:00:49,663 with all the 23 array methods. 21 00:00:51,850 --> 00:00:54,600 And I believe, that the best way to figure out, 22 00:00:54,600 --> 00:00:56,250 which method to use, 23 00:00:56,250 --> 00:00:57,910 in each situation, 24 00:00:57,910 --> 00:01:00,210 is by starting to ask the question, 25 00:01:00,210 --> 00:01:04,260 what do I actually want from this method? 26 00:01:04,260 --> 00:01:07,560 So do I want to mutate the original array, 27 00:01:07,560 --> 00:01:10,390 or do I want a new array? 28 00:01:10,390 --> 00:01:13,210 Do I maybe want an array index, 29 00:01:13,210 --> 00:01:17,140 or do I want to retrieve an entire array element? 30 00:01:17,140 --> 00:01:18,730 Or do I want to know, 31 00:01:18,730 --> 00:01:21,960 if an array includes, a certain element, 32 00:01:21,960 --> 00:01:24,610 or maybe I just want to get a new string, 33 00:01:24,610 --> 00:01:27,560 to transform the array to a new value, 34 00:01:27,560 --> 00:01:30,023 or simply to loop over the array? 35 00:01:31,180 --> 00:01:34,160 Well, these are a lot of different scenarios, 36 00:01:34,160 --> 00:01:37,060 and by asking exactly these questions, 37 00:01:37,060 --> 00:01:39,430 we can now categorize the methods, 38 00:01:39,430 --> 00:01:42,210 and then easily choose between them. 39 00:01:42,210 --> 00:01:45,190 So this is kind of a framework, that I developed, 40 00:01:45,190 --> 00:01:47,160 and so let me go briefly, 41 00:01:47,160 --> 00:01:49,703 through all of these different scenarios with you. 42 00:01:50,780 --> 00:01:54,880 So these are the methods that mutate the original array. 43 00:01:54,880 --> 00:01:57,240 So if we want to add an element, 44 00:01:57,240 --> 00:01:58,850 to the original array, 45 00:01:58,850 --> 00:02:01,750 we can use push or unshift. 46 00:02:01,750 --> 00:02:04,560 So we already talked about all of these methods, 47 00:02:04,560 --> 00:02:07,280 so of course I will not explain them again, 48 00:02:07,280 --> 00:02:09,330 this is just a reference for you to keep. 49 00:02:10,170 --> 00:02:12,260 Now anyway, if we want to remove, 50 00:02:12,260 --> 00:02:13,510 from the original, 51 00:02:13,510 --> 00:02:14,410 then we use either, 52 00:02:14,410 --> 00:02:16,983 pop, shift or splice. 53 00:02:17,930 --> 00:02:20,240 And finally, we also talked about, 54 00:02:20,240 --> 00:02:23,690 three other methods that mutate the original array, 55 00:02:23,690 --> 00:02:27,547 which is the reverse, sort and fill methods. 56 00:02:27,547 --> 00:02:28,690 Okay. 57 00:02:28,690 --> 00:02:31,080 So keep in mind, that you have to be careful, 58 00:02:31,080 --> 00:02:34,300 because they do change the underlying array, 59 00:02:34,300 --> 00:02:35,630 that we're working with. 60 00:02:35,630 --> 00:02:38,880 And that many times is not what we want. 61 00:02:38,880 --> 00:02:41,600 So if instead, we want a new array, 62 00:02:41,600 --> 00:02:43,893 then we can use one of these methods. 63 00:02:44,750 --> 00:02:46,960 So if we want to calculate one array, 64 00:02:46,960 --> 00:02:50,410 from the original, then we use map methods. 65 00:02:50,410 --> 00:02:52,140 And this one we use all the time, 66 00:02:52,140 --> 00:02:54,480 as it loops over the original array, 67 00:02:54,480 --> 00:02:57,233 and creates a new one, based on that. 68 00:02:58,290 --> 00:03:00,010 We can also create new arrays, 69 00:03:00,010 --> 00:03:02,650 by filtering for a condition, 70 00:03:02,650 --> 00:03:06,030 or by taking a slice of the original array. 71 00:03:06,030 --> 00:03:08,450 We can also concatenate two arrays, 72 00:03:08,450 --> 00:03:11,030 and create a new array based on that, 73 00:03:11,030 --> 00:03:14,060 and finally, we can flatten the original array, 74 00:03:14,060 --> 00:03:16,373 using flat and flatMap. 75 00:03:17,620 --> 00:03:20,670 Next, sometimes we need an array index. 76 00:03:20,670 --> 00:03:21,503 And for that, 77 00:03:21,503 --> 00:03:25,250 we have the indexOf and findIndex methods. 78 00:03:25,250 --> 00:03:26,770 Now the difference between them, 79 00:03:26,770 --> 00:03:30,000 is that findIndex can basically search, 80 00:03:30,000 --> 00:03:31,650 for an element in the array, 81 00:03:31,650 --> 00:03:33,440 based on a test condition, 82 00:03:33,440 --> 00:03:36,240 that we provide, in the callback function. 83 00:03:36,240 --> 00:03:37,320 But besides that, 84 00:03:37,320 --> 00:03:38,510 they are pretty similar, 85 00:03:38,510 --> 00:03:40,180 and both give us the index, 86 00:03:40,180 --> 00:03:43,020 of a certain element in an array. 87 00:03:43,020 --> 00:03:45,894 Now, if we actually need the array element itself, 88 00:03:45,894 --> 00:03:48,750 then we use, the find method. 89 00:03:48,750 --> 00:03:49,780 And so this one again, 90 00:03:49,780 --> 00:03:51,870 is based on a test condition, 91 00:03:51,870 --> 00:03:53,873 specified in a callback function. 92 00:03:54,820 --> 00:03:57,560 Next up, sometimes it's very important to know, 93 00:03:57,560 --> 00:03:59,440 whether an array includes, 94 00:03:59,440 --> 00:04:01,720 a certain element or not. 95 00:04:01,720 --> 00:04:02,740 And for that we have, 96 00:04:02,740 --> 00:04:06,000 includes, some and every. 97 00:04:06,000 --> 00:04:06,870 So with includes, 98 00:04:06,870 --> 00:04:08,160 we can simply test, 99 00:04:08,160 --> 00:04:11,830 if an array contains a single value, 100 00:04:11,830 --> 00:04:12,980 while on the other hand, 101 00:04:12,980 --> 00:04:14,580 with some and every, 102 00:04:14,580 --> 00:04:16,760 we can specify a condition, 103 00:04:16,760 --> 00:04:19,040 based on a callback function. 104 00:04:19,040 --> 00:04:20,630 So some is gonna return, 105 00:04:20,630 --> 00:04:23,020 if at least one of the elements in the array, 106 00:04:23,020 --> 00:04:24,900 satisfies the condition, 107 00:04:24,900 --> 00:04:26,720 and every, only returns true, 108 00:04:26,720 --> 00:04:28,230 if all of the elements, 109 00:04:28,230 --> 00:04:29,863 satisfy the condition. 110 00:04:30,750 --> 00:04:32,220 So these three methods, 111 00:04:32,220 --> 00:04:34,350 are all return Boolean values, 112 00:04:34,350 --> 00:04:36,020 which is very helpful, 113 00:04:36,020 --> 00:04:37,630 in a condition. 114 00:04:37,630 --> 00:04:40,740 For example, in an if/else statement. 115 00:04:40,740 --> 00:04:44,040 Okay. So that's where you many times will use, 116 00:04:44,040 --> 00:04:46,030 one of these methods. 117 00:04:46,030 --> 00:04:49,330 Next up, sometimes we want to transform an array, 118 00:04:49,330 --> 00:04:50,770 into a string. 119 00:04:50,770 --> 00:04:53,740 And then we use the join method. 120 00:04:53,740 --> 00:04:57,310 Or we might want to reduce the entire array, 121 00:04:57,310 --> 00:04:59,400 to just one value. 122 00:04:59,400 --> 00:05:01,010 And as we already know, 123 00:05:01,010 --> 00:05:03,390 for that, we use the reduce method, 124 00:05:03,390 --> 00:05:06,610 just as we studied in this section. 125 00:05:06,610 --> 00:05:09,750 So in the reduce method, we use an accumulator, 126 00:05:09,750 --> 00:05:11,560 which has like a snowball, 127 00:05:11,560 --> 00:05:13,870 to boil down, an entire array, 128 00:05:13,870 --> 00:05:15,930 to just one single value. 129 00:05:15,930 --> 00:05:18,230 And that value can be of any type. 130 00:05:18,230 --> 00:05:20,900 So it can be a number, string, Boolean, 131 00:05:20,900 --> 00:05:24,160 or even an array or an object. 132 00:05:24,160 --> 00:05:24,993 All right? 133 00:05:24,993 --> 00:05:26,670 And so in fact, we could, 134 00:05:26,670 --> 00:05:29,610 replace some of these methods that we have here, 135 00:05:29,610 --> 00:05:30,693 with a reduce. 136 00:05:31,600 --> 00:05:33,140 Now, if all we want to do, 137 00:05:33,140 --> 00:05:35,230 is to just loop over an array, 138 00:05:35,230 --> 00:05:37,860 without producing any new value, 139 00:05:37,860 --> 00:05:40,580 we use the, forEach method. 140 00:05:40,580 --> 00:05:44,190 So remember, this one does not create a new array, 141 00:05:44,190 --> 00:05:47,470 and in fact, it doesn't create any new value. 142 00:05:47,470 --> 00:05:50,470 All we do in the forEach method is to, 143 00:05:50,470 --> 00:05:52,300 basically just do some work, 144 00:05:52,300 --> 00:05:54,203 but not produce a new value. 145 00:05:55,330 --> 00:05:57,230 All right? And that's it. 146 00:05:57,230 --> 00:06:00,223 That's an overview of all the 23 methods, 147 00:06:00,223 --> 00:06:02,920 that we can use on arrays. 148 00:06:02,920 --> 00:06:04,430 And it might be a good idea, 149 00:06:04,430 --> 00:06:07,290 to somehow keep this overview handy. 150 00:06:07,290 --> 00:06:09,500 For example, print it out on a paper, 151 00:06:09,500 --> 00:06:11,993 or just store it somewhere, on your computer. 152 00:06:13,210 --> 00:06:16,250 Anyway, now all there's left to do in the section, 153 00:06:16,250 --> 00:06:19,130 is to complete the final coding challenge. 154 00:06:19,130 --> 00:06:21,453 So let's do that right in the next video.