1
00:00:00,590 --> 00:00:02,100
I Welcome back.

2
00:00:02,100 --> 00:00:04,480
So this lesson is completely optional.

3
00:00:04,770 --> 00:00:06,660
It's a little bit of a bonus.

4
00:00:06,690 --> 00:00:09,810
It's really something that is somewhat interesting.

5
00:00:09,840 --> 00:00:13,080
That's why I'm showing it to you but it's not essential to the course.

6
00:00:13,080 --> 00:00:18,360
And we're going to talk about how foreach works and we're going to build our own version of for each

7
00:00:18,360 --> 00:00:18,610
.

8
00:00:18,690 --> 00:00:23,130
So we're going to talk about how you write a function that takes a function as an argument and then

9
00:00:23,250 --> 00:00:25,470
executes that function inside of it.

10
00:00:25,470 --> 00:00:27,620
So again completely optional.

11
00:00:27,720 --> 00:00:32,880
The other reason of making it optional is that it's a little bit more advanced and I don't want to intimidate

12
00:00:32,940 --> 00:00:38,760
everyone I don't want you to feel bad if it's if it's confusing to you because it is confusing and often

13
00:00:38,760 --> 00:00:41,250
it takes multiple repetitions of this.

14
00:00:41,490 --> 00:00:42,790
For my students to get it.

15
00:00:42,960 --> 00:00:44,350
So it's totally optional.

16
00:00:44,550 --> 00:00:48,540
And this is important but it's not essential to making applications.

17
00:00:48,630 --> 00:00:51,310
It's not essential to moving forward in the course.

18
00:00:51,330 --> 00:00:55,500
It is something though that if you try watching it once now and it doesn't make a ton of sense to you

19
00:00:55,820 --> 00:01:00,280
you could revisit it towards the end of the class once you get some more experience Javascript.

20
00:01:00,330 --> 00:01:03,490
And that's something I have to do with my students in person all the time as well.

21
00:01:03,570 --> 00:01:06,080
As I mentioned we do revisit this topic.

22
00:01:06,210 --> 00:01:11,310
So let's start we're going to build our own for each and we're going to start by defining a function

23
00:01:12,120 --> 00:01:17,160
just called for each and it's going to work a little differently than the way that the real foreach

24
00:01:17,160 --> 00:01:23,800
works because right now the way that for each works is I define an array let's call it Nom's and we'll

25
00:01:23,810 --> 00:01:27,660
have some numbers in there like that.

26
00:01:28,050 --> 00:01:30,390
And I call for each on Nomes.

27
00:01:30,480 --> 00:01:37,770
So nums dot for each and then I give it a function and we just saw this so I won't bore you too much

28
00:01:37,770 --> 00:01:44,820
hopefully but we'll just call this number and then just do a simple constant log.

29
00:01:45,240 --> 00:01:46,160
No.

30
00:01:46,800 --> 00:01:49,030
There we go.

31
00:01:49,260 --> 00:01:54,580
It takes a function and it calls a function on every element in the array.

32
00:01:54,740 --> 00:01:59,130
Knops but notice that we didn't have to pass Nom's into for each.

33
00:01:59,190 --> 00:02:04,680
It just knew about the numbers it knew about the array because we did Gnome's dot for each.

34
00:02:04,680 --> 00:02:07,740
So we're not going to start by defining a function that works that way.

35
00:02:07,830 --> 00:02:09,810
We're going to start with one that looks like this.

36
00:02:09,990 --> 00:02:16,560
Well call it my for each and rather than taking just one argument it will take two.

37
00:02:16,710 --> 00:02:21,870
And the first one is the array and the second one is the function.

38
00:02:21,870 --> 00:02:24,390
So array will be Nomes.

39
00:02:24,450 --> 00:02:25,880
And this would be the function.

40
00:02:26,010 --> 00:02:33,270
So if you wanted to run the same code with Nom's it would look like this my for each Nom's comma and

41
00:02:33,270 --> 00:02:39,590
then our whole function here which will look the same as the one atop.

42
00:02:39,600 --> 00:02:42,560
So we're starting out with this version because it's simpler.

43
00:02:43,080 --> 00:02:46,310
It's a little more syntax but it's simpler for us to write.

44
00:02:46,590 --> 00:02:52,350
So again we're passing in Nom's rather than just grabbing it using special javascript magic.

45
00:02:52,350 --> 00:02:57,600
There's a way to grab it if you're defining a method on something like we have here but we'll get to

46
00:02:57,600 --> 00:02:57,950
that.

47
00:02:58,110 --> 00:03:02,520
OK so let's define a function MYF or each.

48
00:03:02,940 --> 00:03:06,150
And it takes in an array and a function.

49
00:03:06,150 --> 00:03:10,560
And we can't call that function because that's a special word in Javascript.

50
00:03:10,560 --> 00:03:16,840
So we'll call it phunk or F whatever you want to call it and then we'll open up our function.

51
00:03:17,520 --> 00:03:20,830
And let's start by talking about what for each actually does.

52
00:03:21,210 --> 00:03:27,460
So remember it takes that function and it calls it for every item in the array.

53
00:03:27,480 --> 00:03:32,390
So in order to do that we need to use a loop to do anything for every item in an array.

54
00:03:32,400 --> 00:03:33,730
We have to have a loop.

55
00:03:33,780 --> 00:03:40,200
So we'll just use a for loop will loop through array and then in the loop we're just going to call function

56
00:03:40,230 --> 00:03:45,570
and all we need to do to call function is add parentheses at the end.

57
00:03:45,810 --> 00:03:51,300
So it's a little bit confusing this is things my students always struggle with in and anyone who's learning

58
00:03:51,300 --> 00:03:52,800
javascript gets hung up here.

59
00:03:52,950 --> 00:03:58,060
But remember the distinction between the name of a function without parentheses.

60
00:03:58,740 --> 00:04:00,960
That's just referring to the function itself.

61
00:04:01,050 --> 00:04:07,740
But it's not executing it as soon as I add the parentheses it takes that code instead of func and executes

62
00:04:07,740 --> 00:04:08,320
it.

63
00:04:08,670 --> 00:04:10,480
So I can give you an example here.

64
00:04:10,710 --> 00:04:11,860
If we just do.

65
00:04:12,010 --> 00:04:13,310
Let me cut this out.

66
00:04:13,530 --> 00:04:17,610
If we just to alert alert doesn't actually run.

67
00:04:17,760 --> 00:04:20,690
But as soon as we add those parentheses we get an alert.

68
00:04:20,820 --> 00:04:24,200
And I didn't pass anything in but it's still executed the code.

69
00:04:24,780 --> 00:04:31,170
So let's go back to our code and rather than just calling phunk straight away like this we'll loop through

70
00:04:31,170 --> 00:04:31,790
the array.

71
00:04:31,830 --> 00:04:43,490
So I add a comment loop through array and then inside the loop call phunk for each item in array.

72
00:04:43,560 --> 00:04:45,360
So to loop through the array.

73
00:04:46,080 --> 00:04:47,250
Well this is a for loop.

74
00:04:47,280 --> 00:04:50,260
You could also use a while loop but we'll use a for loop.

75
00:04:50,280 --> 00:04:58,050
So for var I equal zero I less than a r r dot length which is the name of the argument.

76
00:04:58,140 --> 00:04:59,590
A R R.

77
00:04:59,880 --> 00:05:01,170
And then I plus plus

78
00:05:04,640 --> 00:05:13,760
just like that and then I'll move this line into our loop because what we want to do is inside this

79
00:05:13,760 --> 00:05:20,050
loop we want to call phunk so we can start by just calling folks just like that.

80
00:05:20,840 --> 00:05:26,900
So whatever function is passed in as the second argument is going to be called once for every item in

81
00:05:26,900 --> 00:05:32,060
the array we're still missing an important piece which is to actually pass the data from each item in

82
00:05:32,060 --> 00:05:33,250
the array in.

83
00:05:33,320 --> 00:05:35,360
But this whole column for every item.

84
00:05:35,360 --> 00:05:36,680
So let's hit enter.

85
00:05:37,420 --> 00:05:38,920
And now let's try running this.

86
00:05:38,930 --> 00:05:46,780
I'm going to define an array called colors or favorite my favorite at least orange.

87
00:05:46,910 --> 00:05:48,640
And we'll just stop at yellow.

88
00:05:49,160 --> 00:05:58,040
So three items and then I'm just going to call my four each and pass in colors as the array and then

89
00:05:58,640 --> 00:05:59,910
I'll just do alert.

90
00:06:00,110 --> 00:06:04,430
And we don't add parentheses remember because that will immediately execute alert.

91
00:06:04,430 --> 00:06:05,580
That's not what we want.

92
00:06:06,170 --> 00:06:10,980
We want the function my for each to be the one to execute alert.

93
00:06:11,180 --> 00:06:13,600
So remember that phunk is actually alert.

94
00:06:13,610 --> 00:06:20,900
In this case but it can also be consul that log or most often it would be an anonymous function.

95
00:06:20,900 --> 00:06:24,740
We define that would be called Inside of phunk.

96
00:06:24,800 --> 00:06:29,480
So let's change it back to alert and does hit enter.

97
00:06:29,900 --> 00:06:31,340
I get one alert.

98
00:06:31,730 --> 00:06:34,430
I hit OK I get another alert.

99
00:06:34,640 --> 00:06:37,320
I hit OK and I get one more alert.

100
00:06:37,670 --> 00:06:43,640
So what's happening is that this for loop is looping over array which in our case is an array of colors

101
00:06:43,640 --> 00:06:44,900
with three items.

102
00:06:44,900 --> 00:06:51,520
So three times it loops and each time it calls func and all that phunk is is alert.

103
00:06:51,560 --> 00:06:52,670
That's all that it is.

104
00:06:52,670 --> 00:06:57,980
So it alerts an empty alert three times because we're not passing anything into funk.

105
00:06:57,980 --> 00:07:05,000
So to make it work with data being passed into alert or whatever func is all we do is pass a little

106
00:07:05,000 --> 00:07:10,240
bit of data here and that little bit of data is supposed to be each item in the array.

107
00:07:10,250 --> 00:07:13,190
So the way that we access each item is by using I.

108
00:07:13,370 --> 00:07:19,810
So if I recall the code in here I just add array bracket.

109
00:07:20,860 --> 00:07:25,100
So the first time through the loop this will call func which is alert.

110
00:07:25,100 --> 00:07:32,230
In this case with the first item in the array which is read so will get alert read and then I becomes

111
00:07:32,240 --> 00:07:33,240
one.

112
00:07:33,320 --> 00:07:38,510
So then recall phunk which is still alert with array of one which is orange.

113
00:07:38,510 --> 00:07:46,340
So we get alert orange and then one more time alert yellow say so see that right now if I recall my

114
00:07:46,700 --> 00:07:49,840
execution here my for each colors alert.

115
00:07:50,420 --> 00:07:58,500
Now it gives me red orange and yellow and that's actually all there is to defining for each.

116
00:07:58,580 --> 00:08:04,190
However as I said most the time you won't see it like this where we pass a named function usually will

117
00:08:04,190 --> 00:08:06,270
have an anonymous function.

118
00:08:06,320 --> 00:08:07,620
So let's not give it a shot.

119
00:08:07,730 --> 00:08:09,920
But using an anonymous function.

120
00:08:09,920 --> 00:08:17,390
So my for each and then we'll pass and colors again and then an anonymous function.

121
00:08:17,390 --> 00:08:22,670
And remember that even though there's parentheses here these are very different parentheses than the

122
00:08:22,670 --> 00:08:25,270
one said invoke a function.

123
00:08:25,280 --> 00:08:27,050
So let me actually show you what I mean.

124
00:08:27,470 --> 00:08:33,050
If I delete this first part and I just have an anonymous function right here.

125
00:08:33,410 --> 00:08:35,610
And all we do inside is counsel dialog.

126
00:08:35,790 --> 00:08:43,130
I'm a function and I hit Enter right now and I can spaceless out a bit for you so it's a little easier

127
00:08:43,130 --> 00:08:45,730
to see what's happening.

128
00:08:45,770 --> 00:08:47,930
What do you think is going to happen.

129
00:08:49,130 --> 00:08:50,750
Well of course that happened.

130
00:08:50,960 --> 00:08:54,540
Let me go back and add in the closing parentheses for my counsel dot log.

131
00:08:54,740 --> 00:08:56,360
Now what do you think is going to happen.

132
00:08:56,360 --> 00:08:58,910
I guess it kind of ruins the moment here.

133
00:08:59,150 --> 00:09:03,100
But as I hit Enter you'll see that nothing really happens.

134
00:09:03,110 --> 00:09:06,200
I get a value that's returned to me a value that sent back.

135
00:09:06,200 --> 00:09:12,380
But the code isn't run I don't see constant outlook and that's because this anonymous function was never

136
00:09:12,380 --> 00:09:13,620
invoked.

137
00:09:13,670 --> 00:09:16,040
Basically it existed for a moment and now it's gone.

138
00:09:16,040 --> 00:09:16,960
I didn't give it a name.

139
00:09:16,970 --> 00:09:18,450
I didn't save it to a variable.

140
00:09:18,500 --> 00:09:21,530
I can never call it again unless I rewrite it.

141
00:09:21,530 --> 00:09:26,240
So to execute this function I still need those parentheses afterwards.

142
00:09:26,240 --> 00:09:29,700
So this is a lot of syntax it's kind of ugly in my opinion.

143
00:09:29,810 --> 00:09:33,490
But now if I had those parentheses I get the function.

144
00:09:33,830 --> 00:09:43,970
So it's the same thing when we do this my for each colors and then we pass an anonymous function here

145
00:09:43,980 --> 00:09:44,440
.

146
00:09:45,520 --> 00:09:53,720
And let's say that this function does anything at all let's just say alerts hi this function isn't being

147
00:09:53,720 --> 00:09:55,020
invoked right here.

148
00:09:55,310 --> 00:09:56,860
This is the function right here.

149
00:09:56,870 --> 00:10:00,120
We still need those parentheses afterwards like we have here.

150
00:10:00,520 --> 00:10:07,250
And that's coming from inside my foreach where we're adding those parentheses onto funk and funk.

151
00:10:07,310 --> 00:10:10,540
In our case here it is the entire second argument.

152
00:10:10,610 --> 00:10:15,670
So if you're a little bit lost in this don't worry again isn't crucial to the rest of the course.

153
00:10:15,950 --> 00:10:22,300
But try this again later at the end so I can do something like this where I just alert high or I'm not

154
00:10:22,310 --> 00:10:25,670
actually using the data like red orange and yellow.

155
00:10:25,750 --> 00:10:29,010
It's not that common to want to do that but if I hit enter.

156
00:10:29,570 --> 00:10:33,530
You'll see I get one high two and three highs.

157
00:10:33,560 --> 00:10:37,370
So for each item in that colour's array there are three items.

158
00:10:37,370 --> 00:10:43,490
It calls this entire function but more often than not what we wanted to do is actually make use of that

159
00:10:43,490 --> 00:10:44,940
color like we're doing here.

160
00:10:45,130 --> 00:10:47,160
Or we can start like each color.

161
00:10:47,620 --> 00:10:50,920
So all we have to do is accept an argument in our function.

162
00:10:51,010 --> 00:10:55,570
So my foreach and that's spaced this out a bit.

163
00:10:55,580 --> 00:11:02,480
So function and this will be called color but that can be anything of course just like any other function

164
00:11:02,480 --> 00:11:03,450
that we define.

165
00:11:03,620 --> 00:11:08,810
It can be almost anything it does have to be a valid javascript name it can't be something like function

166
00:11:08,890 --> 00:11:13,800
or var that are reserved for their keywords but anything else will work.

167
00:11:13,820 --> 00:11:15,110
So that's what we have here.

168
00:11:15,230 --> 00:11:20,820
An anonymous function that now is expecting an argument and then we can use it inside of here.

169
00:11:20,840 --> 00:11:24,920
So console dot log color to start.

170
00:11:26,260 --> 00:11:30,640
So to walk through this one more time we loop through colors.

171
00:11:30,640 --> 00:11:37,280
In this case that's what our array is a are are we loop through that each time through we're calling

172
00:11:37,280 --> 00:11:40,600
phunk which is this entire thing right here.

173
00:11:40,940 --> 00:11:45,770
I'm recalling that in passing in the current item in that array.

174
00:11:45,880 --> 00:11:48,280
So we're calling this code right here.

175
00:11:48,530 --> 00:11:51,760
And then we're passing in red and then orange and then yellow.

176
00:11:51,880 --> 00:11:54,950
So color is equal to red or orange or yellow.

177
00:11:54,950 --> 00:12:00,000
Every time through this list as you can see we get red orange and yellow.

178
00:12:00,160 --> 00:12:02,530
So that's the basic way of writing for each.

179
00:12:02,870 --> 00:12:08,180
But as a promise I would also show you how we get added on to an array so we could write it like this

180
00:12:08,430 --> 00:12:13,530
colors dot for each or dot my for each since there's already for each there.

181
00:12:13,660 --> 00:12:14,570
We'll leave it alone.

182
00:12:14,650 --> 00:12:16,140
But color up my for each.

183
00:12:16,120 --> 00:12:20,590
And then we can pass in a function here to do that.

184
00:12:20,960 --> 00:12:25,580
And when a jump a little bit ahead of myself we haven't talked about objects yet we haven't talked about

185
00:12:25,790 --> 00:12:30,140
prototypes but I'm just going to show it to you here and then we'll learn more about it as the course

186
00:12:30,130 --> 00:12:30,970
goes on.

187
00:12:30,980 --> 00:12:33,800
In fact the next unit is all about objects.

188
00:12:33,860 --> 00:12:40,750
So what we do is we actually add a method to a re dot prototype

189
00:12:43,370 --> 00:12:48,550
produ type you never spell it and we'll call it my for each.

190
00:12:48,560 --> 00:12:51,860
And before I do that notice the autocomplete.

191
00:12:52,310 --> 00:12:55,640
These are all methods that exist on the array prototype.

192
00:12:55,630 --> 00:13:00,770
So that's where we get all of those methods like push and pop and shift and unshipped and for each that

193
00:13:00,800 --> 00:13:07,580
exist on every single array they're defined on what's called the array prototype and anything defined

194
00:13:07,580 --> 00:13:11,750
on that prototype is available it's usable in every single array.

195
00:13:12,380 --> 00:13:18,830
So let's try this now read up prototyped up my for each is a function

196
00:13:21,630 --> 00:13:23,770
and the function only takes one argument.

197
00:13:23,770 --> 00:13:32,870
Now like we have here it just takes func and then inside we need to do our same logic where we loop

198
00:13:32,870 --> 00:13:36,660
through the array and then call a function for each item in the array.

199
00:13:36,680 --> 00:13:40,930
The only thing that changes is we're not accepting an argument.

200
00:13:40,970 --> 00:13:45,410
A R are we don't have the array anymore but we do have it here.

201
00:13:45,620 --> 00:13:47,030
It's a little bit different.

202
00:13:47,090 --> 00:13:49,880
We have to use the key word this.

203
00:13:50,030 --> 00:13:56,050
So the key word this is going to refer to the particular array that we're calling Assan.

204
00:13:56,090 --> 00:14:03,590
So in the case of colors dot for each if we wrote the keyword this inside the for each definition it

205
00:14:03,590 --> 00:14:04,950
would refer to colors.

206
00:14:05,140 --> 00:14:08,350
But if we did numbers for each or dog stuff for each.

207
00:14:08,570 --> 00:14:12,530
This refers to the specific array that we're calling it on.

208
00:14:13,220 --> 00:14:19,980
So we're going to do a four VAR I equals zero.

209
00:14:20,210 --> 00:14:28,490
While I is less than this dot like I plus plus.

210
00:14:28,850 --> 00:14:30,490
So that's the first change.

211
00:14:30,500 --> 00:14:34,420
We used this link which is referring to the specific array.

212
00:14:34,610 --> 00:14:36,440
So we're not passing it in anymore.

213
00:14:36,740 --> 00:14:44,240
The next thing that we do is we call phunk just like we did in the original version except instead of

214
00:14:44,300 --> 00:14:48,160
array bracket I would do this bracket.

215
00:14:48,160 --> 00:14:51,480
I just like that.

216
00:14:51,770 --> 00:14:53,140
And that's actually all there is to it.

217
00:14:53,140 --> 00:14:58,560
So we just adapted it a little bit by replacing a r r which has the name of our argument.

218
00:14:58,580 --> 00:15:04,040
And it could have been anything of course by replacing it with the key word this.

219
00:15:04,120 --> 00:15:07,100
So let's try it out to use it.

220
00:15:07,100 --> 00:15:08,520
We need to make a new array.

221
00:15:08,650 --> 00:15:14,540
So I'll make one called friends and we'll have it have a few friends.

222
00:15:14,650 --> 00:15:16,790
Charlie.

223
00:15:18,020 --> 00:15:26,340
Dave Matie and Caitlin just like that hit enter.

224
00:15:26,450 --> 00:15:33,290
Now we can do friends dot my for each and that takes a single function as an argument.

225
00:15:33,400 --> 00:15:36,140
So we could just give it alert if we want to.

226
00:15:36,950 --> 00:15:38,090
And we get Charlie.

227
00:15:38,210 --> 00:15:46,800
Dave Madie and Caitlin but typically we would see it with an anonymous function like this my for each

228
00:15:46,970 --> 00:15:54,090
and then a function in here and let's say each one of these is a name.

229
00:15:54,110 --> 00:16:06,020
And then what we would do is up to us but let's do something like counsil that log I love plus name

230
00:16:06,020 --> 00:16:07,310
.

231
00:16:07,310 --> 00:16:09,560
There we go and we get.

232
00:16:09,560 --> 00:16:10,900
I love Charlie I love Dave.

233
00:16:10,940 --> 00:16:12,780
I love Maddy I love Caitlin.

234
00:16:13,250 --> 00:16:15,030
OK so that's all there is to it.

235
00:16:15,320 --> 00:16:20,840
And I don't mean that in a flippant way there is a lot to it but as far as the code it's actually pretty

236
00:16:20,840 --> 00:16:24,010
short just some new concepts.

237
00:16:24,130 --> 00:16:28,290
This prototype thing which I really didn't go over and I did that on purpose.

238
00:16:28,660 --> 00:16:34,090
It's not that important right now to focus on that but what I do want you to focus on is this idea of

239
00:16:34,100 --> 00:16:40,570
passing a function around so we can pass a function to an argument or as an argument and it won't be

240
00:16:40,580 --> 00:16:47,060
executed Intel Inside the code we actually refer to it and add those parentheses at the end.

241
00:16:47,060 --> 00:16:50,230
So without those parentheses the function doesn't do anything.

242
00:16:50,240 --> 00:16:50,810
It exists.

243
00:16:50,820 --> 00:16:56,560
It's a value that we can reference but we add the parentheses and it's actually executed.

244
00:16:56,620 --> 00:16:57,650
All right great.

245
00:16:57,630 --> 00:16:59,890
I'll see in the next unit where we start talking about objects