To understand how JavaScript can respond to user events

we first need to understand a little bit more about functions.

It's often said that functions are first class citizens in JavaScript.

This means that functions can be treated like any other data type such as a number,

a string or an object.

For example you can pass a function as an argument into another function.

The same way you might pass in a number or string.

This might sound a bit strange but once you've tried it a few times you'll

get the hang of it and you also unlock one of JavaScript most powerful features.

Passing a function around in this way is how we'll get control over when and

how it runs.

So right now, let's get comfortable with a simple example.

Then in future videos we'll see how this applies to the real world.

Open up the workspace or project files for this video and

let's have a look at some code to get a better understanding of this idea.

The first thing I want to do is create a temporary JavaScript file to work in.

So let's open up index.html and

connect our page to the temporary file will create in a moment.

So at the bottom of the file, I'll add a new script tag that links to

a JavaScript file named temp.js.

Now let's create a new file and save it as temp.js.

And let's play with functions a little bit in this file to get an idea of

how they work.

Now, you're probably familiar with this style of writing a function called

a function declaration.

And we can call this save function by using parentheses like so and

passing the string Hello as an argument.

Saving the file and switching over to the browser we see hello in the console.

Nothing really new here.

So let's go back and erase this last line and

write another function called exec short for execute.

Notice the new exec function accepts two parameters: func and arg.

So it's expecting func to be a function and

arg to be an acceptable argument to pass to func.

Now, inside exec calls func passing in arg. In

other words we can pass a function into exec and exec will run it for us.

Now, passing a function into a function may seem a bit strange at first but

this idea turns out to be a very powerful one in JavaScript and

you'll see this happen all over the place.

Now, let's call our new exec function passing in say as the first argument.

Now, we'll want say to be passed the string "hi there" when it's called, so

will pass that in as the second argument to exec.

Now, I just wanna point out again that these two parameters

are very different data types.

One is a function and the other is a string but they're both

first class citizens and that they can be passed as arguments in the same way.

So saving our file refreshing the page and

checking the console, we see that it works.

So let's take this one step further.

We can actually pass a function directly into another function.

So I'll go ahead and select and cut the say function and

paste it right here as a direct argument to exec.

So here we've actually done a little more than just passing a function

as an argument.

We've now transformed it from a statement into an expression.

Now, that distinction isn't super important right now but

check the teacher's notes if you'd like to learn more about that.

Now ,you can leave the name say here.

But often times you'll see function expressions written without any names,

like this.

This is what's called an anonymous function.

So now I'll change the greeting here to say something like, Greetings everyone.

I'll save my file and let's go back to the browser and

verify that we still get the same results.

So once I refresh it looks good.

Now why would we ever want to pass a function into another function?

That's a great question.

And we'll look at that in the next video.