WEBVTT 0 00:00.450 --> 00:09.360 Now in the last lesson we used a basic FOR loop in order to print out each of the titles inside our posts 1 00:09.360 --> 00:10.180 array. 2 00:10.530 --> 00:17.580 Now in this lesson I want to introduce you to a much easier way of doing this and this is something 3 00:17.580 --> 00:23.040 that you'll come across again and again out there in the wild when you see other people's loops using 4 00:23.040 --> 00:25.580 the latest versions of Javascript. 5 00:25.620 --> 00:27.760 This is a method called forEach. 6 00:27.960 --> 00:32.850 And it allows you to loop through each item inside an array 7 00:32.850 --> 00:37.610 far easier than the bog standard type of FOR loop. 8 00:37.830 --> 00:44.370 So if you take a look at this demo over here we've got this array, array1, that contains three items 9 00:44.400 --> 00:53.020 the letters a, b and c. You can loop through each item in the array using the syntax. 10 00:53.020 --> 00:59.730 So you first specify the array that you want to perform this method on, array1. And then you say . 11 00:59.730 --> 01:06.840 forEach and then you put in an anonymous function. And this function has something called an element. 12 01:07.890 --> 01:15.690 And that element can be named anything you wish but usually say if you had an array of letters right? 13 01:15.690 --> 01:17.370 lettersArray. 14 01:17.440 --> 01:21.390 Then we can change this to lettersArray. 15 01:21.780 --> 01:28.490 and forEach we would say letter and we would log each letter. 16 01:28.740 --> 01:36.640 So the name that you usually give to this parameter here is the singular version of what's inside your array. 17 01:36.840 --> 01:44.760 So if you had a fruits array then this would be a fruit, singular, and you would log each fruit or as 18 01:44.760 --> 01:46.610 in this case we've got letters array 19 01:46.620 --> 01:49.850 so each item would be a single letter 20 01:49.860 --> 01:50.200 right? 21 01:50.280 --> 01:56.850 The singular form. And this format basically allows you to cut down on the amount of code that you have 22 01:56.850 --> 02:00.480 to write to loop through each item. 23 02:00.480 --> 02:02.710 So here comes challenge 14. 24 02:02.970 --> 02:07.990 We've just learned and looks at the forEach method in Javascript. 25 02:08.100 --> 02:13.630 I want to you go ahead and change the FOR loop that you've got inside your home. 26 02:13.830 --> 02:14.630 ejs 27 02:14.700 --> 02:19.480 to use the forEach method instead of what you currently have. 28 02:19.790 --> 02:24.730 Pause the video and complete this challenge. 29 02:24.740 --> 02:31.940 All right here's my first hint. And it's not so much of a hint as just a general good practice way of 30 02:31.940 --> 02:33.240 doing things. 31 02:33.260 --> 02:39.800 I recommend that whenever you want to change your code inside your EJS files, and remember you shouldn't have 32 02:39.860 --> 02:42.850 a lot of Javascript inside your EJS files, 33 02:43.010 --> 02:48.060 it's only some FOR loops or some conditional IF statements that you should be using here. 34 02:48.320 --> 02:56.000 So let's go ahead and clear out all of the EJS scriptlet tags around our FOR loop and this makes it look a 35 02:56.000 --> 02:58.770 lot simpler and a lot easier to modify. 36 03:02.790 --> 03:10.340 And now instead of using a standard FOR loop I'm going to comment it out and I'm going to show you what 37 03:10.570 --> 03:12.040 forEach would look like. 38 03:12.160 --> 03:17.830 So remember we start off with the array that we're going to loop through which in our case is called 39 03:17.830 --> 03:28.130 posts, with an s. And then we use the dot to call our method forEach and we open a set of parentheses. 40 03:28.180 --> 03:34.090 Now inside the parentheses we add in an anonymous function that only has a single parameter in which 41 03:34.090 --> 03:36.060 we can name whatever it is that we want 42 03:36.280 --> 03:43.370 but it's usually by convention we would give the name of the singular form of our array. 43 03:43.420 --> 03:50.260 So in this case we're looping through each of the items inside the posts and the singular form would 44 03:50.260 --> 03:52.570 just be a single post right? 45 03:52.930 --> 03:57.600 And then we open up our curly braces to determine what we should do with our post. 46 03:57.940 --> 04:04.960 And in this case it would be to console log each of the post titles. 47 04:04.960 --> 04:11.480 So now because we deleted this part of our FOR loop, we no longer have any need for this 48 04:11.510 --> 04:20.770 i and all we need to do is just to use the singular form that we defined here inside our console.log 49 04:20.850 --> 04:23.980 and we say a single post.title. 50 04:24.030 --> 04:32.550 So now this syntax will look through our posts array and for each post, it will log the post's title. And 51 04:32.640 --> 04:34.710 this, in my opinion at least, 52 04:34.890 --> 04:42.210 reads a lot more clearly and it's a lot easier to figure out what's going on here than the classic FOR loop. 53 04:42.680 --> 04:50.250 And you will see this used widely by professional developers many times choosing this over the standard 54 04:50.250 --> 04:51.210 FOR loop. 55 04:51.240 --> 05:00.480 All we have to do now is just to add our scriptlet tags around it and go ahead and complete this part of 56 05:00.480 --> 05:01.240 the code. 57 05:06.540 --> 05:12.390 All right let's hit save let's just check to make sure that everything is still working exactly the 58 05:12.390 --> 05:14.430 same way that it was before. 59 05:14.850 --> 05:22.540 So let's put in one post and then the second post and hit publish. 60 05:22.580 --> 05:29.210 And now let's check our console and you can see we've got both of our titles being printed exactly the 61 05:29.210 --> 05:34.140 same as before but this time we're using the forEach method instead. 62 05:35.550 --> 05:42.030 You might notice that we're getting four titles being printed and there's four blog items inside our 63 05:42.030 --> 05:42.740 array. 64 05:43.050 --> 05:51.560 And that's because nodemon only restarts the server when we make any changes to our app.js. 65 05:51.750 --> 05:57.390 So that means that if you make some changes inside the EJS files or HTML files or the CSS files, it 66 05:57.390 --> 06:00.910 completely ignores that and it doesn't restart the server. 67 06:01.080 --> 06:07.710 So that means our previous data inside this posts array doesn't get erased because only when we restart 68 06:07.710 --> 06:15.240 the server and we reload our app.js does this posts array get cleared to empty and restarts from 69 06:15.240 --> 06:15.890 nil. 70 06:15.930 --> 06:21.510 If it did mystify you why we've now suddenly got four things instead of two things as we used to have 71 06:21.510 --> 06:22.050 before 72 06:22.160 --> 06:23.670 then this is the reason. 73 06:23.820 --> 06:28.100 Once you're ready let's head over to the next challenge and tackle challenge 15.