WEBVTT 1 00:00:01.230 --> 00:00:02.480 In JavaScript, 2 00:00:02.480 --> 00:00:05.640 there are three big and important array methods 3 00:00:05.640 --> 00:00:10.270 that we use all the time to perform data transformations. 4 00:00:10.270 --> 00:00:11.340 So basically, 5 00:00:11.340 --> 00:00:12.940 these are methods that we use 6 00:00:12.940 --> 00:00:15.120 to create new arrays based 7 00:00:15.120 --> 00:00:18.490 on transforming data from other arrays. 8 00:00:18.490 --> 00:00:19.890 And in recent years, 9 00:00:19.890 --> 00:00:24.640 these tools have become really popular and for good reasons 10 00:00:24.640 --> 00:00:27.810 and therefore you'll see them everywhere you look 11 00:00:27.810 --> 00:00:29.513 in Modern JavaScript. 12 00:00:31.230 --> 00:00:36.230 And the tools I'm talking about are; map, filter and reduce. 13 00:00:36.750 --> 00:00:39.080 So these are three array methods 14 00:00:39.080 --> 00:00:40.160 and in this lecture, 15 00:00:40.160 --> 00:00:43.390 I'm gonna give you a quick overview of them. 16 00:00:43.390 --> 00:00:45.780 Then over the next couple of lectures, 17 00:00:45.780 --> 00:00:48.720 we're gonna dive deep into these three methods 18 00:00:48.720 --> 00:00:51.410 in practice so that we can use them 19 00:00:51.410 --> 00:00:53.233 throughout the rest of the course. 20 00:00:54.070 --> 00:00:58.250 First the map method is yet another method that we can use 21 00:00:58.250 --> 00:01:00.670 to loop over arrays. 22 00:01:00.670 --> 00:01:02.850 So, map is actually similar 23 00:01:02.850 --> 00:01:06.000 to the forEach method that we studied before 24 00:01:06.000 --> 00:01:09.830 but with the difference that map creates a brand new array 25 00:01:09.830 --> 00:01:12.600 based on the original array. 26 00:01:12.600 --> 00:01:16.500 So essentially the map method takes an array, 27 00:01:16.500 --> 00:01:18.450 loops over that array 28 00:01:18.450 --> 00:01:20.050 and in each alteration, 29 00:01:20.050 --> 00:01:22.060 it applies a covic function 30 00:01:22.060 --> 00:01:24.220 that we specify on our code 31 00:01:24.220 --> 00:01:26.780 to the current array element. 32 00:01:26.780 --> 00:01:29.990 So in this example we say that each element 33 00:01:29.990 --> 00:01:31.583 shall be multiplied by two. 34 00:01:32.420 --> 00:01:34.400 And with this covic in place, 35 00:01:34.400 --> 00:01:38.410 the map method multiplies every single element by two 36 00:01:38.410 --> 00:01:40.853 and puts it into a new array. 37 00:01:42.790 --> 00:01:46.650 We say that it maps the values of the original array 38 00:01:46.650 --> 00:01:51.120 to a new array and that's why this method is called map. 39 00:01:51.120 --> 00:01:53.360 And it is extremely useful. 40 00:01:53.360 --> 00:01:57.000 Usually way more useful than in forEach method 41 00:01:57.000 --> 00:02:00.590 because forEach simply allows us to do some work 42 00:02:00.590 --> 00:02:02.820 with each array element. 43 00:02:02.820 --> 00:02:04.820 But map on the other hand, 44 00:02:04.820 --> 00:02:06.910 builds us a brand new array 45 00:02:06.910 --> 00:02:10.270 containing the results of applying an operation 46 00:02:10.270 --> 00:02:11.803 to the original array, 47 00:02:12.860 --> 00:02:13.700 all right? 48 00:02:13.700 --> 00:02:15.180 And we will use the map method 49 00:02:15.180 --> 00:02:17.723 in practice right in the next video. 50 00:02:18.630 --> 00:02:19.463 Anyway, 51 00:02:19.463 --> 00:02:21.990 next up we have the filter method, 52 00:02:21.990 --> 00:02:25.960 which as the name says, is used to filter for elements 53 00:02:25.960 --> 00:02:30.960 in the original array which satisfy a certain condition. 54 00:02:31.060 --> 00:02:33.160 So in this example we are only looking 55 00:02:33.160 --> 00:02:36.090 for elements greater than two. 56 00:02:36.090 --> 00:02:39.360 So all the elements that pass the test 57 00:02:39.360 --> 00:02:43.683 that we specified will make it into a new filtered array. 58 00:02:44.570 --> 00:02:48.770 Or in other words elements for which the condition is true 59 00:02:48.770 --> 00:02:50.540 will be included in a new array 60 00:02:50.540 --> 00:02:53.380 that the filter method returns. 61 00:02:53.380 --> 00:02:56.410 All other elements will get filtered out 62 00:02:56.410 --> 00:02:59.563 so they will not be included in the new array. 63 00:03:00.870 --> 00:03:04.360 And finally there is also the reduce method 64 00:03:04.360 --> 00:03:07.320 which we use to boil down all the elements 65 00:03:07.320 --> 00:03:11.490 of the original array into one single value. 66 00:03:11.490 --> 00:03:14.700 And an example of this can be to add all the elements 67 00:03:14.700 --> 00:03:16.340 of an array together. 68 00:03:16.340 --> 00:03:19.233 But we can also do many other interesting things. 69 00:03:20.130 --> 00:03:24.170 So for the example of adding up all numbers in the array, 70 00:03:24.170 --> 00:03:27.570 we need to specify an operation like this one 71 00:03:27.570 --> 00:03:30.003 where we have an accumulator variable. 72 00:03:30.880 --> 00:03:34.230 Then as the reduce method loops over the array, 73 00:03:34.230 --> 00:03:37.890 it keeps adding the current element onto the accumulator 74 00:03:37.890 --> 00:03:40.450 until at the end of the loop we have 75 00:03:40.450 --> 00:03:43.540 to total sum of all the elements. 76 00:03:43.540 --> 00:03:46.370 So you can imagine this as a snowball, 77 00:03:46.370 --> 00:03:48.300 it keeps getting bigger and bigger 78 00:03:48.300 --> 00:03:50.690 as it rolls down a hill. 79 00:03:50.690 --> 00:03:54.210 And so this is known as the snowball effect 80 00:03:54.210 --> 00:03:57.610 and reduce is pretty similar to that, 81 00:03:57.610 --> 00:03:58.630 okay? 82 00:03:58.630 --> 00:04:01.920 So keep that in mind as a nice analogy. 83 00:04:01.920 --> 00:04:04.670 Now we also said that this whole process 84 00:04:04.670 --> 00:04:09.320 has now reduced the original array to one single value 85 00:04:09.320 --> 00:04:12.900 which in this case is the sum of all the elements 86 00:04:12.900 --> 00:04:16.670 but it can of course be many other operations. 87 00:04:16.670 --> 00:04:20.380 Now it's this value that then actually gets returned 88 00:04:20.380 --> 00:04:23.420 from the reduce method in the end. 89 00:04:23.420 --> 00:04:26.290 So there is no new array in this case 90 00:04:26.290 --> 00:04:28.323 but only the reduced value. 91 00:04:29.180 --> 00:04:31.910 Now this probably sounds more complicated 92 00:04:31.910 --> 00:04:33.420 than it actually is. 93 00:04:33.420 --> 00:04:34.830 And so let's start to put it 94 00:04:34.830 --> 00:04:37.393 into practice right in the next video.