All language subtitles for 018 Using Functions as Values_en

And with that we're almost done

for this section,

but there are a couple of essential features that we'll use

in this course and a couple of tricky features,

which I also wanna refresh here so that you know about these

JavaScript concepts and features,

and you don't wonder about them when you encounter them

later in the course.

The first JavaScript feature you should be aware of is

that you can pass functions as values to other functions.

For example, we could set a timer

with help of the built-in setTimeout function,

a function that is provided by the browser.

Now setTimeout wants two input values.

It accepts two parameters.

The first input value it wants is

a function itself though,

a function that can be defined

with the function keyword or as an arrow function.

Now, what's really important to understand here is

that what we're doing here is we're creating a new function,

an anonymous function here since it has no name,

but nonetheless, a function,

and we could absolutely create that function manually

in a separate step.

It could be named handleTimeout or anything like this,

and here we could console.log ("Timed out").

So this would now be a regular function,

and we could also alternatively define it

as an arrow function.

Could be named handleTimeout2,

and we store an arrow function in that constant.

Because arrow functions never accept a name

in front of them,

they always are created in an anonymous way,

but we can make them non-anonymous by then storing them

in a constant or a variable that has a certain name,

and then here I could console.log ("Timed out") again,

anything like this.

So here I'm creating a function with the function keyword

or as an arrow function stored in a constant.

And we can now also pass this function

or this constant that contains a function

as a value to set the timeout,

so as a value for this first parameter that wants a function

instead of defining the function right here in place,

which would be an alternative though.

Now what's really important to understand here

when you're passing a function to another function though,

is that when you're not defining it here in place,

but instead you defined it in advance,

you pass it by just using its name,

so you don't add parentheses here.

You omit those parentheses

because by just using the name here

you're passing the function as a value to this function.

If you would add parentheses here,

you would instead make sure that this function

handleTimeout here gets executed immediately at the point

of time when this timer is set, in this case here,

and therefore it would be the return value of that function.

If it would return any value, which this one does not,

that would be passed as a value for this first argument,

this first parameter, to setTimeout.

And that, of course, would be the wrong thing to do here

because here I don't wanna pass the return value

of that function to setTimeout,

but instead the function itself,

so that internally setTimeout can execute this function

at some point in the future.

And that's why you must omit the parentheses here

so that you don't execute this function right away,

and you instead pass the function as a value to set.Timeout.

Well, and then here, set.Timeout takes a

second argument as well, which is now not a function,

but instead a number which defines the number

of milliseconds JavaScript should wait

until it executes this function,

which you passed as a first argument to set.Timeout.

And I can, of course, also do that with handleTimeout2.

Now, just to be clear,

you can always create an anonymous function instead

of defining a function in advance,

and then you could, of course, also add any code

you want to execute to that.

But when you define such an anonymous function,

you're also not executing it yet.

Instead, you're also just defining it,

and you're passing that defined function to set.Timeout.

So you're in the end doing the same as you're doing here

by defining it in advance

and passing a handler to that function,

the name of the function to setTimeout.

You're essentially doing the same here

when defining the function in the place where it's needed.

You're still only defining it.

You're not executing it immediately.

Well, and therefore here, if you save that and you reload,

you'll see nothing initially,

but then once these timers expire,

you will see the different messages they output.

Now knowing that you can pass functions as values

to other functions is an important first step,

but you should not think that this is only possible

for built-in functions like set.Timeout.

Instead, you can also build your own function

like greeter, for example, which accepts a greet function

parameter so a regular parameter in the end,

but a parameter which expects to get a function as a value.

And then inside of greeter,

we could execute greet function like this,

so calling it as a function by adding these parentheses,

and now we could call greeter like this

and pass a function to greeter,

like, for example, here an arrow function where

I console.log('Hi').

If I do that and save everything

and reload this page and open this console,

you will see Hi here,

and this Hi is, of course, coming from this

console.log message,

so this function here is getting executed

because we're passing it as a value

for this greetFn parameter to the greeter function,

and inside of that greeter function

I'm then executing this greetFn parameter,

so the value that's received on that parameter,

which is this function.

So this function down here is passed as a value to greetFn,

and then greetFn is executed here.

Therefore, indirectly, this function is getting executed

there because this function down there at the bottom is the

value received here on greetFn.

And I just wanted to mention this here

because it really is important to be aware

of the fact that passing functions as values is not limited

to built-in functions like set.Timeout,

but can be done with all functions,

including your own functions.

Those can also accept functions as input.