OK, they're my friends.
So the first type of control flow that I want to talk about are loops and in particular we're going
to talk about one type of loop.
Now, there's many different types of loops in JavaScript.
I do think it best that we just focus on one of these a up to begin with.
Then we'll talk about the rest of them later on.
So I'm going to write out this fall, first of all, then after I've written the loop, I'm going to
explain it and show you how it works.
So I'm saying I equals zero, then a semicolon, then AI is less than five semicolon than I plus plus.
Then we open and close and curly braces like that at the end.
Now we don't add a semicolon at the end of these curly braces.
We don't do that for loops.
All right.
Now remember, at the end of the day, the job of a loop is to loop through a portion of code over and
over and over a set number of times.
That's what they're there to do.
So keep that in mind when we go through this.
So first of all, this thing here, when we open the curly braces and we close the curly braces, that
is what is known as a code block.
It's just a section of code that we're kind of sectioning off and it's for this loop.
OK, now that we create the fallout by, first of all, saying the four key word, then we have some
parentheses.
And inside the parentheses, we have three different things.
The first thing right here, this is an initialization variable.
So we're saying to begin with, we're going to create this variable I and said equal to zero.
Now, this variable is a bit like a counter and it keeps track of how many times we cycle through the
loop and how many times we run the code inside the loop.
Then the second thing is a condition.
This is going to evaluate whether true or false.
If this condition is true, then we're going to execute the code that's inside this code block.
If it's false, then we're not going to.
The third thing over here, this is a final expression and this is going to execute every time at the
end of the code block.
OK, so every time we loop through some code at the end, we're going to take AI and add one to it.
So let's run through this.
The code reaches the for loop and we are equal to zero to begin with.
Then we check this condition.
Is I less than five?
Well, yes, it is, because it's currently zero.
So then we execute some kind of code that's inside this code block.
We've not gotten there yet, but later we will.
Then once we've executed that code, we come up to this final expression.
We take AI, which is currently zero, and we add one to it.
So now they're saying, OK, we've been through here once, essentially.
So we come back up to the top.
We don't reinitialize the variable.
We just keep AI as want because we've just added one to it and we recheck the condition.
Is I still less than five.
Well, it's one.
So yes, it still is less than five.
So we execute the code block again and at the end we do this final expression and once I and now it
becomes two, then we go back to the top is two less than five.
Yes it is.
So we do the code block and it loops and loops and loops until eventually AI is five, it's no longer
less than five.
So then we don't execute the code inside the code block anymore.
We've already loop through it enough times based on this condition so we don't do it again.
Then once we've done it, we come out of the loop and we carry on down the file with the rest of the
code.
OK, so then let's see this in action.
I'm going to say inside here, console dialog and we're going to say in loop Kolon.
And then we'll also log a second thing to the console, which is I so remember, AI is zero to begin
with.
Then every time we go through the loop, it's going to add want AI?
So we should say zero to four.
We won't see five because at the point when I say five, it's not less than five anymore and it doesn't
execute the code in here anymore.
At the end of it, I'm also going to do another console log and I'll say loop finished.
So this is only going to run once we've loop through this X amount of times.
So save it and preview of a hill and we can see in loop zero one, two, three, four.
Then we break out of the loop because I is not less than five anymore and finally we log this to the
console.
So I hope that makes sense.
Now a lot of the times we might not know how many times we want to loop through something.
We're not just going to pluck a number from thinner and say, OK, I'm going to loop through you ten
times.
No, we don't do that.
Typically what we do is loop through data of some kind so we could get, for example, a list of users
or names from a database.
We don't know how many people are in that list or array of names.
And we want to cycle through them and we want to perform a follow up, for example, for each name in
around, do something with that name.
So let me comment this junk count and come down here.
And what we're going to do is create a constant.
Now, we're not going to grab these names from a data.
Because we've not taught to that yet, but what we will do is just create an a right and imagine that
we have got these from a database.
OK, so the first name is going to be Sean, then I'll say Mario and then Luigi.
OK, so now we have our array of names and we need to give this consed a name.
So we'll call it names.
And now I'd like to cycle through this array using a fall loop.
OK, now remember I said we might not know how many elements are inside here.
We know because we can just look at it and say, well, there's three inside that.
So we know how many times we want to cycle through it.
But just suspend disbelief for a minute and imagine we got this from a database and you don't know how
many names are inside here.
We need another way to tackle this.
So the way we do it is by saying for first of all, we still initialize a variable to be zero to begin
with.
That's our counter.
Then we say for I less than names dot length's.
So that's going to take the length of this, which is three.
And it's going to say for as long as I is less than that value, then we're going to cycle through it
and that ensures that we're going to cycle through each one.
Does that make sense?
Cool.
So finally we take and we plus plus add one at the end of every loop.
OK, so inside here, I'm just going to consider log I to begin with now we should know what happens.
It's going to be zero, then one, then two and then that's it.
OK, because when it gets to three the length is three and it's no longer less than that.
So then I don't just want to log out.
I know I want to log out the name that we cycle over each time.
OK, so first Sean, then Mario, then Lucija.
How do I do that?
Because this is not automatically linked to this.
All we're doing is using the length property at the minute.
What we want to do is every time we go through this loop, log out the names in order.
So what we could do is we could take the names and we could use square brackets notation to get each
element.
And what I'm going to pass in here is I now I to begin with on the first loop is going to be zero because
that's what we initialize to be.
So when we first execute this code, I zero and it's going to lock out Sean.
Then we add once I come back to the top, when we run this code block again, I will not be one.
So we'll get this element and leave that to the council and so forth.
So if we save this now and preview, we can see all of these names.
So that's cool, right?
We can now cycle through an array of any length.
We don't have to know that length using this kind of syntax.
Now imagine, instead of just log in to the console, we wanted to do something like create a little
snippet of HTML, a little template for each name, so that eventually we're going to output that to
the browser.
Well, we could do something like this.
Let XHTML equal to a template string, which is batiks, remember?
And inside that template string we could just write some HTML while they were div tag and close them
off.
Then what we want to do is output the variable listing names ie inside this div each time.
So remember to output a variable inside a template stream we use dollar then the variable name inside
the curly braces and we want names and then I.
So that's going to be shown first and Mario then Lahiji.
OK, so then let's log to the console, the HTML each time around.
So save that view in a browser and we can see we have a little template now for each individual name.
Awesome.
So then one more thing before we close up, just a little bit of terminology, you might hear me and
other developers in the future talk about cycling through an array of some data as iteration, and each
iteration is one cycle through.
So every time we perform a code lock, that is one iteration through the data.
OK, so that was just a bit of terminology.
That is all we just cycling through.
The data is the same thing.
So my friends, that is a follow up.
In the next video, I'm going to shift our focus to another type of loop called a while loop, which
is similar, but just a bit of different syntax.
