1
00:00:01,020 --> 00:00:02,010
Welcome back, ladies and gentlemen.

2
00:00:02,030 --> 00:00:08,040
Today, we do another awesome lecture, so create a lecture nine that Jesus link it here and I have

3
00:00:08,040 --> 00:00:10,410
written some code here, but you don't have to worry about it.

4
00:00:10,650 --> 00:00:16,060
So today we are going to do JavaScript loops and they are essential for JavaScript.

5
00:00:16,260 --> 00:00:18,330
So I do have here car.

6
00:00:18,360 --> 00:00:20,330
Sorry, so you can write this one down.

7
00:00:20,610 --> 00:00:23,400
So I have cars name in here.

8
00:00:23,400 --> 00:00:26,060
I do have some explanation because this will save me a time.

9
00:00:26,370 --> 00:00:31,200
So let me just first explain you and then you can pause the video and do all of this.

10
00:00:31,670 --> 00:00:35,450
OK, now the loops are very handy.

11
00:00:35,460 --> 00:00:41,910
So if we want to run the same code over and over again and not to write it manually, then the loops

12
00:00:41,910 --> 00:00:44,050
are very good for this.

13
00:00:44,400 --> 00:00:48,720
Now we have different loops for while the well, for which there are others as well.

14
00:00:48,900 --> 00:00:52,590
But it's OK for now to know all only this.

15
00:00:52,800 --> 00:01:00,600
OK, so I do have this carceral and if I do want to do if I do want to bring out their values, their

16
00:01:00,630 --> 00:01:03,240
items, then I will need to know their indexes.

17
00:01:03,240 --> 00:01:03,690
Right.

18
00:01:03,720 --> 00:01:13,350
So if I save this, they go back here, inspect, console, lock, and I will do have array of 11.

19
00:01:13,770 --> 00:01:14,150
Right.

20
00:01:14,850 --> 00:01:15,230
Good.

21
00:01:15,900 --> 00:01:22,010
So also I can uncommon this one and I will see the names of all of the items manually.

22
00:01:22,170 --> 00:01:23,670
But this is too much pain for us.

23
00:01:23,850 --> 00:01:26,010
And we as developers don't want this.

24
00:01:26,190 --> 00:01:31,030
That's why we went loops, because loops are working perfectly with arrays in the loops.

25
00:01:31,050 --> 00:01:34,770
They're always start from position zero and what our starting position zero.

26
00:01:35,490 --> 00:01:39,270
Well, look at this, the index of the arrays.

27
00:01:39,540 --> 00:01:43,390
So that is going to be pretty much what you need to understand.

28
00:01:43,690 --> 00:01:51,470
Now, the for loop, it's one of the mostly use loops and foreach now at the moment, actually.

29
00:01:51,720 --> 00:01:56,640
But the thing is that they're saying so four have three different statements inside.

30
00:01:56,970 --> 00:02:00,230
This will be when we set the variable eye to zero.

31
00:02:00,690 --> 00:02:03,000
This is where we are checking the condition.

32
00:02:03,300 --> 00:02:09,690
And this is we increment the value of I for one only.

33
00:02:09,690 --> 00:02:14,270
So I plus plus is same as I equals I plus one.

34
00:02:14,610 --> 00:02:17,010
So zero equals zero plus one.

35
00:02:17,010 --> 00:02:18,300
It will be one.

36
00:02:18,670 --> 00:02:27,060
OK, so the first statement will be executed only once before this block of code runs right in actually

37
00:02:27,060 --> 00:02:29,580
in this block of code I have this comment.

38
00:02:29,580 --> 00:02:32,240
They will not run but I have only control that lot.

39
00:02:32,650 --> 00:02:36,750
Now this condition and this will be done in every loop.

40
00:02:37,050 --> 00:02:40,890
So the condition must be true in order to get inside this curly bracket.

41
00:02:41,310 --> 00:02:44,670
Now, let me just say it again for writing a for loop.

42
00:02:44,670 --> 00:02:46,050
We need to specify the four key.

43
00:02:46,530 --> 00:02:51,750
Then we need to have three statements inside this one is condition this when we are setting the variable,

44
00:02:51,900 --> 00:02:54,900
it will run only once this is the condition.

45
00:02:54,900 --> 00:03:02,430
And this is what the increment of the variable I know very well I can be G and if we use GE, we can

46
00:03:02,730 --> 00:03:04,860
need to change it everywhere.

47
00:03:05,370 --> 00:03:06,900
So why we use AI?

48
00:03:06,930 --> 00:03:11,340
Well in every textbook that you're going to do, in every programming language that you're going to

49
00:03:11,340 --> 00:03:11,950
start with.

50
00:03:12,120 --> 00:03:14,670
So I do use as an index.

51
00:03:15,080 --> 00:03:15,480
Right.

52
00:03:16,270 --> 00:03:23,250
So that's why I'm using it today, because in most of tutorials or anything that you're going to start

53
00:03:23,280 --> 00:03:30,020
even in textbooks, you're going to see they're using I OK now how this works.

54
00:03:30,030 --> 00:03:34,860
So I the condition and let's do the first loop.

55
00:03:35,580 --> 00:03:39,420
So this will be set to zero now the condition will be checked.

56
00:03:39,900 --> 00:03:45,300
Zero is I, the condition is zero is smaller than five, which is will be true.

57
00:03:45,450 --> 00:03:47,460
And that's why it's going to go inside here.

58
00:03:47,790 --> 00:03:52,320
Then the console lock will be print because this is the only line of code that we have here.

59
00:03:53,130 --> 00:03:57,180
And then the AI plus plus will be increment.

60
00:03:57,420 --> 00:04:04,260
So the AI value of I will be incremented by one only right now for the next loop.

61
00:04:04,800 --> 00:04:07,610
So I will be one because we incremented on the last step.

62
00:04:07,980 --> 00:04:11,850
So the condition I want is Erdan five is going to be true.

63
00:04:12,540 --> 00:04:14,670
Consultant don't look I sorry.

64
00:04:14,670 --> 00:04:19,110
And then incremented so I will be two now on the next step.

65
00:04:19,650 --> 00:04:21,120
Same same.

66
00:04:21,360 --> 00:04:30,870
And when we have four right now we four is smaller than five then returns through the console log of

67
00:04:30,870 --> 00:04:38,400
this one is executed in AI plus plus becomes five now five five is smaller than five which is false

68
00:04:38,820 --> 00:04:42,180
and that will break out of the loop and the loop will stop working.

69
00:04:42,780 --> 00:04:49,650
Now ladies and gentlemen, you can break the loop for example, if you want, if you want to do that

70
00:04:49,650 --> 00:04:54,900
intentionally, this loop can run forever and it will block your code.

71
00:04:54,900 --> 00:04:56,130
It will block your computer.

72
00:04:56,340 --> 00:04:56,820
It will.

73
00:04:57,750 --> 00:04:58,980
It will mean.

74
00:04:58,980 --> 00:05:00,150
It will dry your.

75
00:05:00,450 --> 00:05:08,340
RAM and CPU and whatever, so please make sure that you set the condition right, because if you set

76
00:05:08,340 --> 00:05:13,980
the condition very differently than this one, then it can continuously running or even if you copy

77
00:05:13,980 --> 00:05:19,080
the same one with different condition and you put it in the browser, the browser will get stuck and

78
00:05:19,080 --> 00:05:20,310
it will crash eventually.

79
00:05:20,640 --> 00:05:27,150
OK, so I've told you all of this now how we can implement it with the cars array.

80
00:05:27,480 --> 00:05:28,890
Well, let's ride.

81
00:05:30,330 --> 00:05:38,820
For example, now for variable of J is equal to zero.

82
00:05:38,850 --> 00:05:41,690
Now I'm going to change it because I told you it can be different.

83
00:05:41,940 --> 00:05:48,060
J Smaller than not case are smaller than 11.

84
00:05:48,270 --> 00:05:50,300
That was the length of the array.

85
00:05:51,200 --> 00:05:51,640
Right.

86
00:05:53,150 --> 00:05:55,620
And plus, plus.

87
00:05:55,910 --> 00:05:57,710
OK, now, Conseil.

88
00:05:59,640 --> 00:06:03,830
Lot of cars of G, so I need cars of G.

89
00:06:04,060 --> 00:06:07,260
Well, the G will be zero in the first loop, right.

90
00:06:07,510 --> 00:06:12,290
And it will print out cars of zero on the second loop because it will be incremental.

91
00:06:12,310 --> 00:06:15,280
The condition will be true until it reach 11.

92
00:06:15,640 --> 00:06:16,060
Right.

93
00:06:17,450 --> 00:06:19,770
Actually, we don't we don't need yet.

94
00:06:19,790 --> 00:06:24,850
Let's see what will happen, so I'm going to save it and this will run until this condition is true.

95
00:06:25,040 --> 00:06:32,570
Save and now we do have SAP, Volvo, BMW, Audi, and the last one is Mercedes.

96
00:06:32,570 --> 00:06:37,210
And these are all of our items here and our loop is working.

97
00:06:37,220 --> 00:06:39,950
So again, when you zero, it will be cars of zero.

98
00:06:39,960 --> 00:06:41,470
Then on the next loop it will be cars.

99
00:06:41,470 --> 00:06:47,960
So one of the next cars of of two, three, four, five, six, seven, eight, nine, 10 when it reaches

100
00:06:48,230 --> 00:06:51,020
the eleven, eleven is not smaller than 11.

101
00:06:51,020 --> 00:06:52,000
It will break the loop.

102
00:06:52,010 --> 00:06:58,280
But what about I don't want to use if you don't want to use this fixed size here.

103
00:06:58,310 --> 00:07:00,740
Well if you go back here.

104
00:07:03,040 --> 00:07:15,400
You will see that we have length of 11, right, so we can use cars the length and that will save us

105
00:07:15,670 --> 00:07:19,880
calculating how many indexes we do have and it will produce the same result.

106
00:07:20,260 --> 00:07:20,870
Very good.

107
00:07:21,340 --> 00:07:22,450
Next loop is.

108
00:07:23,530 --> 00:07:29,320
Sorry, while you now don't write anything until I say you need to write because you can block your

109
00:07:29,320 --> 00:07:29,630
code.

110
00:07:30,010 --> 00:07:36,400
So what we have here in a while, we start like this with that, while then in these records we set

111
00:07:36,400 --> 00:07:37,030
the condition.

112
00:07:37,540 --> 00:07:47,560
I is smaller than five right now, cause a lot of I don't save anything if you do to get if you type

113
00:07:47,560 --> 00:07:49,190
to get on with me, please just wait.

114
00:07:49,750 --> 00:07:54,370
Now, I do have only the condition here, the same condition that I do have here.

115
00:07:54,380 --> 00:07:54,640
Right.

116
00:07:55,240 --> 00:07:56,750
But where is I.

117
00:07:56,890 --> 00:08:04,450
So in order to use I we need to set the eye outside of the while loop condition.

118
00:08:05,140 --> 00:08:11,200
I mean, outside of the wire in the last parameter that we need to set, we need to increment the I

119
00:08:11,380 --> 00:08:16,610
for one and that should be inside the this code of light.

120
00:08:16,690 --> 00:08:18,270
So save it now.

121
00:08:18,280 --> 00:08:21,090
It will work and it will go zero, one, two, three and four.

122
00:08:21,580 --> 00:08:22,740
That is pretty much it.

123
00:08:23,110 --> 00:08:30,640
Now if you don't specify this and you delete it, for example, this line here and you save it and you

124
00:08:30,640 --> 00:08:38,680
try to run it, then you will see that your computer will stack y well, because I is going to be always

125
00:08:38,680 --> 00:08:42,610
smaller than five and I will never be incremented by one.

126
00:08:43,000 --> 00:08:43,360
Right.

127
00:08:43,570 --> 00:08:49,840
And this will be always true and it will loop until infinity or until your computer crash.

128
00:08:50,110 --> 00:08:50,630
Very good.

129
00:08:51,280 --> 00:08:51,820
Next one.

130
00:08:54,220 --> 00:08:55,040
Do while.

131
00:08:56,080 --> 00:08:57,430
Now why we need to do while.

132
00:08:57,460 --> 00:08:58,660
Well, do.

133
00:09:01,010 --> 00:09:11,990
And I'm say Conjola, lot of K, let's say Kay here, Kay, plus, plus, so we do have Samia's while

134
00:09:11,990 --> 00:09:18,860
conditio, we do have Kay plus plus inside and we need to specify Kay outside here globally.

135
00:09:20,510 --> 00:09:21,950
Very good now.

136
00:09:23,400 --> 00:09:32,390
One more thing that I do while so in while statement, I said the condition K is smaller than five,

137
00:09:32,970 --> 00:09:34,800
let's make it smaller than 10.

138
00:09:35,300 --> 00:09:38,100
OK, now how this will work.

139
00:09:38,550 --> 00:09:43,200
So if I save it, I will see from zero until nine.

140
00:09:43,230 --> 00:09:44,220
Let me just do this.

141
00:09:44,610 --> 00:09:45,840
Console that lock.

142
00:09:47,370 --> 00:09:48,330
Do while loop.

143
00:09:51,850 --> 00:09:53,680
Very good and.

144
00:09:55,180 --> 00:10:00,830
But to here only while loop so you can see what was happening.

145
00:10:01,390 --> 00:10:01,910
Very good.

146
00:10:02,020 --> 00:10:04,840
So I have a while loop and I have do while loop in.

147
00:10:04,840 --> 00:10:05,860
I have here space.

148
00:10:05,860 --> 00:10:08,290
That's why it doesn't look very charming.

149
00:10:08,490 --> 00:10:13,870
OK, so but what somebody will ask me, what's the difference between this one and this one.

150
00:10:13,990 --> 00:10:19,840
Except I could do before that and while loop at there so.

151
00:10:20,700 --> 00:10:28,530
Do while loop is different than this one, because this code of black will be executed only once, even

152
00:10:28,530 --> 00:10:34,740
if the condition is not true, for example, K is zero, zero is smaller than 10, and it will work.

153
00:10:34,740 --> 00:10:38,730
But if Keesey level is ten, ten is not smaller than 10.

154
00:10:38,760 --> 00:10:39,690
Let me just do this.

155
00:10:40,050 --> 00:10:41,130
So I will say ten here.

156
00:10:41,160 --> 00:10:41,490
Right.

157
00:10:42,390 --> 00:10:43,860
So the condition is not true.

158
00:10:44,070 --> 00:10:49,580
And here, if I put far I is equal to five, this will never run.

159
00:10:49,590 --> 00:10:51,720
But look at what will happen with the wire loop.

160
00:10:53,530 --> 00:10:59,500
So it will print out the ten only why this is happening, well, because we print out the ten, so do

161
00:10:59,500 --> 00:11:07,000
while Loop will get inside this block here and it will run at least once, then it will check the condition.

162
00:11:07,030 --> 00:11:10,450
The condition is not true and then it will stop the whilom.

163
00:11:10,660 --> 00:11:18,190
So you used the while when you want to run the code inside this body at least once.

164
00:11:18,730 --> 00:11:22,010
But with while you can do that, you check the condition before it.

165
00:11:22,180 --> 00:11:23,530
And same with four.

166
00:11:24,190 --> 00:11:27,440
That is pretty much it for these loops.

167
00:11:28,090 --> 00:11:35,170
Let me just explain one more thing, and that is for each let me just write it here for each.

168
00:11:36,470 --> 00:11:36,780
Good.

169
00:11:37,640 --> 00:11:50,270
So how do we forage well, for each is pretty much the same as a for just more nicer looking and very

170
00:11:50,270 --> 00:11:51,440
easy to understand.

171
00:11:51,710 --> 00:11:59,730
So let me just write this index, a red dot for each, then I have function inside, then I have in

172
00:11:59,750 --> 00:12:00,210
function.

173
00:12:00,230 --> 00:12:05,530
I have access to the current value to I or index.

174
00:12:05,540 --> 00:12:07,700
Let me just write it like this and to the array.

175
00:12:08,150 --> 00:12:11,920
And after that I do have this function.

176
00:12:12,020 --> 00:12:14,600
So you don't need to know all of these things.

177
00:12:14,600 --> 00:12:14,950
Right.

178
00:12:15,260 --> 00:12:18,510
So we're not there yet, but I'm just going to explain it to you anyway.

179
00:12:18,890 --> 00:12:20,830
So what is happening here?

180
00:12:21,320 --> 00:12:23,400
What is required to have in this one?

181
00:12:23,420 --> 00:12:28,550
So the current value is something that is required and that's a value of these current elements that

182
00:12:28,550 --> 00:12:29,250
we are looking at.

183
00:12:29,250 --> 00:12:30,920
Actually, the value of this.

184
00:12:31,250 --> 00:12:31,610
Right?

185
00:12:32,120 --> 00:12:33,530
The index is optional.

186
00:12:35,270 --> 00:12:40,140
In the array's option, but if we need the index, we also have index of this one.

187
00:12:40,220 --> 00:12:43,460
So for each loop's are the same as Falu.

188
00:12:45,140 --> 00:12:46,570
So let me just write it like this.

189
00:12:47,780 --> 00:12:54,400
For each so if you do if you just type for which you will, you should have something similar, right?

190
00:12:54,440 --> 00:12:57,170
So if you click it, it will autocomplete it so.

191
00:12:58,100 --> 00:12:59,670
This is one way of defining it.

192
00:12:59,690 --> 00:13:06,470
Let me just show it to you cause because that's very so cars that for each.

193
00:13:07,580 --> 00:13:13,600
Then we have the element access to the current element, we can change the name to current element,

194
00:13:13,700 --> 00:13:14,090
right.

195
00:13:14,480 --> 00:13:18,890
And let's do cancel that lock current and see what will happen.

196
00:13:20,630 --> 00:13:21,320
Very good.

197
00:13:21,740 --> 00:13:30,890
Now, I do have print out all the values of the foreach, so I don't see an implementation of I j k.

198
00:13:30,890 --> 00:13:31,280
Right.

199
00:13:31,820 --> 00:13:32,790
So how is this?

200
00:13:32,810 --> 00:13:33,620
This is working.

201
00:13:34,220 --> 00:13:39,970
But somebody will say, listen, this is more complex for me because here we are using a function now.

202
00:13:40,070 --> 00:13:46,910
Also, another way to write a feature for each loop is cardstock for each and inside.

203
00:13:48,030 --> 00:13:49,380
You can see function

204
00:13:52,530 --> 00:13:54,210
in Element.

205
00:13:56,620 --> 00:14:03,560
And then what we can do, console lock off element, right, or the current element.

206
00:14:04,030 --> 00:14:15,640
So let me just right here console that log for each loop so you can distinguish the both of them because

207
00:14:15,820 --> 00:14:17,950
you need to know if it's working.

208
00:14:19,330 --> 00:14:19,810
Here it is.

209
00:14:19,810 --> 00:14:23,350
ForEach loop in the loop through all of it with the help of a function.

210
00:14:23,350 --> 00:14:23,620
Right.

211
00:14:23,980 --> 00:14:27,220
And if I want to access the index, here you go.

212
00:14:28,300 --> 00:14:33,880
I bam, I do have the indexes, but it's always good idea to put it here as well.

213
00:14:34,850 --> 00:14:35,220
Right.

214
00:14:36,520 --> 00:14:37,050
Nice.

215
00:14:37,210 --> 00:14:38,340
And also here.

216
00:14:38,770 --> 00:14:40,010
So current element.

217
00:14:40,060 --> 00:14:45,820
Now what I need to do in order to access the current element in index, I need to put this one in brackets

218
00:14:46,090 --> 00:14:47,890
and I will see index here.

219
00:14:49,810 --> 00:14:52,130
And I can print it out here index as well.

220
00:14:53,500 --> 00:14:54,790
Let me just show it to you.

221
00:14:55,180 --> 00:14:55,690
Very good.

222
00:14:56,020 --> 00:14:56,730
Now it's working.

223
00:14:56,740 --> 00:14:59,080
So that was not information.

224
00:14:59,080 --> 00:15:00,820
I know, but this is a footage.

225
00:15:00,820 --> 00:15:02,920
We're going to do more details in future.

226
00:15:03,310 --> 00:15:08,550
And they do have access to current value, to the index, to the rate, and it's pretty much more readable.

227
00:15:08,830 --> 00:15:17,080
So we just plugging the, um, the array here and we let the foreach to do its job.

228
00:15:18,790 --> 00:15:23,830
And also what we can do, because we have access to the function and that function has access to the

229
00:15:23,830 --> 00:15:28,480
element in the index, what we can do, we can cut out this function here, make sure that you put a

230
00:15:28,480 --> 00:15:29,260
semicolon there.

231
00:15:29,590 --> 00:15:37,960
You can cut out of this function and put it here, except I need to name this function and say array

232
00:15:38,740 --> 00:15:45,800
the loop array, for example, and I'm going to pass the function here, loop array.

233
00:15:46,090 --> 00:15:48,130
So it should work now again.

234
00:15:48,160 --> 00:15:48,460
Oops.

235
00:15:48,820 --> 00:15:49,270
Sorry.

236
00:15:50,170 --> 00:15:58,180
There you go for each loop, it is working, so we have the function outside and we can just plug it

237
00:15:58,180 --> 00:16:04,150
here and that is giving us very, very good way of solving things.

238
00:16:04,150 --> 00:16:10,030
And if we want to use the same function everywhere on other plays, then we can do that.

239
00:16:10,240 --> 00:16:13,860
But it's very much that what I want to say about it.

240
00:16:13,870 --> 00:16:16,150
So it's nice Mother and is readable.

241
00:16:16,420 --> 00:16:21,510
And it was a new addition to the ECMAScript before we just used for it.

242
00:16:21,520 --> 00:16:27,400
For now we have a fridge and we have access to the function and that function have access to the criminal

243
00:16:27,580 --> 00:16:30,140
element index and the entire array.

244
00:16:30,280 --> 00:16:33,120
So if we need, we can access this entire area.

245
00:16:33,140 --> 00:16:40,420
But at this stage, this is pretty much, you know, so wrap your head around the for do while and while

246
00:16:40,660 --> 00:16:43,740
and also make sure that you understand how this is working.

247
00:16:44,020 --> 00:16:45,930
So that is pretty much it for this lecture.

248
00:16:45,940 --> 00:16:48,670
I hope you enjoy it and I will see you in the next one.