I Welcome back.
So this lesson is completely optional.
It's a little bit of a bonus.
It's really something that is somewhat interesting.
That's why I'm showing it to you but it's not essential to the course.
And we're going to talk about how foreach works and we're going to build our own version of for each
.
So we're going to talk about how you write a function that takes a function as an argument and then
executes that function inside of it.
So again completely optional.
The other reason of making it optional is that it's a little bit more advanced and I don't want to intimidate
everyone I don't want you to feel bad if it's if it's confusing to you because it is confusing and often
it takes multiple repetitions of this.
For my students to get it.
So it's totally optional.
And this is important but it's not essential to making applications.
It's not essential to moving forward in the course.
It is something though that if you try watching it once now and it doesn't make a ton of sense to you
you could revisit it towards the end of the class once you get some more experience Javascript.
And that's something I have to do with my students in person all the time as well.
As I mentioned we do revisit this topic.
So let's start we're going to build our own for each and we're going to start by defining a function
just called for each and it's going to work a little differently than the way that the real foreach
works because right now the way that for each works is I define an array let's call it Nom's and we'll
have some numbers in there like that.
And I call for each on Nomes.
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
hopefully but we'll just call this number and then just do a simple constant log.
No.
There we go.
It takes a function and it calls a function on every element in the array.
Knops but notice that we didn't have to pass Nom's into for each.
It just knew about the numbers it knew about the array because we did Gnome's dot for each.
So we're not going to start by defining a function that works that way.
We're going to start with one that looks like this.
Well call it my for each and rather than taking just one argument it will take two.
And the first one is the array and the second one is the function.
So array will be Nomes.
And this would be the function.
So if you wanted to run the same code with Nom's it would look like this my for each Nom's comma and
then our whole function here which will look the same as the one atop.
So we're starting out with this version because it's simpler.
It's a little more syntax but it's simpler for us to write.
So again we're passing in Nom's rather than just grabbing it using special javascript magic.
There's a way to grab it if you're defining a method on something like we have here but we'll get to
that.
OK so let's define a function MYF or each.
And it takes in an array and a function.
And we can't call that function because that's a special word in Javascript.
So we'll call it phunk or F whatever you want to call it and then we'll open up our function.
And let's start by talking about what for each actually does.
So remember it takes that function and it calls it for every item in the array.
So in order to do that we need to use a loop to do anything for every item in an array.
We have to have a loop.
So we'll just use a for loop will loop through array and then in the loop we're just going to call function
and all we need to do to call function is add parentheses at the end.
So it's a little bit confusing this is things my students always struggle with in and anyone who's learning
javascript gets hung up here.
But remember the distinction between the name of a function without parentheses.
That's just referring to the function itself.
But it's not executing it as soon as I add the parentheses it takes that code instead of func and executes
it.
So I can give you an example here.
If we just do.
Let me cut this out.
If we just to alert alert doesn't actually run.
But as soon as we add those parentheses we get an alert.
And I didn't pass anything in but it's still executed the code.
So let's go back to our code and rather than just calling phunk straight away like this we'll loop through
the array.
So I add a comment loop through array and then inside the loop call phunk for each item in array.
So to loop through the array.
Well this is a for loop.
You could also use a while loop but we'll use a for loop.
So for var I equal zero I less than a r r dot length which is the name of the argument.
A R R.
And then I plus plus
just like that and then I'll move this line into our loop because what we want to do is inside this
loop we want to call phunk so we can start by just calling folks just like that.
So whatever function is passed in as the second argument is going to be called once for every item in
the array we're still missing an important piece which is to actually pass the data from each item in
the array in.
But this whole column for every item.
So let's hit enter.
And now let's try running this.
I'm going to define an array called colors or favorite my favorite at least orange.
And we'll just stop at yellow.
So three items and then I'm just going to call my four each and pass in colors as the array and then
I'll just do alert.
And we don't add parentheses remember because that will immediately execute alert.
That's not what we want.
We want the function my for each to be the one to execute alert.
So remember that phunk is actually alert.
In this case but it can also be consul that log or most often it would be an anonymous function.
We define that would be called Inside of phunk.
So let's change it back to alert and does hit enter.
I get one alert.
I hit OK I get another alert.
I hit OK and I get one more alert.
So what's happening is that this for loop is looping over array which in our case is an array of colors
with three items.
So three times it loops and each time it calls func and all that phunk is is alert.
That's all that it is.
So it alerts an empty alert three times because we're not passing anything into funk.
So to make it work with data being passed into alert or whatever func is all we do is pass a little
bit of data here and that little bit of data is supposed to be each item in the array.
So the way that we access each item is by using I.
So if I recall the code in here I just add array bracket.
So the first time through the loop this will call func which is alert.
In this case with the first item in the array which is read so will get alert read and then I becomes
one.
So then recall phunk which is still alert with array of one which is orange.
So we get alert orange and then one more time alert yellow say so see that right now if I recall my
execution here my for each colors alert.
Now it gives me red orange and yellow and that's actually all there is to defining for each.
However as I said most the time you won't see it like this where we pass a named function usually will
have an anonymous function.
So let's not give it a shot.
But using an anonymous function.
So my for each and then we'll pass and colors again and then an anonymous function.
And remember that even though there's parentheses here these are very different parentheses than the
one said invoke a function.
So let me actually show you what I mean.
If I delete this first part and I just have an anonymous function right here.
And all we do inside is counsel dialog.
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
to see what's happening.
What do you think is going to happen.
Well of course that happened.
Let me go back and add in the closing parentheses for my counsel dot log.
Now what do you think is going to happen.
I guess it kind of ruins the moment here.
But as I hit Enter you'll see that nothing really happens.
I get a value that's returned to me a value that sent back.
But the code isn't run I don't see constant outlook and that's because this anonymous function was never
invoked.
Basically it existed for a moment and now it's gone.
I didn't give it a name.
I didn't save it to a variable.
I can never call it again unless I rewrite it.
So to execute this function I still need those parentheses afterwards.
So this is a lot of syntax it's kind of ugly in my opinion.
But now if I had those parentheses I get the function.
So it's the same thing when we do this my for each colors and then we pass an anonymous function here
.
And let's say that this function does anything at all let's just say alerts hi this function isn't being
invoked right here.
This is the function right here.
We still need those parentheses afterwards like we have here.
And that's coming from inside my foreach where we're adding those parentheses onto funk and funk.
In our case here it is the entire second argument.
So if you're a little bit lost in this don't worry again isn't crucial to the rest of the course.
But try this again later at the end so I can do something like this where I just alert high or I'm not
actually using the data like red orange and yellow.
It's not that common to want to do that but if I hit enter.
You'll see I get one high two and three highs.
So for each item in that colour's array there are three items.
It calls this entire function but more often than not what we wanted to do is actually make use of that
color like we're doing here.
Or we can start like each color.
So all we have to do is accept an argument in our function.
So my foreach and that's spaced this out a bit.
So function and this will be called color but that can be anything of course just like any other function
that we define.
It can be almost anything it does have to be a valid javascript name it can't be something like function
or var that are reserved for their keywords but anything else will work.
So that's what we have here.
An anonymous function that now is expecting an argument and then we can use it inside of here.
So console dot log color to start.
So to walk through this one more time we loop through colors.
In this case that's what our array is a are are we loop through that each time through we're calling
phunk which is this entire thing right here.
I'm recalling that in passing in the current item in that array.
So we're calling this code right here.
And then we're passing in red and then orange and then yellow.
So color is equal to red or orange or yellow.
Every time through this list as you can see we get red orange and yellow.
So that's the basic way of writing for each.
But as a promise I would also show you how we get added on to an array so we could write it like this
colors dot for each or dot my for each since there's already for each there.
We'll leave it alone.
But color up my for each.
And then we can pass in a function here to do that.
And when a jump a little bit ahead of myself we haven't talked about objects yet we haven't talked about
prototypes but I'm just going to show it to you here and then we'll learn more about it as the course
goes on.
In fact the next unit is all about objects.
So what we do is we actually add a method to a re dot prototype
produ type you never spell it and we'll call it my for each.
And before I do that notice the autocomplete.
These are all methods that exist on the array prototype.
So that's where we get all of those methods like push and pop and shift and unshipped and for each that
exist on every single array they're defined on what's called the array prototype and anything defined
on that prototype is available it's usable in every single array.
So let's try this now read up prototyped up my for each is a function
and the function only takes one argument.
Now like we have here it just takes func and then inside we need to do our same logic where we loop
through the array and then call a function for each item in the array.
The only thing that changes is we're not accepting an argument.
A R are we don't have the array anymore but we do have it here.
It's a little bit different.
We have to use the key word this.
So the key word this is going to refer to the particular array that we're calling Assan.
So in the case of colors dot for each if we wrote the keyword this inside the for each definition it
would refer to colors.
But if we did numbers for each or dog stuff for each.
This refers to the specific array that we're calling it on.
So we're going to do a four VAR I equals zero.
While I is less than this dot like I plus plus.
So that's the first change.
We used this link which is referring to the specific array.
So we're not passing it in anymore.
The next thing that we do is we call phunk just like we did in the original version except instead of
array bracket I would do this bracket.
I just like that.
And that's actually all there is to it.
So we just adapted it a little bit by replacing a r r which has the name of our argument.
And it could have been anything of course by replacing it with the key word this.
So let's try it out to use it.
We need to make a new array.
So I'll make one called friends and we'll have it have a few friends.
Charlie.
Dave Matie and Caitlin just like that hit enter.
Now we can do friends dot my for each and that takes a single function as an argument.
So we could just give it alert if we want to.
And we get Charlie.
Dave Madie and Caitlin but typically we would see it with an anonymous function like this my for each
and then a function in here and let's say each one of these is a name.
And then what we would do is up to us but let's do something like counsil that log I love plus name
.
There we go and we get.
I love Charlie I love Dave.
I love Maddy I love Caitlin.
OK so that's all there is to it.
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
short just some new concepts.
This prototype thing which I really didn't go over and I did that on purpose.
It's not that important right now to focus on that but what I do want you to focus on is this idea of
passing a function around so we can pass a function to an argument or as an argument and it won't be
executed Intel Inside the code we actually refer to it and add those parentheses at the end.
So without those parentheses the function doesn't do anything.
It exists.
It's a value that we can reference but we add the parentheses and it's actually executed.
All right great.
I'll see in the next unit where we start talking about objects