0 1 00:00:00,450 --> 00: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 2 00:00:09,360 --> 00:00:10,180 array. 2 3 00:00:10,530 --> 00: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 4 00:00:17,580 --> 00: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 5 00:00:23,040 --> 00:00:25,580 the latest versions of Javascript. 5 6 00:00:25,620 --> 00:00:27,760 This is a method called forEach. 6 7 00:00:27,960 --> 00:00:32,850 And it allows you to loop through each item inside an array 7 8 00:00:32,850 --> 00:00:37,610 far easier than the bog standard type of FOR loop. 8 9 00:00:37,830 --> 00: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 10 00:00:44,400 --> 00:00:53,020 the letters a, b and c. You can loop through each item in the array using the syntax. 10 11 00:00:53,020 --> 00:00:59,730 So you first specify the array that you want to perform this method on, array1. And then you say . 11 12 00:00:59,730 --> 00:01:06,840 forEach and then you put in an anonymous function. And this function has something called an element. 12 13 00:01:07,890 --> 00:01:15,690 And that element can be named anything you wish but usually say if you had an array of letters right? 13 14 00:01:15,690 --> 00:01:17,370 lettersArray. 14 15 00:01:17,440 --> 00:01:21,390 Then we can change this to lettersArray. 15 16 00:01:21,780 --> 00:01:28,490 and forEach we would say letter and we would log each letter. 16 17 00:01:28,740 --> 00: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 18 00:01:36,840 --> 00: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 19 00:01:44,760 --> 00:01:46,610 in this case we've got letters array 19 20 00:01:46,620 --> 00:01:49,850 so each item would be a single letter 20 21 00:01:49,860 --> 00:01:50,200 right? 21 22 00:01:50,280 --> 00:01:56,850 The singular form. And this format basically allows you to cut down on the amount of code that you have 22 23 00:01:56,850 --> 00:02:00,480 to write to loop through each item. 23 24 00:02:00,480 --> 00:02:02,710 So here comes challenge 14. 24 25 00:02:02,970 --> 00:02:07,990 We've just learned and looks at the forEach method in Javascript. 25 26 00:02:08,100 --> 00:02:13,630 I want to you go ahead and change the FOR loop that you've got inside your home. 26 27 00:02:13,830 --> 00:02:14,630 ejs 27 28 00:02:14,700 --> 00:02:19,480 to use the forEach method instead of what you currently have. 28 29 00:02:19,790 --> 00:02:24,730 Pause the video and complete this challenge. 29 30 00:02:24,740 --> 00: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 31 00:02:31,940 --> 00:02:33,240 doing things. 31 32 00:02:33,260 --> 00:02:39,800 I recommend that whenever you want to change your code inside your EJS files, and remember you shouldn't have 32 33 00:02:39,860 --> 00:02:42,850 a lot of Javascript inside your EJS files, 33 34 00:02:43,010 --> 00:02:48,060 it's only some FOR loops or some conditional IF statements that you should be using here. 34 35 00:02:48,320 --> 00: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 36 00:02:56,000 --> 00:02:58,770 lot simpler and a lot easier to modify. 36 37 00:03:02,790 --> 00: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 38 00:03:10,570 --> 00:03:12,040 forEach would look like. 38 39 00:03:12,160 --> 00: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 40 00:03:17,830 --> 00: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 41 00:03:28,180 --> 00:03:34,090 Now inside the parentheses we add in an anonymous function that only has a single parameter in which 41 42 00:03:34,090 --> 00:03:36,060 we can name whatever it is that we want 42 43 00:03:36,280 --> 00:03:43,370 but it's usually by convention we would give the name of the singular form of our array. 43 44 00:03:43,420 --> 00:03:50,260 So in this case we're looping through each of the items inside the posts and the singular form would 44 45 00:03:50,260 --> 00:03:52,570 just be a single post right? 45 46 00:03:52,930 --> 00:03:57,600 And then we open up our curly braces to determine what we should do with our post. 46 47 00:03:57,940 --> 00:04:04,960 And in this case it would be to console log each of the post titles. 47 48 00:04:04,960 --> 00:04:11,480 So now because we deleted this part of our FOR loop, we no longer have any need for this 48 49 00:04:11,510 --> 00: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 50 00:04:20,850 --> 00:04:23,980 and we say a single post.title. 50 51 00:04:24,030 --> 00: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 52 00:04:32,640 --> 00:04:34,710 this, in my opinion at least, 52 53 00:04:34,890 --> 00: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 54 00:04:42,680 --> 00:04:50,250 And you will see this used widely by professional developers many times choosing this over the standard 54 55 00:04:50,250 --> 00:04:51,210 FOR loop. 55 56 00:04:51,240 --> 00: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 57 00:05:00,480 --> 00:05:01,240 the code. 57 58 00:05:06,540 --> 00:05:12,390 All right let's hit save let's just check to make sure that everything is still working exactly the 58 59 00:05:12,390 --> 00:05:14,430 same way that it was before. 59 60 00:05:14,850 --> 00:05:22,540 So let's put in one post and then the second post and hit publish. 60 61 00:05:22,580 --> 00: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 62 00:05:29,210 --> 00:05:34,140 same as before but this time we're using the forEach method instead. 62 63 00:05:35,550 --> 00:05:42,030 You might notice that we're getting four titles being printed and there's four blog items inside our 63 64 00:05:42,030 --> 00:05:42,740 array. 64 65 00:05:43,050 --> 00:05:51,560 And that's because nodemon only restarts the server when we make any changes to our app.js. 65 66 00:05:51,750 --> 00: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 67 00:05:57,390 --> 00:06:00,910 completely ignores that and it doesn't restart the server. 67 68 00:06:01,080 --> 00:06:07,710 So that means our previous data inside this posts array doesn't get erased because only when we restart 68 69 00:06:07,710 --> 00:06:15,240 the server and we reload our app.js does this posts array get cleared to empty and restarts from 69 70 00:06:15,240 --> 00:06:15,890 nil. 70 71 00:06:15,930 --> 00: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 72 00:06:21,510 --> 00:06:22,050 before 72 73 00:06:22,160 --> 00:06:23,670 then this is the reason. 73 74 00:06:23,820 --> 00:06:28,100 Once you're ready let's head over to the next challenge and tackle challenge 15.