Okay then.
So we know now what functions are hopefully and we know that methods are functions too.
And we've also seen that we can pass arguments into functions and methods when we invoke them and we
can use those values, those arguments inside the function.
Now, so far, those arguments that we've been passing in have just been things like strings or numbers
or something.
But we can also pass in a function as an argument.
And when we do this, the function we pass in is called a callback function.
So take a look at this example.
I've created here a function called Myfunc.
It's an arrow function and it takes in as a parameter, a callback function.
Now this can be called whatever you want.
You don't have to call it callback function.
This is just what I've called it.
So inside this function right here, we do something.
And then at some point, the idea is that we call this callback function.
Okay?
So when we invoke Myfunc, we need to pass in some kind of function as a parameter.
So what I'm doing is calling myfunc down here.
And let me just cut this for a second so you can see we're just calling the function like that.
Then as an argument, instead of passing in like a string like we normally would.
Instead what we're doing is we're passing in a function as an argument.
So this is just a regular function using a function keyword.
And inside it does something.
Now when we call the callback function up here, what we're doing is calling that callback function
and we're passing in this value as an argument.
This value is something we define inside the function up here.
So inside the callback function, when we pass it in, we have to declare that parameter because when
we call it, we're going to be getting a value inside it.
So now that value is passed into this callback function when it's called and we can log it to the console
if we want to or do something else with it.
So if I save this and preview, we can see that value logged to the console.
Now this seems like a lot of work to do just this, what I've just done.
But this is just to demonstrate the general premise of a callback function.
We pass a function into something, another function as an argument.
And at some point in that other function, that callback function will probably be called and maybe
passed a value which we can take in.
So that's the general premise.
Now what I'm going to do is convert this into an arrow function right here.
So first of all, I'll get rid of the function keyword, then we need an arrow like so.
And then because there's only one parameter right here, then we can just delete these parentheses.
So this is exactly the same.
And this a lot of the time is how you're going to see callback functions defined.
Okay?
And when we pass them into another function.
So that's the general premise when we're creating our own function here and taking in a callback function,
we define that callback function right here.
Okay, so now we know that what I'm going to do is delete this and you can see here I've created a variable
called people.
And this is equal to an array of different people.
They're all strings.
Now, what I'm going to do now is use a built in array method.
Okay?
So remember, methods are just functions.
We're using a function on this array.
So I'm going to take people and this method is called for each.
Now then for each is a method which iterates over an array.
It's a bit like a loop where we iterate over some kind of array, but in my eyes this is a little more
elegant.
Now this for each method expects as an argument in here a callback function.
So let's do this as a regular function, first of all, because sometimes I think it's easier to visualize
this way.
So like so and then if I say in here console dot log and we'll say I don't know something so what this
for each method does here is it iterates through an array and the array is iterating through is people.
And for each element inside the array it calls this callback function.
So this is going to log out for each element inside the array.
So we should see one, two, three, four, five times because the function is going to fire five times
once for each element in the array.
So if I save it and preview, we can see we get five right there next to something.
Okay, so it's done it five times.
Okay then.
Now inside this callback function, we can actually take a couple of different parameters.
The first one is whatever the value is at the time that we're iterating over.
So every time we fire the function for each individual element, we get that element as our first parameter.
Now I'm calling it person because it makes sense to use the singular of people because these are all
people.
So each one is a person.
But you can.
Call it whatever you want.
You can call it Val if you want.
It doesn't matter.
I call it the singular of whatever this is.
So now we can log out the person each time around.
So that should be Mario, then Luigi, then Ryu, then Sean, and then Chun-li.
So let's save it and we can see those right here.
Okay, So again, all we're doing is iterating through this array using for each and firing a callback
function which we pass through as a parameter or an argument rather to the for each method, for each
individual item in the array.
And we get access to that person in the array each time around.
Okay then.
So now let's convert this into an arrow function right here because that's mainly how you're going to
see this written.
So we delete the function keyword and we add our arrow right here, like so now because there's only
one parameter, we can delete this if we want to.
So now it's just person into the arrow function.
So if we save this, it's going to do exactly the same thing.
All right, so you're going to see me write callback functions like this a lot of the time using arrow
functions.
Now then this callback function right here inside for each not only takes the value of each individual
element as a parameter, but we can also take in a second optional parameter and that is the index of
the element.
So when we fire the function for the first time, it's going to be zero because that's the index.
Then the second time it's going to be one because that's the index, then two, then three.
So we could log out the index and the person.
So if we save that and preview, we can see now we get the index and the person.
So they're the two different parameters we can pass into this function.
Now, if you wanted to, you could define a callback function somewhere else and then just pass it in
to the for each method or whatever method we're using.
Now to do that, I'm going to come up here and create a new const and I'm going to call this log person
and this is going to be equal to an arrow function.
We take in the person and the index, much like we did down here.
Then inside this function, I'm going to just log a template string.
So I'm going to say console dot log and then a template string.
We're going to output, first of all, the index variable, and then I'm going to output a dash and
then I'll say hello and then the person, okay, so now we've created this function.
What I can do is use this function as a callback function for this method.
So instead of defining the function here, now we're defining it up here.
And now I could just say log person like so.
And what we're doing is essentially passing this arrow function into this for each method, it's doing
exactly the same thing and this should still work.
So although it's spelt incorrectly, hello, we still get the desired results.
So a lot of the time you're going to see me write callback functions directly in here, especially when
they're just small functions because I think it's easier than writing separate functions out here somewhere,
then passing them in it looks nicer as well.
But sometimes if we have a large function then we're going to externalize them, create them somewhere
else and then pass them in as a callback function.
So hopefully now you understand what callback functions are.
They're just normal functions that we pass in to another function or another method as an argument.
