[MUSIC]
>> Hi, there. I'm Christopher Harrison.
I'm a Senior Program Manager at Microsoft inside of Cloud and AI.
In this section, I want to take a look at loops in JavaScript.
Loops of course, will give you the ability to
execute some block of code multiple times.
You might need to loop x number of
times where x is maybe a hard coded value,
or it's a variable that you have in memory.
Maybe you need to work through a list,
or maybe you're doing something like
calling a helper function that's just going to
keep giving you items back and then once it's done,
it's going to give you
a null value or it's going to give you a false.
Well, depending on all of those scenarios,
JavaScript is going to have the right tool for the job.
Now, JavaScript actually has
multiple types of loops that you can take advantage of.
In our case, we're going to take a look at probably
the three most common which are the while loop,
the for loop, and the for of loop.
Now for reach more on that in a couple of minutes.
Now, as I go through this, what you're going to,
notice is I'm going to walk through the same scenario three times.
The reason that I do that is because I would like to be able to
draw a line between all
of these different types of loops so that why you can see
a little bit of compare and contrast and then hopefully in turn,
start to see a little bit about where different types of
loops are going to work better based on different scenarios.
Let's start off by taking a look at the while loop.
You'll notice in my scenario,
I've got an array here with three different names and
I want to print each one of these out.
Now, in the case of a while loop,
a while loop is going to execute some bit of
code while something is true,
so I need to set all of that up.
The way that I'm going to do that is by first setting up an index,
that's going to allow us to mark where we are inside of
the array and then we're going to set up our Boolean condition.
We're going to keep doing this for as long
as our index is less than the length.
Or in other words,
we're going to keep doing this as long
as we don't have any items left.
Now the big catch with
a while loop is the fact that if you don't change the condition,
it keeps doing the same thing over and over again,
which can obviously get a little bit
annoying as you just experienced there.
The most important component of setting up
a while loop is making sure that
that condition is going to change.
Typically, this is going to be done because you're
calling some helper function in or otherwise,
that's going to eventually give you back a
null or a false value that will indicate,
"Okay, we're done" and
then the while loop will see that and then exit.
In our case though, we need to make sure that we change index so
that way in turn we're changing the expression.
You'll notice that when I run the code,
print all the values out that we'll see
Justin, Sarah, and Christopher.
The next type of loop is a for loop.
A for loop and a while loop,
especially with that last scenario that we
had are actually very similar.
You're going to notice, just like before,
that we need to declare our starting value.
You're going to notice just like before
that we're going to have some Boolean expression,
so if it's going to stay inside of that for loop,
as long as that is true.
Then you're also going to notice that
we're going to increment that index.
Really, it's almost the same as before.
The only major difference here is that with a for loop,
my syntax gives this to me all in one straight line.
Then also just like before,
we're going to go grab the current name
and then print that out and
then our result would be the exact same.
The great thing about a for loop is the fact that it's
really built to execute x number of times.
If you happen to know how many times or in our case,
we can determine this programmatically by looking at the length,
this could be the right loop for you.
Now the last one that we're going to look at is the for of loop.
Now, a lot of other programming languages have something similar.
In Python, this is simply a for loop.
In say, C# this is a for each.
Now, I do want to highlight the fact that in
JavaScript there is a for each,
but it doesn't behave exactly the way that you
might expect from other languages.
That what it's going to do is look at all keys inside
of an object and give you those back,
and sometimes that can actually be quite helpful,
but just not for our scenario here.
Now, when you look at the for of syntax,
what you're going to notice is that we're going to declare
that variable name and then just simply say of names.
If we take a step back here,
we take a look at our for loop,
what you'll notice is that we had to grab
an index and then always go grab the current name.
Same thing is going to hold true with our for of loop,
except I don't actually have to do it.
The runtime is going to do it for me.
What's going to wind up happening here is it's
going to go grab the first name of Justin,
the second name of Sarah,
the third name of Christopher,
and then print each one of those out.
I don't have to worry about incrementing a value,
I don't have to worry about an indexer, anything like that.
With that in mind,
let's talk a little bit about where you
might want to select each loop.
A while loop is great if you're going to be calling
some helper function that's
eventually getting give you back a null values.
I don't know how many times I'm going to execute this.
I really have no way that I can calculate this.
I'm depending on something to
eventually change the condition for me,
perfect for while loops.
Our for loop is perfect for executing
a known number of times that could be hard coded,
that could be coming from a variable.
Then last but not least is our for of.
Our for of is going to be perfect when
we have an array or some form of a collection.
That's the concepts of loops.
Let's go ahead and take a look at all of this in code.