Now, to explore those loops,
I'll add a new file loops.js in our project here
and replace demo.js
with loops.js in index.html.
So, again, we can execute some code here,
and then see the result in the console
or on the screen, depending on what we need.
Now, I'll start with the console and the regular for loop.
So not for-off or for-in, but just the for loop.
You write this loop like that.
You start with the for keyword, then parentheses,
and we'll put some code that determines how long the loop
will run into those parentheses.
And then curly braces.
And between those curly braces,
just as we had it with the if statement and functions,
we put the code that, in this case, should be executed,
as long as the loop is running.
Now, here, between those brackets,
we have to write some code that defines
how long that loop is running.
And, with a for loop, the execution of that loop code
depends on some variable.
Some helper variable, you could say,
that is defined for this loop.
For that, we write let, and that's important,
it must be let not const here,
let i, typically.
i stands for iteration.
The name is up to you,
and it can also be longer than one character,
but i is a very common variable name
for this for loop variable.
And then, after let i, you add a semicolon.
However, you can and typically do assign
an initial value here, and that very often is zero,
but it can be anything.
Then, after the semicolon,
still between those parentheses,
you write your looping condition.
So some condition that defines how long
that loop should keep on running.
And that could be that you want to keep looping
as long as i is smaller than 10.
So here, in this comparison,
you'd typically use this helper variable
which you defined as a first step.
Now, we add another semicolon,
and now we define how i should change
in every loop iteration.
And very often here
we will increment it by one.
So we will add one to it.
And, in JavaScript, there is a shortcut for this,
which you can also use outside of loops,
and that's i++.
++ is a special operator which is equal to
this:
So it's equal to reassigning i to a new value
where i is the old value plus one.
That will add one to i and store this back into i,
and this is simply a shortcut notation for it.
You also have a similar shorthand for decrementing i
with i-- that would be the same as writing
i = i - 1.
But again, here, we need to i + 1,
and therefore, again, I will use this ++ shortcut.
With that, i will be incremented by one
after every loop iteration.
And that's important, after the iteration.
So after the execution of this loop code,
and this loop code will be re-executed
as long as i is smaller than 10.
So, with this code,
we would write a for loop that executes 10 times.
Because we start at zero,
add one to it after every execution,
and keep on executing as long as it's smaller than 10
Not smaller or equal, but just smaller.
However, you can, of course, tweak this however you want.
You could also make this smaller or equal,
or maybe change i
such that it's actually i + 2 in every iteration.
In that case, of course, you would loop less times
because you add more to i after every iteration.
But here I'll stick to i one one,
and I will console.log i here
so that we see how i, this helper variable,
changes during all those iterations.
As a side note, i is a variable,
which you can only use inside of this looping code.
Not outside of it.
If I would try to console.log i here,
outside of this loop,
you will see that it's not getting logged.
But speaking of that,
let's save everything and go back.
And you'll see I get an uncaught reference error here.
That's coming from me trying to log i down there,
so I'll get rid of that.
But if I save this again, we see that other than that,
we have i from 0 to 9 being logged.
So the loop executed 10 times, and i changed accordingly.
We don't see i equal to 10 here
because for i equal to 10,
we don't make it into this loop with this condition.
But, again, as mentioned, you could change this condition.
So when could this kind of loop be helpful?
It is helpful whenever you know that you have some code
that should be executed a certain amount of times.
For example, if you're building an online game
in the browser where the user can roll two dices,
and therefore you know that you wanna generate
a random number between 1 and 6 two times,
then you could write such a loop to execute
this random number generation code two times.
For the moment, I'll keep it at this example here though.
And I'll move on to the next kind of loop which we have
so that we see all these different loops here in theory
and in action before we then see what we can do with them
when it comes to more realistic examples.