Original subtitles

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.