Now that we know what higher order functions are,
let's actually create our own,
just to demonstrate how they work.
So in this lecture, we're going to create
a function that accepts other functions as an input.
But to start, let's write two very generic
functions that do simple string transformations.
So one I'm going to call one word
and this will simply replace all the spaces in a word.
So string
dot replace
and then we're going to select all these spaces.
And remember for that,
we need to use this regular expression
with the G flag and then replace them
with simply an empty string.
And then we also convert that to lowercase.
Okay,
so this function here,
what simply work anywhere in our code with any string
and it takes in one string and returns
a new one without any spaces in it.
Okay, let's create another one upper first words,
which also takes in a string.
And so these two functions,
they will later be the functions that we pass
in into another function.
Okay, so we first need these.
So as the name says, this function
here will simply transform the first word
of the input string to uppercase.
So let's just first split the string.
So by the empty string,
and then we will take the results
and restructure it into the first word.
And then all the other words,
And then return a new array that we will join.
So that's first to uppercase
and here I'm not explaining exactly how this all works,
because we already talked about this stuff,
in the last video.
So we spread the others and also in the array
and then we join.
And so you see that everything that we learned before
is actually pretty helpful,
again as always, especially helpful,
is to spread operator and destructive assignment.
Like we use it here.
Right, and here it's actually the rest pattern.
All right, So we have these two generic functions
and now we can create or higher order function.
And that function will be called a transformer.
and these function we'll take in also a string,
but as a second argument,
it will take in a function.
Okay, and therefore this is a higher order function.
So that's the definition that we
learned about in the last video.
So it takes in a function
and air for it is a higher order function.
And so now let's see how
we would actually call this function.
So that's how I like to do it many times.
So let's say JavaScript is the best.
And as a second argument,
I will now pass in the upper first word function.
And so basically what I want the transformer function
now to do with this string,
is to transform the string using these function here.
So this function that we created here in the beginning.
All right,
and once again notice
how we are only passing in the function value itself.
So really just the value,
we are not calling this function here.
Okay, We are only passing it in and it will be to
transformer function calling this function.
So let's actually do that.
So we will simply look to the console transformed
string meant and here goes our expression.
And so this is where we will now call the function.
Now, inside of the transformer function,
this upper ward is now called F N right?
So that's the second parameter here.
And so F N and then with the past in string.
Okay,
and when we see the result,
this will make even more sense.
Okay, that's also a lock to the console,
the original string.
And so that's just STR okay.
And they also want to show you something else.
So let's look transformed by,
and in the last video I told you
that functions even have methods remember,
and besides methods,
functions can even have properties.
And one of them is the name property.
So again we take F N,
which is the function that
this higher order transformer gets as an input.
And then on that we can read the name property.
And so now let's see the result of this operation.
And so let's take a look at our interesting output.
So of course the original string looks familiar,
but then the transformed string indeed,
was transformed just as we hoped it would.
So the first word is the uppercase.
And so that is of course the work of this function here.
Finally, we can also see that
it was transformed by upper first word.
And so that's FN.Name.
So as the property says,
it is really just the name of the function.
And so this one here we can actually
use on any functioning that we have in JavaScript.
And now let's try the same,
here with our other function.
So one word, and let's see the result.
Let's give it some more space here.
And so here is the second output.
So to transform string is now this one here,
all in one word and indeed it was
transformed by the one word function.
So this one here,
alright?
So let's recap, we're calling the transformer function here
and into that function we are passing the callback function
and remember that we call these functions that we pass.
So this one and this one,
the callback functions.
And that's because we do not call them ourselves.
But instead we call JavaScript to basically tell them later.
And in this case,
calling them later happens right here.
So it's the transform of function
that will call these callback functions.
And the callback functions,
in here are of course called F N.
And so, that's the name of the function in here
that we then have to call.
All right,
and in fact this is exactly the same idea
that we already talked about,
using the add vent listener function.
Right?
So, let's say we had this
very simple function high five,
which doesn't really do much except off
logging something to the console.
Let's just put an emoji here,
this waving one and so now let's say,
document.Buddy.End event listener click
and then this function.
So nevermind about this part here.
We're gonna to learn later what this means,
but what matters is the add event listener?
And so just like,
or a transformer function we pass in a callback function.
Okay, and does callback function in this,
is also called the event handler or event listener,
but that doesn't really matter.
What matters is that conceptually,
this year is the callback function,
and this is the higher order function.
So this one is just like our transformer function.
And this one is just like the one word or upper first word.
Okay.
So it's just a callback that JavaScript,
will call as soon as we click on the body.
So you'll see down there now they appear.
And so only then they call back is really called.
And there are many other examples
in the JavaScript language.
And this concept of callback functions is used
all the time in built in JavaScript functions.
So there are many more examples,
for example the for each
function and that we call on a race.
So let's create an array here.
Jonas, Martha and Adam.
And on that array, we can call
something called D for each method.
And we will learn about this
one in the next section actually.
And then again,
we pass in a callback function into for each.
So let's again use high five.
And so as I reload this now,
then we get here these three wave okay.
And that's because we have three elements in this array.
And so as the name of the method says,
for each of them this callback will be called.
And therefore we have three waving sphere,
but we will learn all about the
for each method in the next section.
What matters here is that once again,
we use the concept of the callback function here.
And so this is something really common in JavaScript.
Let me just write that here,
callbacks all the time.
And so let's now actually take a minute or two
to understand why that is.
Why our callback functions so much used in JavaScript
and why are they so helpful?
Well, the first big advantage of this
is that it makes it easy to split up or code
into more reusable and interconnected parts.
So that's exactly what we have here, right.
We have all of this functionality here,
nicely split up into their own functions,
and that itself is really helpful.
But there is a second and way more important advantage,
which is the fact that callback functions
allow us to create abstraction.
So let me explain what that means.
So what we did here in our code example was to create a
level of abstraction and abstraction
is something really important in programming.
So basically what abstract and means,
is that we hide the detail of some code
implementation because we don't really care
about all that detail.
And this allows us to think
about problems at a higher more abstract level.
And so that's why it's called an obstruction.
So coming back to our example here,
this transform a function does not care at all,
how the string is transformed.
It doesn't care about this level of detail.
Okay, all that wants to do is to transform a string,
but it doesn't care how it should do it.
So what I mean is that we could have taken,
this coat here and written it directly into transformer,
or even this coat here,
right.
That would have worked just the same,
but instead we abstracted this
coat away into other functions.
So again, we created a new level of obstruction
and by doing this or main transformer function,
here is really only concerned
with transforming the input string itself.
But no matter how that transforming itself actually works.
So it's basically delegating the string transformation
to the other lower level of functions,
which are these two.
Okay, and I hope this makes sense for you,
but we will also come back to this idea of abstraction
later when we talk about object oriented programming.
But it's good for you to think
and to talk about this stuff as soon as possible,
so that you can start to get an idea for this really,
important concept of abstraction.
And now with this idea of obstruction
and higher levels and lower levels of obstruction,
here is called a higher order function.
Right, and again that's basically because this function
here operates at a higher level of obstruction,
leaving the low level details to this low level functions.
Okay.
Now they are not really called
hello order or low level functions,
but that's just how I like to call
them in this circumstance.
All right,
so understanding this
is absolutely crucial for your process.
And I actually consider this one of the most
important lectures here of the course
because callback functions are really,
a vital part of the JavaScript language.
And that's one of the main takeaways from this video.
They allow us to create this kind of logic here.
And so, I think it's probably a good idea,
that who really reviewed us really well
and maybe even write your own example,
of something that you see in the real world
using the same concept,
okay.
I think that's a really good idea that you should try out.
Then here in the built in functions like
add event listener and for each,
these callback functions are so important
and so useful because we use them,
to tell these functions what exactly they should do.
For example, the add event listener function
on its own would have no idea
of what to do whenever the click event happens here.
Right?
And so that's why we pass in the callback function here,
to tell the add event listener function exactly what to do.
And as you already know,
this is the higher order function here
with the high level of obstruction.
And this here is the function with,
the more lower level of obstruction.
All right.
But enough talk,
please take a minute to really review this lecture
and build an example of your own maybe.
And then I see you in the next video,
where we will basically do the opposite of this one.
So having functions return other functions.