Jonas: So we're almost finished with the basics
of JavaScript, but there is still one thing missing
that's crucial to programming in general,
and that is loops.
So in the lecture where I first introduced
you to the if else statement,
I mentioned that it was just one of many control structures.
And so here are some more control structures, loops.
So loops are a very important aspect
of any programming language.
Just imagine that you have a very repetitive task.
Instead of writing for example
10 lines of the same code, you would just use a loop.
So we can basically automate repetitive tasks
using loops, okay?
And there are different types of loops
in JavaScript, and we will start with a simple for loop.
So suppose we needed to print the numbers
from zero to nine.
Okay, so something like console.log and then one.
And then two, three, four, five,
and so on and so forth.
So you would have to do this 10 times,
but that's not a good idea at all.
And so instead again, we use a loop.
And I'm going to start with a for loop.
So we write for, and then the for loop
has three parts.
It has the initial value of the counter,
the condition that is evaluated
before each loop iteration,
and finally a counter update after each iteration, okay?
So let's go through them one by one.
So the first part is the initial value of a counter.
So I imagine that we want to print from zero to nine.
And so we start at zero.
So we define a variable called I for example
and set it to zero.
And I use I here because I is kind of a standard
in JavaScript for a counter variable.
So this is a variable that will be updated in every loop.
Then we use the semicolon and now the second part.
So this is a condition that is evaluated
before each loop iteration in order to see
if the next loop should still be executed.
So if we want to count from zero to nine,
well then our condition will be that
I should be less than 10, okay?
So only if this turns out to be true,
then the next loop will actually run, okay?
So in the beginning we start with zero
and so I will be zero and zero is less than 10
and so it's true, and so the loop will start, alright?
And then next up and finally we have the counter update
after each iteration.
So if we want to count from zero to nine
like zero, one, two, three, four, five,
all the numbers, then in each iteration
we want to increase I by one.
And remember, a special operator to do that,
it is the plus plus.
So this is the same as writing I equals I plus one,
remember that?
Okay, and then in here we have basically the loop block.
So what should happen in each of the loops?
And in the small example, all we want to do
is to really log these numbers to the console.
So console.log I, and so that's it,
that's really it.
Let's take a look
and so now here you see all of these 10 numbers
from zero to nine, alright?
So let's go through it again and see why this works.
So I'm adding a comment here and try to write out
what happens in each iteration.
So we start and I will be zero, right?
Then the condition is evaluated,
and so zero is of course less than 10
and so that's true.
So we will then log I to the console.
So log I to console.
And then finally at the end the counter is updated, okay?
And so I plus plus, okay?
Then in the next iteration,
we will have I is already one at this point, right?
And so the test is now I less then 10,
which is still true, and so the next iteration will start.
And so again we log I into the console
and then I will be incremented by one.
So we do that a couple of times
until we reach the end, okay?
So let's actually copy this here
and again this is just to show you how this works.
So this happens a couple of times
until we're at a point where I is nine already,
and so, and here I wanted actually the less symbol.
And so at this point we are at nine
and nine is still less than 10,
and so it's true.
Then we log the I to the console
and I gets incremented just like before, okay?
But then it means that at the next step
we are at 10.
And so 10, less than 10, is now false.
And so we enter the loop.
Actually we exit the loop,
which means that the loop finishes
and it no longer continues working.
And so that's why we stop at nine, alright?
Does that make sense?
Now we could of course change some stuff here,
so imagine that we wanted to count until 20.
So we could put 20.
Actually this will go until 19,
but imagine if we wanted to really start from zero
and include to 20.
So we want to start from one not zero, sorry.
So starting from one and we wanted to include to 20.
So we can say less or equal.
And so in this case this will only fail
as soon as I is 21.
And so we start at one and go all the way to 20.
And we can also add a step here,
so instead of simply adding one, we can add two
in each iteration, so let's try that.
So instead of doing I plus plus,
we can do I plus equal two.
And remember that's the same as writing
I equals I plus two.
Let's check it now.
And so indeed it works.
So we start with one, right?
And then we increased the counter by two,
and so the next one will be three, right?
And then five and so on and so forth
all the way until 19 and 20 is not included
because 19 plus two is already 21 which is of course
greater than 20.
Alright, so that is the very basic
functionality of the for loop.
Now let's look a bit more practical example.
So let's say that we have an array here
and let's actually copy the array from
the array lecture here and, where is it?
So yeah, this one is the one that I mean.
So the John array,
instead of having to write it out all over again.
So we have a couple of data here about John.
So let's say that we have an app
where we need to display these five values
here to the console.
Well maybe not to the console, but to the user interface,
but we're just working with the console here.
And so let's pretend that we need to lock
these five values here to the console.
And so of course, just like before,
we could do it like this.
So John,
zero,
and then like all the way to five,
actually to four right?
So we could do it like this, right?
So that would solve the problem, but not in a good way.
So imagine that we had actually 50 elements
in this array and not just five,
so what would you do then?
You couldn't just create 50 lines of the same code.
And so of course the solution here is to use a loop,
so let's get rid of this here
and instead write it as a loop.
So again, a for loop.
So var I equals zero, and why do we start at zero?
Well we start at zero because the array is zero based,
and what we want to use the counter here,
is to read the element of the array at position zero,
one, two, three, and four, alright?
So we start at zero and you want the loop
to run as long as I is less than
the length of the array, okay?
And why is that?
Well that's because the length of this array is five
and so as long as the counter is below five,
so zero, one, two, three, or four,
we can then read the data out of this array.
But starting at five there's no more data in the array.
So there's nothing at position five in the John array.
And so at five we no longer want to read anything.
So remember how we can read the length of an array,
so the number of elements?
Well all we have to do is to use the length property, okay?
And then we want to read all of them,
and so we do plus plus just like before, alright?
So this year will maybe not make 100% sense to you,
but it will after you see exactly what we're
gonna do here here in the block of this loop, okay?
So what we're going to do is to log to the console
John at position I.
Okay, so instead of writing out
zero, one, two, three, and four,
we let the loop take care of basically
putting the numbers here.
So in the first one it will be zero
and then one and then two and then three and then four,
but not five because John.length is five
and this loop only runs as long as the counter
is less than five in this case, okay?
So let's test it out and yeah, here we go.
So all of these five logs are not coming from line
597, so this line here.
So does this logic here make sense to you?
Just to make sure, let's do it again.
So we need this counter variable here I
in order to log to the console
John zero, one, two, three, and four.
So we want all of these five elements
to be logged to the console.
And instead of having to write out John one,
John two, John three, John four, and John five,
we just use this loop.
And so we start at zero because that's the first
element in our array.
After each iteration of the array
we increase the counter value by one
because we want to read all of the five values
and finally we run this loop as long as the counter
variable is still smaller than the total length
of the array, which is five.
So it will run for zero, for two, for three, for four,
but no longer for five
because there is nothing at position five.
And we could of course manually have put it here
with a five, but then imagine
that we would add something here.
So something like blue as a favorite color
and well then it would not dynamically change the array.
So if you now reload it,
it will not display the blue here to the console.
But instead if we go back and put it to John.length,
well then it will automatically figure out the length
and then loop through the entire array,
because now John.length is six
and so it will also loop the element
number five to the array.
So indeed now it appeared down here, the blue as well.
Okay, so I hope that now it's crystal clear to you
and looping through arrays is actually one of the biggest
use case for loop,
so this one is really important to understand.
Now there are actually even better ways
and also simpler ways of achieving it
without using this specific for loop.
But once more, let's talk about it a bit later
because that's a bit more of a complex topic,
and for now we're just really looking at the fundamentals.
So that was the for loop but there's also another
type of loop in JavaScript and that's the simple while loop.
So let's try to replicate the same functionality here
with the while loop.
So the difference between the for and the while
is that in while we only have the condition.
So all we have to pass into the while loop
is really this part.
So we can say that while I is less than John.length,
then it should keep executing this code.
So basically this login functionality here.
And so if you want to have the exact same
functionality as with the for loop here,
we first would have to start by defining
the variable out here.
So I equals zero and then at the end of each loop
we will have to increment I, okay?
And so that's actually it.
And so this here is now the exact same thing as
this for loop here.
But of course it's much easier
to just use the for loop here.
I just wanted to let you know that there was also
a way of doing it with the while loop,
so that's add some comments here.
So this is the while loop
and while this here is the for loop, alright?
And now I just want to show you the continue
and the break statements.
So we use the break statement
in order to break out of a loop
and we use continue in order to quit
the current iteration of the loop
and continue with the next one.
So let's just take a look at a couple of quick examples.
And I think I didn't even show you the results of this one.
So just to make sure,
and now it is, now we have all of these here
and but you see that as just the same.
So we have these six here coming from the for loop
and we have these six here coming from the while loop
at line 604, right?
And so in fact it works just the same way.
Now let's actually get rid of these here.
Not really get rid, I'm just going to comment them out
so that they're not getting in my way
for the next part, alright?
So let's copy this here
so that I can now show you the continue
and the break statements.
And let's start with the continue.
So again, the continue, we use it to quit
just the current iteration of the loop
and then continue right to the next one, okay?
So let's say for example that we only wanted
to lock elements that are strengths, okay?
And so we can implement the logic that will do it
so that if it's not a string it will quit
the current iteration and then continue
with the next one, alright?
So how do we check if it is actually a string?
Well remember the type of operator that we used
right in the beginning of the section.
So we can all say type of
and I think I misspelled that, so type of John,
add the current position, so this one
is different from a string,
and a thing we haven't used different up until this point.
So we only ever used the equal
but now I don't want equal, I want different.
And different we used the exclamation mark like this.
So this year is a strict different operator.
And just like with the triple and the double equals,
here we also have the normal different operator
and then the strict different operator like this.
And just like with the equality
we should always use this one,
here we always should use this one.
So exclamation mark and then equal equal, okay?
And so this means different.
And so what we want to do here
is that each time that the type of the current element
is different from a string,
well, we just want to continue, okay?
And I think this is also something new.
I think that up until this point
we always did the if like this.
So we had this block and then kind of the text in there
just like this, okay?
But if it's only like on one line
and just a simple if statement like this,
we can actually do it in one line without the curly braces
and just write it like this.
So if this, then continue.
And so this will then break out of the loop
and will continue to the next one.
So for example when we hit Smith here,
then the type of John I will be string,
and string is not different form string, right?
And so we will not continue.
Instead we will go straight to this line.
But in the next iteration when it's 1990,
well that is then different from the string,
and so therefore we will enter the if part here
and we will then continue.
And so this line here will not even get executed, alright?
So let me show that to you.
And indeed, we now only have John Smith,
designer in blue.
It skipped the 1990 and then also the false.
And again that's because the type of these two
is different than string, so different here,
different than string.
Alright?
So let us continue.
And now let's do something similar for break.
But the difference with break is that it exits
the current iteration and the entire loop as well.
And so it doesn't continue to the next iteration, alright?
And so now this time let's say that we only
want to print until we encounter something
that is different from a string.
So as soon as we had something that is not a string,
we will not print anything else, alright?
I would simply replace this one here with break.
Well I could have just done it up here, but yeah,
so this way we have both versions, alright?
I'm just going to, I'm gonna leave it like this.
So let's now reload, and you'll see that these four here
are from the outer loop,
so from lines 615 and now from line 620,
which is this one here, we only have John and Smith, okay?
And so that's exactly what we were looking for.
So it prints this string then this string,
and then it encounters something that is not a string
and so it breaks out of the loop
and doesn't change anything else from there, okay?
So let us now continue and break,
I hope that makes sense to you, okay?
Alright, and now just to finish
I want to give you a small challenge.
Imagine that we wanted to loop
through the John array here, so this one here,
the other way around.
So starting from blue and false, designer,
and then all the way to John.
So how can we solve that,
how can we loop through the array
the other way around using a for loop?
So do you think we can solve that?
You can try to pause the video here
and give it a second and try it out for yourself, okay?
So did you figure it out?
So let's add a comment here before we do it.
Looping backward.
And really, all we have to do here is to think
where we want or counter to start
what the condition should be and what we want
to happen with the counter variable.
So starting with I, what do we want I to be
in the beginning?
Well we have this John array
let's get some space here
and we have six elements in here.
Zero, one, two, three, four, and five.
And we want to start at element number five.
And so what is this five?
Well it's just a length of this entire array minus one.
And so let's write exactly that.
John.length minus one.
Okay and that will be five in this case.
Then how long do we want this array to run?
Well, we want the array to run
until I hits zero, right?
So the last one that we want to print
is the first element of the array which is zero, okay?
And so I should always be greater or equal to zero.
So greater or equal to zero, make sense?
So remember that whenever this zero turns out
to be true, then the next loop will be executed.
And so what we want here is it to be executed
whenever I is larger than zero, okay?
Because now what people do here after each iteration
is to actually decrease the counter, okay?
Make sense?
So we start at five and then after each iteration
we decrease the counter.
So five, four, three, two, one, zero.
And at zero it will still work
because I is greater than or equal to zero.
But then after that it will hit minus one
and then the condition will no longer be true
and then it will stop working.
Then all we have to do is of course log it
and this is always the same part.
So now let's give it a try,
and so these here are our results starting here.
So all these come from line 627, so this one.
And so you see that in fact it is really looping
it backwards.
So it starts from blue, false, designer,
1990, Smith, and John which is number zero, okay?
So I hope that made sense to you.
This was just a small exercise for you to think
about these three parts here of the for loop
and how we can achieve a different functionality
than the simple one that I explained to you before, okay?
And so now it's time for yet another challenge,
and this will be the last one for this section
using all of the stuff that we learned throughout
all of these video.
So you have come a long way up until this point,
congratulations, and I hope to see you
in the next challenge because I think it's
really important to take these and try it out on your own.