All language subtitles for 029 Challenge 14 and Solution_en

Now in the last lesson we used a basic FOR loop in order to print out each of the titles inside our posts

array.

Now in this lesson I want to introduce you to a much easier way of doing this and this is something

that you'll come across again and again out there in the wild when you see other people's loops using

the latest versions of Javascript.

This is a method called forEach.

And it allows you to loop through each item inside an array

far easier than the bog standard type of FOR loop.

So if you take a look at this demo over here we've got this array, array1, that contains three items

the letters a, b and c. You can loop through each item in the array using the syntax.

So you first specify the array that you want to perform this method on, array1. And then you say .

forEach and then you put in an anonymous function. And this function has something called an element.

And that element can be named anything you wish but usually say if you had an array of letters right?

lettersArray.

Then we can change this to lettersArray.

and forEach we would say letter and we would log each letter.

So the name that you usually give to this parameter here is the singular version of what's inside your array.

So if you had a fruits array then this would be a fruit, singular, and you would log each fruit or as

in this case we've got letters array

so each item would be a single letter

right?

The singular form. And this format basically allows you to cut down on the amount of code that you have

to write to loop through each item.

So here comes challenge 14.

We've just learned and looks at the forEach method in Javascript.

I want to you go ahead and change the FOR loop that you've got inside your home.

ejs

to use the forEach method instead of what you currently have.

Pause the video and complete this challenge.

All right here's my first hint. And it's not so much of a hint as just a general good practice way of

doing things.

I recommend that whenever you want to change your code inside your EJS files, and remember you shouldn't have

a lot of Javascript inside your EJS files,

it's only some FOR loops or some conditional IF statements that you should be using here.

So let's go ahead and clear out all of the EJS scriptlet tags around our FOR loop and this makes it look a

lot simpler and a lot easier to modify.

And now instead of using a standard FOR loop I'm going to comment it out and I'm going to show you what

forEach would look like.

So remember we start off with the array that we're going to loop through which in our case is called

posts, with an s. And then we use the dot to call our method forEach and we open a set of parentheses.

Now inside the parentheses we add in an anonymous function that only has a single parameter in which

we can name whatever it is that we want

but it's usually by convention we would give the name of the singular form of our array.

So in this case we're looping through each of the items inside the posts and the singular form would

just be a single post right?

And then we open up our curly braces to determine what we should do with our post.

And in this case it would be to console log each of the post titles.

So now because we deleted this part of our FOR loop, we no longer have any need for this

i and all we need to do is just to use the singular form that we defined here inside our console.log

and we say a single post.title.

So now this syntax will look through our posts array and for each post, it will log the post's title. And

this, in my opinion at least,

reads a lot more clearly and it's a lot easier to figure out what's going on here than the classic FOR loop.

And you will see this used widely by professional developers many times choosing this over the standard

FOR loop.

All we have to do now is just to add our scriptlet tags around it and go ahead and complete this part of

the code.

All right let's hit save let's just check to make sure that everything is still working exactly the

same way that it was before.

So let's put in one post and then the second post and hit publish.

And now let's check our console and you can see we've got both of our titles being printed exactly the

same as before but this time we're using the forEach method instead.

You might notice that we're getting four titles being printed and there's four blog items inside our

array.

And that's because nodemon only restarts the server when we make any changes to our app.js.

So that means that if you make some changes inside the EJS files or HTML files or the CSS files, it

completely ignores that and it doesn't restart the server.

So that means our previous data inside this posts array doesn't get erased because only when we restart

the server and we reload our app.js does this posts array get cleared to empty and restarts from

nil.

If it did mystify you why we've now suddenly got four things instead of two things as we used to have

before

then this is the reason.

Once you're ready let's head over to the next challenge and tackle challenge 15.