Everyone in this lesson we are going to talk about loops, loops are a very important concept, not
only in JavaScript but in any programming language.
So loops are structures of repetition.
If we want to repeat a statement five times, we don't have to write it five times.
We just need to run a loop.
And we can also use loops to run through the elements of an array or an object.
So no matter the size of these elements, we just need to write these statements once.
So let's start with a first example.
So let's go to Visual Studio Code.
And now I'm going to start a for loop, so I'm going to use the key word for open and close parentheses
and then open and close curly braces.
So as you can see, this structure just looks like the function structure or the condition of structure.
So now let's just go inside the parentheses and let's check how this loop is going to work.
So the for loop is going to accept three statements.
So inside the parentheses, the first statement is going to be something that will be executed before
the loop is started.
So in this case, let's just create a variable.
We can name it any way we want because this variable actually is just going to work as a counter so
we can start a variable.
We have a value of zero, so this is going to be the first statement, so we're ending this statement
with a semicolon.
Now, the second statement of the loop is a condition.
This condition needs to return, true, so the loop continues running.
So when this case, let's just right.
A condition that says if a.
Is less than five.
Then we want to continue with the loop, so this is the second statement and the third statement of
the for loop is something that is going to be executed at the end of each iteration of the loop.
So in this case, we just need to increment the value of a because if we don't do this, this loop is
going to run forever.
So then we can just increment the value of a using the incremental operator.
So now we're just.
Wrote a piece of code that is going to be executed before the loop starts, so before the loop starts,
we are going to create this variable.
Then we wrote the condition for the loop to keep running, and then we just wrote something that's going
to be executed at the end of each iteration.
So at each iteration, what do we want to do?
So let's just do cancel the log.
And then let's just send the a variable just so we can see what's going on with this loop.
So saving this.
Refreshing the page, we can see that we have zero one, two, three, four, and then the loop just
ended.
And this is because the condition is that A is less than five.
So we just started the loop with a equals zero.
Then this is the condition for the loop to to keep running.
And this is the code that's going to be executed after each iteration.
So.
When we print zero.
This is the end of the first iteration, so then we are just going to increment the value of eight,
then the loop is going to keep running until this condition returns.
False.
So this is how the for loop works.
So now I'm just going to comment this and now let's see how can we use the for loop to run through the
elements of an array?
So going back to the page, I'm just going to copy this student's variable.
So now we have this array that for now it has five elements, but it could be 50, it could be 500,
we don't know.
So we are just going to write one piece of code that's going to be working for arrays of any size.
So how do we do this?
I'm just going to start a for loop.
So again, open and close parentheses, open and close, curly braces inside the curly braces.
We're going to write the code we want.
And inside parentheses, let's remember the three statements that we need to write.
So the first one is creating a variable.
So var a.
Equals zero.
We don't have to do this every time, just having mind that this is a statement that it's going to run
one time before we start the loop.
So in this case, this makes sense.
And now the second statement is going to be the condition for the loop to keep running.
So now this is going to be a bit different because now we're going to say that the condition is that
A is less than the student.
Ouray.
That.
Lenth.
So this means that we are going to run through all these elements, and when A is higher than students
that length, we are just going to stop this loop.
So this is how we use loops with a race.
And now the same thing we can just use.
The incremental operator, you can do it like this, as I've showed you in the previous lessons, like
a plus equals one, or you can just use a plus plus, which is the same thing.
This is another incremental operator that's just going to add one to this variable.
So it's more common to see for loops written like this.
So now we just need to do something.
So now every iteration of the loop, so the first iteration A is going to be zero.
So what we want to do is just using the students array and then we are going to use an index.
So instead of just putting a number like one, like zero or one, we're just going to use the A variable.
So we the first iteration, it's going to be a zero.
So it's going to get the first element, then it's going to increment it.
And at the second iteration, it's going to be one.
So it's just going to get all the elements.
And then when we reach the end of the array, then this condition is not going to be true anymore.
So our loop is going to stop.
So let's just do console.
Not log.
So we can send all these names to the council using a loop, as you can see, no matter how many elements
we have in our array, we just need to write one line of code.
To work with all these elements, so let's just save this now, returning to the page and refresh the
page, we can see that now.
We're just printing all the elements of this array with just one line of code.
Now, this is very useful to work with arrays so we could get like all the P elements of our page and
do something with them.
But if we are working with objects, then this is going to be a bit different because objects don't
have a length.
So if we are working with objects, we're going to have to use the four in loop.
So let me just copy this car object.
So if I want to go through all these elements, I cannot use the for loop because objects, they don't
have a length, but there's a very easy way of doing this, which is using the four in loop.
So I'm just going to write the same way.
So for open and close parentheses, open and close, curly braces, but instead of the three statements
here, I'm just going to create a new variable, let's say, prop for the properties.
So prop in car.
So what this is going to do is just iterating through this object.
So it's just going to get the first property.
Second, third, fourth is just going to get all the properties of this element.
So at every iteration of the loop, the property is going to be assigned for this prop variable.
So at each iteration we can do so that log.
Let's just try to print prop just so we can see what's going on here.
So if we do this, we can see that at every iteration of the loop, it just went through and get your
model manufacture and fuel type.
So if we want to print the value, we just need to use this because we know how to access properties
of objects.
So instead of doing this, we can just print.
The prop, and then we can concatenate it with some string.
So let's use the Callon and a space, and now we can just use the car object.
And we know that to access these properties, we need to use the Brace's and inside here we name the
properties and we know that at each iteration of the loop, this property is going to be one of the
object properties.
So if we just.
Use this variable here.
And refresh the page, we can see that we were able to loop through the elements of an object, so now
we didn't have to set an end to this loop.
We just used prop and car.
And it is going to automatically go through all the properties and just end the loop after the last
property.
And we can access the properties using the variable that we created with the loop.
And we can also access the values by using the name of the variable.
And using the prop variable inside braces.
So this is pretty cool.
We are going to use this more in the next few lessons.
Don't worry too much.
This is just the first time we are seeing this.
I know this could be a bit confusing for some people, but trust me, this is going to be very, very
easy when we do a few more examples.
So now that we know how this loop works, let's see an example using age HTML elements, so I have three
age HTML elements with the same class.
So let's go to Visual Studio Code.
And now I'm just going to create a new variable called aliments.
And I'm just going to use document, Don, to get element by class name, which we know is going to
return an array.
So the class name is example.
If I do this, let me save this and refresh the page.
Now let's see the elements variable.
We can see that this is a collection of ASML elements with three elements, which are these three elements
here.
So now let's do something with all of these elements using loops.
So now I'm just going to copy the structure for the for loop.
So I'm going to start this variable with zero, then I'm just going to use a is less than elements that
lenth.
And then I'm just going to increment the value of a using this shorter incremental operator and then
at each iteration, I'm just going to do.
Aliments.
Then I'm going to use a as an index, because let me go back to the page, we have these three elements.
If I just do elements and I try to use the first index, we can see that this has been selected so we
can do this with all the elements of our array.
So I'm going to use a as an index here, and then I'm just going to use what we've learned to change
the success of Element.
So I'm going to change the color of this element to orange.
And let me copy this.
I'm going to do the same thing, so I'm going to change the font weight.
So in this case.
I can do it like this because this has a dash or.
I can just use Dot.
Font.
Wait and use the camel case, so the font weight is going to be vode, so if I do this and.
Refresh the page.
Now, we were able to select every element with a class of example and just change the seats for all
of them.
So going back to the HTML of this lesson.
So here it is, let's try to add a few more elements with the same class.
So here we have a few more.
Aliments.
So now we have way more elements of that class, let's name an element four, five, six and seven.
It doesn't matter how many elements we have, we can change the success for all of them with just one
loop.
So refreshing the page.
Now we have more elements and we just changed the success for all of them.
So that was all I wanted to say for now.
In the next lesson we are going to learn about while loops.
I'll see you then.