1
00:00:09,150 --> 00:00:16,970
Everyone in this lesson we are going to talk about loops, loops are a very important concept, not

2
00:00:16,970 --> 00:00:20,570
only in JavaScript but in any programming language.

3
00:00:21,090 --> 00:00:24,230
So loops are structures of repetition.

4
00:00:24,680 --> 00:00:30,580
If we want to repeat a statement five times, we don't have to write it five times.

5
00:00:30,830 --> 00:00:33,290
We just need to run a loop.

6
00:00:33,290 --> 00:00:40,120
And we can also use loops to run through the elements of an array or an object.

7
00:00:40,430 --> 00:00:47,350
So no matter the size of these elements, we just need to write these statements once.

8
00:00:47,660 --> 00:00:50,680
So let's start with a first example.

9
00:00:51,320 --> 00:00:53,870
So let's go to Visual Studio Code.

10
00:00:56,130 --> 00:01:05,190
And now I'm going to start a for loop, so I'm going to use the key word for open and close parentheses

11
00:01:05,520 --> 00:01:10,010
and then open and close curly braces.

12
00:01:10,170 --> 00:01:19,560
So as you can see, this structure just looks like the function structure or the condition of structure.

13
00:01:19,770 --> 00:01:26,920
So now let's just go inside the parentheses and let's check how this loop is going to work.

14
00:01:27,240 --> 00:01:32,460
So the for loop is going to accept three statements.

15
00:01:32,710 --> 00:01:40,710
So inside the parentheses, the first statement is going to be something that will be executed before

16
00:01:40,980 --> 00:01:42,600
the loop is started.

17
00:01:42,900 --> 00:01:45,750
So in this case, let's just create a variable.

18
00:01:46,290 --> 00:01:53,400
We can name it any way we want because this variable actually is just going to work as a counter so

19
00:01:53,400 --> 00:01:55,560
we can start a variable.

20
00:01:57,230 --> 00:02:04,490
We have a value of zero, so this is going to be the first statement, so we're ending this statement

21
00:02:04,490 --> 00:02:06,140
with a semicolon.

22
00:02:07,100 --> 00:02:11,330
Now, the second statement of the loop is a condition.

23
00:02:13,230 --> 00:02:18,520
This condition needs to return, true, so the loop continues running.

24
00:02:18,720 --> 00:02:21,240
So when this case, let's just right.

25
00:02:21,240 --> 00:02:23,580
A condition that says if a.

26
00:02:25,210 --> 00:02:27,880
Is less than five.

27
00:02:28,890 --> 00:02:36,660
Then we want to continue with the loop, so this is the second statement and the third statement of

28
00:02:36,660 --> 00:02:44,470
the for loop is something that is going to be executed at the end of each iteration of the loop.

29
00:02:44,850 --> 00:02:53,850
So in this case, we just need to increment the value of a because if we don't do this, this loop is

30
00:02:53,850 --> 00:02:55,710
going to run forever.

31
00:02:55,860 --> 00:03:02,640
So then we can just increment the value of a using the incremental operator.

32
00:03:02,790 --> 00:03:04,290
So now we're just.

33
00:03:05,870 --> 00:03:14,420
Wrote a piece of code that is going to be executed before the loop starts, so before the loop starts,

34
00:03:14,420 --> 00:03:16,420
we are going to create this variable.

35
00:03:16,790 --> 00:03:25,790
Then we wrote the condition for the loop to keep running, and then we just wrote something that's going

36
00:03:25,790 --> 00:03:30,080
to be executed at the end of each iteration.

37
00:03:30,200 --> 00:03:34,610
So at each iteration, what do we want to do?

38
00:03:34,950 --> 00:03:37,670
So let's just do cancel the log.

39
00:03:39,670 --> 00:03:46,360
And then let's just send the a variable just so we can see what's going on with this loop.

40
00:03:47,140 --> 00:03:48,370
So saving this.

41
00:03:50,230 --> 00:03:58,300
Refreshing the page, we can see that we have zero one, two, three, four, and then the loop just

42
00:03:58,300 --> 00:03:58,890
ended.

43
00:03:59,440 --> 00:04:05,140
And this is because the condition is that A is less than five.

44
00:04:05,380 --> 00:04:09,760
So we just started the loop with a equals zero.

45
00:04:10,000 --> 00:04:14,350
Then this is the condition for the loop to to keep running.

46
00:04:14,590 --> 00:04:19,910
And this is the code that's going to be executed after each iteration.

47
00:04:20,230 --> 00:04:20,890
So.

48
00:04:22,830 --> 00:04:24,210
When we print zero.

49
00:04:25,940 --> 00:04:32,530
This is the end of the first iteration, so then we are just going to increment the value of eight,

50
00:04:32,960 --> 00:04:38,300
then the loop is going to keep running until this condition returns.

51
00:04:38,600 --> 00:04:39,410
False.

52
00:04:39,830 --> 00:04:43,770
So this is how the for loop works.

53
00:04:44,060 --> 00:04:52,190
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

54
00:04:52,190 --> 00:04:53,780
elements of an array?

55
00:04:55,580 --> 00:05:01,370
So going back to the page, I'm just going to copy this student's variable.

56
00:05:07,160 --> 00:05:15,760
So now we have this array that for now it has five elements, but it could be 50, it could be 500,

57
00:05:15,770 --> 00:05:16,650
we don't know.

58
00:05:16,970 --> 00:05:25,250
So we are just going to write one piece of code that's going to be working for arrays of any size.

59
00:05:25,580 --> 00:05:27,040
So how do we do this?

60
00:05:27,140 --> 00:05:29,380
I'm just going to start a for loop.

61
00:05:29,600 --> 00:05:37,210
So again, open and close parentheses, open and close, curly braces inside the curly braces.

62
00:05:37,700 --> 00:05:40,820
We're going to write the code we want.

63
00:05:41,210 --> 00:05:48,460
And inside parentheses, let's remember the three statements that we need to write.

64
00:05:48,740 --> 00:05:51,710
So the first one is creating a variable.

65
00:05:52,040 --> 00:05:53,630
So var a.

66
00:05:57,630 --> 00:05:59,160
Equals zero.

67
00:05:59,490 --> 00:06:07,740
We don't have to do this every time, just having mind that this is a statement that it's going to run

68
00:06:08,640 --> 00:06:11,320
one time before we start the loop.

69
00:06:12,060 --> 00:06:14,430
So in this case, this makes sense.

70
00:06:15,330 --> 00:06:21,850
And now the second statement is going to be the condition for the loop to keep running.

71
00:06:22,110 --> 00:06:28,890
So now this is going to be a bit different because now we're going to say that the condition is that

72
00:06:28,890 --> 00:06:33,270
A is less than the student.

73
00:06:35,920 --> 00:06:36,580
Ouray.

74
00:06:37,910 --> 00:06:38,510
That.

75
00:06:40,420 --> 00:06:41,020
Lenth.

76
00:06:41,840 --> 00:06:49,590
So this means that we are going to run through all these elements, and when A is higher than students

77
00:06:49,610 --> 00:06:53,780
that length, we are just going to stop this loop.

78
00:06:53,990 --> 00:06:56,890
So this is how we use loops with a race.

79
00:06:57,020 --> 00:07:00,260
And now the same thing we can just use.

80
00:07:02,060 --> 00:07:09,650
The incremental operator, you can do it like this, as I've showed you in the previous lessons, like

81
00:07:09,920 --> 00:07:18,840
a plus equals one, or you can just use a plus plus, which is the same thing.

82
00:07:18,860 --> 00:07:27,110
This is another incremental operator that's just going to add one to this variable.

83
00:07:27,620 --> 00:07:32,630
So it's more common to see for loops written like this.

84
00:07:34,050 --> 00:07:37,210
So now we just need to do something.

85
00:07:37,230 --> 00:07:45,490
So now every iteration of the loop, so the first iteration A is going to be zero.

86
00:07:45,900 --> 00:07:54,810
So what we want to do is just using the students array and then we are going to use an index.

87
00:07:56,040 --> 00:08:04,380
So instead of just putting a number like one, like zero or one, we're just going to use the A variable.

88
00:08:04,830 --> 00:08:07,840
So we the first iteration, it's going to be a zero.

89
00:08:08,010 --> 00:08:13,560
So it's going to get the first element, then it's going to increment it.

90
00:08:13,920 --> 00:08:17,370
And at the second iteration, it's going to be one.

91
00:08:17,670 --> 00:08:20,630
So it's just going to get all the elements.

92
00:08:20,640 --> 00:08:27,800
And then when we reach the end of the array, then this condition is not going to be true anymore.

93
00:08:27,810 --> 00:08:29,980
So our loop is going to stop.

94
00:08:30,450 --> 00:08:32,310
So let's just do console.

95
00:08:35,490 --> 00:08:36,570
Not log.

96
00:08:40,190 --> 00:08:49,580
So we can send all these names to the council using a loop, as you can see, no matter how many elements

97
00:08:49,580 --> 00:08:54,920
we have in our array, we just need to write one line of code.

98
00:08:56,670 --> 00:09:05,670
To work with all these elements, so let's just save this now, returning to the page and refresh the

99
00:09:05,670 --> 00:09:07,890
page, we can see that now.

100
00:09:08,850 --> 00:09:14,040
We're just printing all the elements of this array with just one line of code.

101
00:09:14,220 --> 00:09:23,040
Now, this is very useful to work with arrays so we could get like all the P elements of our page and

102
00:09:23,040 --> 00:09:24,870
do something with them.

103
00:09:25,330 --> 00:09:33,270
But if we are working with objects, then this is going to be a bit different because objects don't

104
00:09:33,270 --> 00:09:34,470
have a length.

105
00:09:34,830 --> 00:09:40,800
So if we are working with objects, we're going to have to use the four in loop.

106
00:09:41,130 --> 00:09:44,610
So let me just copy this car object.

107
00:09:56,070 --> 00:10:02,430
So if I want to go through all these elements, I cannot use the for loop because objects, they don't

108
00:10:02,430 --> 00:10:09,920
have a length, but there's a very easy way of doing this, which is using the four in loop.

109
00:10:10,380 --> 00:10:13,240
So I'm just going to write the same way.

110
00:10:13,260 --> 00:10:22,530
So for open and close parentheses, open and close, curly braces, but instead of the three statements

111
00:10:22,530 --> 00:10:29,400
here, I'm just going to create a new variable, let's say, prop for the properties.

112
00:10:29,640 --> 00:10:32,780
So prop in car.

113
00:10:33,420 --> 00:10:38,690
So what this is going to do is just iterating through this object.

114
00:10:38,940 --> 00:10:42,360
So it's just going to get the first property.

115
00:10:42,360 --> 00:10:50,230
Second, third, fourth is just going to get all the properties of this element.

116
00:10:50,550 --> 00:10:59,630
So at every iteration of the loop, the property is going to be assigned for this prop variable.

117
00:10:59,970 --> 00:11:04,290
So at each iteration we can do so that log.

118
00:11:08,190 --> 00:11:13,650
Let's just try to print prop just so we can see what's going on here.

119
00:11:16,610 --> 00:11:26,840
So if we do this, we can see that at every iteration of the loop, it just went through and get your

120
00:11:27,140 --> 00:11:31,210
model manufacture and fuel type.

121
00:11:31,580 --> 00:11:39,800
So if we want to print the value, we just need to use this because we know how to access properties

122
00:11:39,800 --> 00:11:40,870
of objects.

123
00:11:41,150 --> 00:11:44,270
So instead of doing this, we can just print.

124
00:11:45,580 --> 00:11:51,100
The prop, and then we can concatenate it with some string.

125
00:11:52,310 --> 00:12:01,520
So let's use the Callon and a space, and now we can just use the car object.

126
00:12:03,620 --> 00:12:12,590
And we know that to access these properties, we need to use the Brace's and inside here we name the

127
00:12:12,590 --> 00:12:21,320
properties and we know that at each iteration of the loop, this property is going to be one of the

128
00:12:21,320 --> 00:12:22,540
object properties.

129
00:12:22,880 --> 00:12:24,200
So if we just.

130
00:12:25,240 --> 00:12:26,770
Use this variable here.

131
00:12:30,200 --> 00:12:38,900
And refresh the page, we can see that we were able to loop through the elements of an object, so now

132
00:12:38,900 --> 00:12:41,990
we didn't have to set an end to this loop.

133
00:12:42,410 --> 00:12:46,640
We just used prop and car.

134
00:12:47,000 --> 00:12:54,320
And it is going to automatically go through all the properties and just end the loop after the last

135
00:12:54,320 --> 00:12:55,250
property.

136
00:12:55,670 --> 00:13:00,710
And we can access the properties using the variable that we created with the loop.

137
00:13:01,010 --> 00:13:06,050
And we can also access the values by using the name of the variable.

138
00:13:07,540 --> 00:13:12,140
And using the prop variable inside braces.

139
00:13:12,910 --> 00:13:14,330
So this is pretty cool.

140
00:13:14,350 --> 00:13:18,410
We are going to use this more in the next few lessons.

141
00:13:18,430 --> 00:13:19,810
Don't worry too much.

142
00:13:20,020 --> 00:13:22,890
This is just the first time we are seeing this.

143
00:13:22,900 --> 00:13:30,430
I know this could be a bit confusing for some people, but trust me, this is going to be very, very

144
00:13:30,430 --> 00:13:33,070
easy when we do a few more examples.

145
00:13:34,480 --> 00:13:42,600
So now that we know how this loop works, let's see an example using age HTML elements, so I have three

146
00:13:42,610 --> 00:13:45,700
age HTML elements with the same class.

147
00:13:46,270 --> 00:13:48,850
So let's go to Visual Studio Code.

148
00:13:51,310 --> 00:13:56,380
And now I'm just going to create a new variable called aliments.

149
00:14:00,370 --> 00:14:09,850
And I'm just going to use document, Don, to get element by class name, which we know is going to

150
00:14:09,850 --> 00:14:11,260
return an array.

151
00:14:11,770 --> 00:14:14,560
So the class name is example.

152
00:14:18,110 --> 00:14:22,850
If I do this, let me save this and refresh the page.

153
00:14:23,270 --> 00:14:27,520
Now let's see the elements variable.

154
00:14:27,890 --> 00:14:37,850
We can see that this is a collection of ASML elements with three elements, which are these three elements

155
00:14:37,850 --> 00:14:38,240
here.

156
00:14:38,510 --> 00:14:43,250
So now let's do something with all of these elements using loops.

157
00:14:45,490 --> 00:14:50,320
So now I'm just going to copy the structure for the for loop.

158
00:14:56,050 --> 00:15:07,480
So I'm going to start this variable with zero, then I'm just going to use a is less than elements that

159
00:15:08,170 --> 00:15:08,860
lenth.

160
00:15:09,870 --> 00:15:18,450
And then I'm just going to increment the value of a using this shorter incremental operator and then

161
00:15:18,450 --> 00:15:22,050
at each iteration, I'm just going to do.

162
00:15:23,170 --> 00:15:24,070
Aliments.

163
00:15:27,270 --> 00:15:35,910
Then I'm going to use a as an index, because let me go back to the page, we have these three elements.

164
00:15:36,210 --> 00:15:46,260
If I just do elements and I try to use the first index, we can see that this has been selected so we

165
00:15:46,260 --> 00:15:50,050
can do this with all the elements of our array.

166
00:15:50,250 --> 00:15:58,410
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

167
00:15:58,410 --> 00:16:00,300
the success of Element.

168
00:16:00,570 --> 00:16:04,670
So I'm going to change the color of this element to orange.

169
00:16:05,040 --> 00:16:07,170
And let me copy this.

170
00:16:09,010 --> 00:16:14,320
I'm going to do the same thing, so I'm going to change the font weight.

171
00:16:16,910 --> 00:16:18,260
So in this case.

172
00:16:24,700 --> 00:16:28,900
I can do it like this because this has a dash or.

173
00:16:30,670 --> 00:16:32,590
I can just use Dot.

174
00:16:33,820 --> 00:16:34,570
Font.

175
00:16:35,540 --> 00:16:44,630
Wait and use the camel case, so the font weight is going to be vode, so if I do this and.

176
00:16:45,790 --> 00:16:47,260
Refresh the page.

177
00:16:49,510 --> 00:16:59,140
Now, we were able to select every element with a class of example and just change the seats for all

178
00:16:59,140 --> 00:16:59,660
of them.

179
00:17:00,220 --> 00:17:04,150
So going back to the HTML of this lesson.

180
00:17:05,400 --> 00:17:11,580
So here it is, let's try to add a few more elements with the same class.

181
00:17:13,680 --> 00:17:16,920
So here we have a few more.

182
00:17:17,940 --> 00:17:18,780
Aliments.

183
00:17:19,920 --> 00:17:30,090
So now we have way more elements of that class, let's name an element four, five, six and seven.

184
00:17:30,360 --> 00:17:37,740
It doesn't matter how many elements we have, we can change the success for all of them with just one

185
00:17:37,740 --> 00:17:38,340
loop.

186
00:17:39,150 --> 00:17:40,930
So refreshing the page.

187
00:17:41,460 --> 00:17:46,990
Now we have more elements and we just changed the success for all of them.

188
00:17:47,520 --> 00:17:49,950
So that was all I wanted to say for now.

189
00:17:49,950 --> 00:17:54,120
In the next lesson we are going to learn about while loops.

190
00:17:54,150 --> 00:17:55,080
I'll see you then.