Original subtitles

When we talked about the if else statement,

I mentioned that it's a control structure,

and also that there are more control structures, right?

Well, one of the other control structures are loop.

And so loops are our final big topic

in this JavaScript fundamentals section.

So, loops are a fundamental aspect

of every programming language,

because they basically allow us

to automate repetitive tasks.

So, tasks that we have to perform over and over again.

And here, I like to use the analogy of a gym.

So when you go to a gym, you might, for example,

lift weights, right?

And let's say that you do 10 repetitions

of a certain weight lifting exercise.

So we could represent that, by doing something like this.

So, lifting weights repetition one,

and then, some more emojis here.

Okay, so repetition one.

And remember, we want 10 repetitions.

So we would have to paste this code here 10 times,

and I don't know, even if this are 10 times or not.

But anyway, you can start to guess that this is probably

not a best practice, just imagine

that we had 30 repetitions instead of just 10.

And then if we wanted to, for example, change some word

here in the string, then we would have to change

that in all of them.

So, this really violates

the don't repeat yourself principle, right?

Because we're basically repeating

the same code here 10 times, and all we're changing

is just this number.

So instead of doing all this, we can now create a loop,

and then put one of these lines of code in there.

And the loop will then run that code over and over again,

until we tell it to stop.

And so let's implement a so called for loop now.

And that's a loop, which has a counter.

So, let's do that.

And we simply write for and open parenthesis.

So a little bit like the if statement.

And this is a for statement.

And so it looks similar.

Now, the loop statement has three parts.

The first part is the initial value of a counter.

And in the case of this current example, the counter is

the value that will start here at number one,

and go all the way to number 10.

So let's call this counter rep, which stands for repetition.

And so here, we literally create a variable called rep.

And we started at one, because well,

that's our first repetition.

Okay, and here, we need to use a let variable because

this counter will later be updated by the for loop.

So that's the first part of the for statement,

then we use semicolon and go to the second part.

And the second part, is a logical condition

that is evaluated before each iteration of the loop.

So before each time, that the code in the loop is executed.

So let me just write it here first,

and then this will make more sense.

So our condition will be rep needs to stay below

or equal 10.

So again, this condition that we just described here,

will be evaluated before each iteration of the loop.

Now, if the condition is true,

then the next loop iteration will run.

But as soon as this condition is false, then the loop stops.

And so no more code will then be executed.

So basically, the loop will keep running

while this condition stays true.

And this is really important to realize.

And let me actually write that down here for you.

So for loop keeps running, while condition is true.

So this is the kind of notes that I hope

that you are taking throughout the course.

But this one is really important

and so, I wanted to write it down.

Okay, and so now, I hope it makes sense that we have

this condition, because in each iteration of the loop,

the rep counter will get increased.

And so at a certain point it will reach 10.

And with 10 just condition is still true.

So 10 is still less or equal than 10.

But then, after that it will be 11.

And so then repetition is no longer, less or equal 11.

And then the loop will stop.

And at that point, we will have printed

these 10 strings, basically.

So let's continue writing this so that in the end,

we actually make that work.

So, speaking of increasing the counter,

that is actually the third part of the for statement.

So, another semicolon here.

And now here, we actually update

the counter after each iteration.

So that's necessary, because right now,

the counter would just stay at one forever.

And so this condition here would never be false.

And so what we do here, is to now increase the counter

by one after each iteration.

So, we can say rep equal rep plus one.

But does this look familiar to you.

So, basically increasing the value by just one.

Remember that in the last section,

we actually learned about a special operator,

which does just this, but in a much simpler way.

So instead of writing rep equal rep plus one,

we can simply write, rep plus plus.

And so this will take the rep value, and increase it by one.

Alright, and now all we have to do, is to write the code

that we want to be repeated.

And so let's copy this string here.

Okay, and let's say one, and then it will print

this string 10 times.

So let's start with that.

And then afterwards, I will show you

how we can actually update this number here.

But for now, let's try this out.

And actually let's comment this code out,

so that it doesn't get in our way.

So, comment slash for that.

And let's go.

And indeed, we see that the string was printed 10 times,

that's what this 10 here stands for.

So the dev tools will not print the same string 10 times,

it will simply put this 10 here.

But what matters, is that this logic here actually worked.

So now, let's actually use this counter variable

that we created here, to actually increase the number

in the string that we're printing out.

So, how do you think we will do that?

Well, it's actually simple, all we have to do is to replace

this number here, with the current value of the counter,

because this variable that we defined here,

so this rep variable, it's just a normal variable.

And it's gonna be available here inside of this code block.

So, let's transform this to a template string,

so that we can then insert that variable, into the string.

So, we get rid of the hard coded value.

And now we basically dynamically built the string.

And so here, all we need to do is to put the rep variable.

And now we get exactly what we wrote here manually

in the beginning, alright?

So that works.

And so let's recap exactly what we did here.

So, we wanted to look our string here.

So a string like this 10 times, but of course,

it could be any other repetitive operation.

Again, we're just using console dot log here,

so that we can see the result in the developer console.

Anyway, in order to solve this problem

of not having to repeat the same code over and over again,

we use a for loop.

And so, we initialized the counter of the loop at one.

So right here, we created this new rep variable.

And rep again, stands for repetition, but it could be any

other variable name, of course.

And so we started at one, because well we wanted to start

at repetition number one.

But, we could also start of course, at repetition five.

So let's see how that looks like.

And then, as you might have expected, the first repetition

that's printed is the number five, okay.

But let's put it back to one now.

So after each iteration of the loop, we then increase

this counter value, by exactly one, and this happens

by the end of the iteration.

So in the first iteration, this string here is locked to

the console with the current repetition,

which stands at one, so this here will be replaced by one

and then afterwards, the rep counter will be updated to two.

Then in the next iteration, this same string here

is printed, but now with rep at number two,

then rep is updated from two to three, and so on

and so forth.

And this loops keep running, while the rep variable

is less or equal 10.

So basically, while this condition here is true, and that's

how we achieve exactly 10 repetitions.

So, what the loop does, is to verify before each repetition,

if all condition here still holds true, and only if it does,

it will keep running the loop.

So it will execute the next iteration.

And so it will execute this block of code here

one more time.

And of course we could change it to something else.

Let's put it at 30.

And then, we should get, indeed 30 repetitions

of the same string, where only this counter here is changed.

Alright, and in a nutshell, that's how the for loop

works in JavaScript.

In the next few videos, we will see some more useful

applications of the for loop.

And also talk about another type of loop

that we have in JavaScript.