1
00:00:00,630 --> 00:00:05,790
You guys in this video we're going to talk about loops and iterations so a loop is an instruction that

2
00:00:05,790 --> 00:00:08,580
repeats until a specific condition is reached.

3
00:00:08,580 --> 00:00:14,520
So for instance at the end of an array or when a certain number is reached loops are used to run the

4
00:00:14,520 --> 00:00:17,780
same block of code using different values each time.

5
00:00:17,780 --> 00:00:22,980
All right now there's multiple ways to run iterations in javascript and in most languages the three

6
00:00:22,980 --> 00:00:28,750
most popular types of general loops are for loops while loops and do while loops.

7
00:00:28,770 --> 00:00:33,860
OK these are general loops and then they're in they're found in most programming languages.

8
00:00:33,930 --> 00:00:39,900
So we're going to cover the general loops and then we're going to look at array specific iteration with

9
00:00:39,910 --> 00:00:41,550
foreach and map.

10
00:00:41,610 --> 00:00:48,110
And then we're also going to take a quick look at 4 in which is used to basically loop or iteration

11
00:00:48,390 --> 00:00:53,220
iterate through objects so we can get key value pairs.

12
00:00:53,280 --> 00:00:53,550
All right.

13
00:00:53,550 --> 00:00:57,300
So let's go ahead and start with a for loop.

14
00:00:57,770 --> 00:01:03,210
OK so we're going to say for it's set up like a function then it takes in three parameters that are

15
00:01:03,210 --> 00:01:05,990
separate separated by semi-colons.

16
00:01:06,000 --> 00:01:11,700
So the first is going to be the declaration of a variable so we're going to say let you always want

17
00:01:11,700 --> 00:01:13,570
to use either VAR or let.

18
00:01:13,590 --> 00:01:17,910
You can't use constant side a loop because it's going to keep changing.

19
00:01:17,910 --> 00:01:21,960
All right so we're going to set it set it equal to zero.

20
00:01:22,270 --> 00:01:27,220
Is used very common you also see X but you can use anything.

21
00:01:27,270 --> 00:01:29,580
And the second parameter is going to be the condition.

22
00:01:29,580 --> 00:01:36,000
So let's say as long as I put a space here will say as long as I is less than 10.

23
00:01:36,000 --> 00:01:36,330
All right.

24
00:01:36,330 --> 00:01:37,450
So that's our condition.

25
00:01:37,470 --> 00:01:45,030
And then the last parameter is going to be an increment of ice so I plus plus now plus plus basically

26
00:01:45,030 --> 00:01:48,770
just means this I equals I plus 1.

27
00:01:48,900 --> 00:01:52,990
OK so it's just going to add 1 to whatever is.

28
00:01:53,130 --> 00:01:58,930
Now each time this goes through iterates I is going to be increased by 1.

29
00:01:59,040 --> 00:02:00,450
It starts at zero.

30
00:02:00,480 --> 00:02:06,690
It's going to go through it's going to be 0 then it's going to be 1 2 and so on up until this is no

31
00:02:06,690 --> 00:02:07,700
longer true.

32
00:02:07,830 --> 00:02:11,650
OK up until I is no longer less than 10.

33
00:02:11,940 --> 00:02:19,660
So let's go ahead and just do a console log of I and save it to get.

34
00:02:19,680 --> 00:02:21,990
So we get 0 through 9.

35
00:02:22,030 --> 00:02:26,480
Notice 10 is not included because 10 is not less than 10.

36
00:02:26,490 --> 00:02:32,700
Now if we were to change this to less than or equal to 10 and save then it will actually include 10

37
00:02:32,700 --> 00:02:34,000
in the loop.

38
00:02:34,020 --> 00:02:35,000
All right.

39
00:02:35,820 --> 00:02:39,690
So we can do anything we want within the loop.

40
00:02:39,690 --> 00:02:46,200
For instance if we wanted to log that string number and then just concatenate the aisle like that we

41
00:02:46,200 --> 00:02:49,620
could say numbers 0 through Number 9.

42
00:02:49,620 --> 00:02:50,930
All right.

43
00:02:50,970 --> 00:02:55,710
Now I'm going to show you a couple of things I want to show you how to break out of the loop and also

44
00:02:55,710 --> 00:03:01,620
how to skip an iteration if we want to do something else during a specific iteration.

45
00:03:01,620 --> 00:03:03,920
And these apply to all the loops.

46
00:03:03,930 --> 00:03:08,730
OK for a while do while I'm going to demonstrate them on the for loop.

47
00:03:08,730 --> 00:03:15,380
All right so let's say that for number two and when it hits number two we want it to say something different

48
00:03:15,390 --> 00:03:17,460
like my favorite number is two.

49
00:03:17,670 --> 00:03:19,580
All right so what we would do here.

50
00:03:19,790 --> 00:03:32,070
I'm just commenting so is put an if statement so we'd say if we'll say if it is equal to 2 then let's

51
00:03:32,070 --> 00:03:43,150
do a console log and we'll just say 2 is my favorite number.

52
00:03:43,170 --> 00:03:43,590
All right.

53
00:03:43,620 --> 00:03:48,970
And then actually I want this console lot to be down here.

54
00:03:49,890 --> 00:03:52,070
All right so let's go and save that.

55
00:03:52,070 --> 00:03:58,600
I mean if we look at this we get numbers 0 number one and then it hits the if statement console logs

56
00:03:58,710 --> 00:04:03,450
who is my favorite number and then it keeps going but no said it still does number two so it's still

57
00:04:03,510 --> 00:04:05,600
it still fires this off.

58
00:04:05,610 --> 00:04:11,240
Now if you want to do this instead of this what you could do is use the continue.

59
00:04:11,950 --> 00:04:13,180
The continue statement.

60
00:04:13,200 --> 00:04:17,910
So we'll just say continue like that.

61
00:04:17,910 --> 00:04:23,430
So what that's going to do is it's basically going to stop the loop here and just go to the next iteration

62
00:04:23,430 --> 00:04:28,830
without continuing to go on after that if statements so let's save that.

63
00:04:28,950 --> 00:04:30,260
And now you see there is no.

64
00:04:30,260 --> 00:04:34,490
Number two it's been replaced with two is my favorite number.

65
00:04:34,500 --> 00:04:34,850
All right.

66
00:04:34,860 --> 00:04:39,790
So continued just means keep going with the loop go to the next iteration.

67
00:04:39,810 --> 00:04:40,140
All right.

68
00:04:40,140 --> 00:04:46,700
Now we also have break and we're break does is as you probably guess it just breaks out of the loop.

69
00:04:46,710 --> 00:04:56,840
So what I'm going to do is I'm going to say if I is equal to let's say five then let's break.

70
00:04:56,850 --> 00:05:02,700
All right so we'll go ahead and save will you get number 0 number 1 2 is my favorite number 3 four and

71
00:05:02,700 --> 00:05:03,290
that's it.

72
00:05:03,300 --> 00:05:04,860
It broke out all right.

73
00:05:04,860 --> 00:05:07,260
And you can do something here if you want as well.

74
00:05:07,260 --> 00:05:14,080
We can say Konsole log and we'll say stop the loop and save.

75
00:05:14,100 --> 00:05:14,720
All right.

76
00:05:14,970 --> 00:05:21,210
So you can break and continue these are really important statements to know to understand how these

77
00:05:21,210 --> 00:05:23,790
work within loops.

78
00:05:24,120 --> 00:05:25,500
All right so that's a for loop.

79
00:05:25,500 --> 00:05:27,600
Now let's take a look at a while loop.

80
00:05:27,900 --> 00:05:29,170
Let's go ahead and comment.

81
00:05:29,180 --> 00:05:33,690
So let's go ahead and put in a while.

82
00:05:34,350 --> 00:05:34,720
All right.

83
00:05:34,720 --> 00:05:38,310
So it's really preference on what you want to use.

84
00:05:38,310 --> 00:05:40,440
I tend to use four loops more.

85
00:05:40,650 --> 00:05:48,750
One general rule that you'll hear sometimes is that you should use a for loop when you know when you

86
00:05:48,750 --> 00:05:50,490
know how many times it's going to run.

87
00:05:50,490 --> 00:05:52,250
How many iterations it's going to have.

88
00:05:52,250 --> 00:05:54,470
And then use a while loop when you don't.

89
00:05:54,470 --> 00:05:56,020
When it's unclear.

90
00:05:56,310 --> 00:05:57,780
But that's not human.

91
00:05:57,970 --> 00:05:59,660
It's not always black and white.

92
00:05:59,940 --> 00:06:06,150
So how we set up a while loop is we set the variable outside of the loop so let's say when I he calls

93
00:06:06,170 --> 00:06:11,850
0 and then down here let's do

94
00:06:14,430 --> 00:06:19,860
while and then our condition our condition is the only thing that goes in here it's not like the for

95
00:06:19,860 --> 00:06:22,150
loop where he put all that stuff in.

96
00:06:22,230 --> 00:06:27,350
All we want is the condition which is going to be if I is less than 10.

97
00:06:27,360 --> 00:06:27,730
All right.

98
00:06:27,750 --> 00:06:32,540
And then inside the while loop is where we do whatever we want to do in this case I'm just going to

99
00:06:32,550 --> 00:06:35,880
console log and we'll just say number

100
00:06:40,170 --> 00:06:42,300
and then we need to do our increment here.

101
00:06:42,300 --> 00:06:43,710
So I've plus plus.

102
00:06:43,710 --> 00:06:47,280
OK you want to make sure you increment inside the while loop.

103
00:06:47,310 --> 00:06:52,920
All right so let's go out and save this and we get as expected number 0 to number nine.

104
00:06:52,920 --> 00:06:59,590
All right so this works in this situation the same way that it worked with the for loop.

105
00:06:59,640 --> 00:07:01,500
All right so that's a while loop.

106
00:07:01,500 --> 00:07:04,530
Now let's take a look at a do while loop.

107
00:07:04,530 --> 00:07:04,890
All right.

108
00:07:04,890 --> 00:07:10,650
Now a do while loop is different because it's always going to run at least once.

109
00:07:10,650 --> 00:07:11,780
No matter what.

110
00:07:11,910 --> 00:07:13,320
OK and I'll show you what I mean.

111
00:07:13,320 --> 00:07:21,480
So we're going to say let I equals zero and then we're going to say do open up some curly braces in

112
00:07:21,480 --> 00:07:34,850
here we'll do a console dot log and we'll just say number I we're going to do our increment and then

113
00:07:34,940 --> 00:07:39,010
under the do we do a while and that's going to have our condition.

114
00:07:39,140 --> 00:07:41,750
All right which is going to be I is less than 10.

115
00:07:41,990 --> 00:07:46,530
So let's save that and we get the same exact thing that we got with the while loop.

116
00:07:46,530 --> 00:07:50,450
Now what's different about this is this is always going to run.

117
00:07:50,600 --> 00:07:51,780
No matter what.

118
00:07:51,830 --> 00:07:55,850
Ok this due right here even if this condition isn't met.

119
00:07:55,850 --> 00:08:03,260
So if we were to set this high to 100 which obviously is not less than 10 and we save you'll see that

120
00:08:03,290 --> 00:08:04,900
it's going to run anyways.

121
00:08:05,000 --> 00:08:07,090
So we get number one hundred.

122
00:08:07,100 --> 00:08:07,400
All right.

123
00:08:07,400 --> 00:08:12,500
So that's the big difference between a while and a while is that it's always going to run once no matter

124
00:08:12,500 --> 00:08:13,530
what.

125
00:08:14,240 --> 00:08:14,660
All right.

126
00:08:14,660 --> 00:08:20,520
Now I want to show you how we can use loops to loop through arrays.

127
00:08:20,690 --> 00:08:28,130
Now like I said arrays have specific methods for looping through which I would suggest using over like

128
00:08:28,130 --> 00:08:29,470
a for loop or something.

129
00:08:29,570 --> 00:08:30,620
But you can do it.

130
00:08:30,620 --> 00:08:33,360
So let's let's go ahead and create an array.

131
00:08:33,460 --> 00:08:39,190
Say Cause I I'll set it to an array of just car named cells a Ford

132
00:08:42,160 --> 00:08:48,920
Chevy Honda and will say Toyota.

133
00:08:49,180 --> 00:08:58,980
All right so we have these car names and then we can do a for loop so we can say Let let.

134
00:08:59,050 --> 00:09:00,300
Equals zero.

135
00:09:00,460 --> 00:09:07,060
And the condition is going to be if I is less than and then the array name which is cars Daut length

136
00:09:07,060 --> 00:09:10,930
because we can count the number of values in the array.

137
00:09:11,230 --> 00:09:11,530
All right.

138
00:09:11,530 --> 00:09:13,980
And then we just want to do plus plus.

139
00:09:14,020 --> 00:09:20,200
So in this case I car's length is going to equal four because we have four values in there.

140
00:09:20,530 --> 00:09:25,130
So in here we can say Konsole dot log.

141
00:09:25,210 --> 00:09:26,240
Now if we just slog.

142
00:09:26,290 --> 00:09:28,780
I will get 0 1 2 3.

143
00:09:28,780 --> 00:09:38,260
Now remember we can access arrays or array values by just saying like cars 1 cars one would would equal

144
00:09:38,260 --> 00:09:41,520
Chevy because there's zero base so this would be Chevy.

145
00:09:41,560 --> 00:09:46,320
Now in the array I'm sorry in the loop we're going 0 through 3.

146
00:09:46,450 --> 00:09:53,530
So what we could do if we want to put the car names is we could console log cars and then wrap that

147
00:09:53,600 --> 00:09:55,870
eye inside a set of brackets.

148
00:09:55,870 --> 00:10:01,570
That way the first iteration it's going to be cars 0 which will be for the next one would be Chevy Honda

149
00:10:01,570 --> 00:10:02,490
Toyota.

150
00:10:02,530 --> 00:10:06,430
So save and now we can get the names of the cars.

151
00:10:06,580 --> 00:10:07,010
OK.

152
00:10:07,030 --> 00:10:11,080
Obviously anything that is inside of the array.

153
00:10:11,140 --> 00:10:14,110
All right and you can do the same thing with a while loop.

154
00:10:14,290 --> 00:10:19,660
Just you know used cars dot length where you were we did the condition right here.

155
00:10:19,660 --> 00:10:25,290
So instead of the solid number we would use the length of the array.

156
00:10:25,300 --> 00:10:25,750
All right.

157
00:10:25,750 --> 00:10:32,950
So let me just say loop through the array.

158
00:10:33,020 --> 00:10:33,660
All right.

159
00:10:33,700 --> 00:10:39,100
Now I'm going to comment out the for loop and we're going to take a look at a foreach array loop.

160
00:10:39,100 --> 00:10:45,240
So for this what we'll do is take the array name and say dot for each.

161
00:10:45,900 --> 00:10:46,340
OK.

162
00:10:46,360 --> 00:10:52,120
Now all of this for each method it takes in the callback function so it takes in a self-calming function

163
00:10:52,120 --> 00:10:56,720
like this not a self calling function and not an anonymous function.

164
00:10:56,800 --> 00:10:57,910
And then it takes in.

165
00:10:57,910 --> 00:11:03,760
It can take in three different things but you really only need one and that is whatever you want to

166
00:11:03,760 --> 00:11:07,600
use is the current iteration or the iterator.

167
00:11:07,600 --> 00:11:09,700
So I'm just going to use car.

168
00:11:09,710 --> 00:11:12,850
I think that makes sense since we're dealing with cars.

169
00:11:12,940 --> 00:11:20,020
Sometimes you'll see like current or a car or something like that but I like to use the singular name

170
00:11:20,050 --> 00:11:21,930
of the array.

171
00:11:21,940 --> 00:11:28,680
All right so what we'll do here is just console dog log car and save.

172
00:11:28,680 --> 00:11:33,320
And we get the same thing so you can see how much cleaner this looks than this.

173
00:11:33,340 --> 00:11:37,570
So I would always suggest using a foreach loop if you're trying to loop through an array.

174
00:11:37,570 --> 00:11:44,920
For some reason I'll put a comment here.

175
00:11:45,490 --> 00:11:54,710
Now we also have a method called Map and map can work in a few different ways actually.

176
00:11:55,060 --> 00:11:58,220
But it's basically used to return something different.

177
00:11:58,220 --> 00:12:01,150
So to return a different array.

178
00:12:01,150 --> 00:12:07,760
So what I'm going to do here is I'm going to create an object of users.

179
00:12:08,050 --> 00:12:08,370
All right.

180
00:12:08,380 --> 00:12:20,390
I'm sorry an array of objects of users will say id one name John and I'll just put a couple.

181
00:12:20,650 --> 00:12:26,590
So ID to name Sarah

182
00:12:30,430 --> 00:12:31,410
D3

183
00:12:36,740 --> 00:12:37,450
Karen.

184
00:12:37,450 --> 00:12:37,720
All right.

185
00:12:37,720 --> 00:12:39,200
So we have these users.

186
00:12:39,370 --> 00:12:45,580
Now what I'm going to do here is set another variable called IDs and what I want to do is I want to

187
00:12:45,580 --> 00:12:52,690
take this array of objects and I want to create an array of the IDs for these users.

188
00:12:52,690 --> 00:13:03,680
All right so I'm going to set this to users dot map and then map takes in a function just like for each.

189
00:13:03,700 --> 00:13:08,000
Actually there's a couple of things with for each i forgot to show you I'm going to show you in a second.

190
00:13:08,110 --> 00:13:12,560
So in here we're going to say user.

191
00:13:13,350 --> 00:13:15,100
OK just like we did with the four each.

192
00:13:15,100 --> 00:13:20,840
And then we're going to return user Daut ID.

193
00:13:21,180 --> 00:13:21,580
OK.

194
00:13:21,580 --> 00:13:26,620
So it's going to loop through and it's going to return each ID inside of an array.

195
00:13:26,620 --> 00:13:36,430
So now if I want to go down here I can console log IDs and save and now I have an array of the user

196
00:13:36,430 --> 00:13:37,410
IDs.

197
00:13:37,420 --> 00:13:44,380
All right if I were to add another user here so I will add another user.

198
00:13:45,040 --> 00:13:50,400
Let's say Steve and save you'll see that now we get Steve's I.D. which is four.

199
00:13:50,800 --> 00:13:51,090
All right.

200
00:13:51,100 --> 00:13:52,170
So that's math.

201
00:13:52,420 --> 00:13:54,540
And there's a lot more to map as well.

202
00:13:54,580 --> 00:13:56,740
We'll get into that later on.

203
00:13:56,740 --> 00:13:59,610
But I just want to show you real quick with foreach.

204
00:13:59,950 --> 00:14:02,380
Like I said there's three things that this can take in.

205
00:14:02,370 --> 00:14:03,790
One is the iterator.

206
00:14:03,880 --> 00:14:06,460
The next is the index.

207
00:14:06,850 --> 00:14:15,040
So index if we want to go down here let's actually make this a template string and we'll put in the

208
00:14:15,040 --> 00:14:22,240
syntax and we'll say Index we'll put a colon in that will put the value which is car and save and you

209
00:14:22,240 --> 00:14:26,770
can see that it starts at 0 and just increments by 1.

210
00:14:26,770 --> 00:14:27,330
All right.

211
00:14:27,370 --> 00:14:31,190
Another thing we can pass in is the actual array.

212
00:14:31,240 --> 00:14:33,120
So the entire array.

213
00:14:33,500 --> 00:14:35,960
So we can access that if we say con..

214
00:14:36,040 --> 00:14:43,870
Log array and save and now you see you can access the whole array and it's just going to loop through

215
00:14:43,870 --> 00:14:46,820
each time and show each time.

216
00:14:46,840 --> 00:14:47,170
All right.

217
00:14:47,170 --> 00:14:49,700
So I just wanted to mention that real quick.

218
00:14:49,780 --> 00:14:55,480
Now the last thing I want to show you is a for in loop which is often used for objects.

219
00:14:55,570 --> 00:15:02,440
So let's create a single object called user and we'll give this user a first name

220
00:15:06,630 --> 00:15:07,560
last name

221
00:15:12,410 --> 00:15:14,300
and age.

222
00:15:14,370 --> 00:15:16,270
All right so we have this user.

223
00:15:16,350 --> 00:15:22,050
Now what I am going to do is we're going to save for case which starts off like a regular for loop and

224
00:15:22,050 --> 00:15:29,290
then we're going to do 4 Let X in the user.

225
00:15:29,310 --> 00:15:29,670
All right.

226
00:15:29,670 --> 00:15:33,920
So it's called the for in loop and then here.

227
00:15:33,920 --> 00:15:38,330
First thing I'll do is console log x and see what that gives us.

228
00:15:38,340 --> 00:15:38,690
All right.

229
00:15:38,700 --> 00:15:42,600
So X is going to give us the keys.

230
00:15:42,600 --> 00:15:46,290
All right so inside of an object we have a key and a value.

231
00:15:46,290 --> 00:15:48,070
These are key value pairs.

232
00:15:48,180 --> 00:15:50,670
So X will give us just the key.

233
00:15:50,670 --> 00:15:57,480
Now if we want to get the object what we can do I'm going to put a template string in here we'll put

234
00:15:57,480 --> 00:16:05,620
the key and then a colon and then if we want the value what we can do is we can say x.

235
00:16:05,760 --> 00:16:12,210
I'm sorry user and then some brackets and then x.

236
00:16:12,240 --> 00:16:17,070
All right so if we save that now you can see we're basically looping through the objects and getting

237
00:16:17,070 --> 00:16:19,060
the key value pairs.

238
00:16:19,080 --> 00:16:23,620
All right so that is a for loop.

239
00:16:24,660 --> 00:16:29,160
All right so that's going to do it guys for this video we're going to get more into iteration later

240
00:16:29,160 --> 00:16:31,170
on especially in our projects.

241
00:16:31,260 --> 00:16:38,340
But these are the basics the general loops and you have specific methods for arrays and objects.

242
00:16:38,340 --> 00:16:40,880
All right thanks for watching and I'll see you in the next video.