This course will be retired on February 12, 2022. We recommend "JavaScript and the DOM" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Just as you can pass a number to a function, you can pass a function to a function. This might sound a bit strange, but once you've tried it a few times, you'll get the hang of it. You'll also unlock one of JavaScript's most powerful features.
To learn more about the distinction between function expressions and function statements, check out the MDN articles linked below.
To understand how JavaScript
can respond to user events
0:00
we first need to understand
a little bit more about functions.
0:03
It's often said that functions
are first class citizens in JavaScript.
0:06
This means that functions can be treated
like any other data type such as a number,
0:10
a string or an object.
0:14
For example you can pass a function
as an argument into another function.
0:16
The same way you might pass in a number or
string.
0:20
This might sound a bit strange but
once you've tried it a few times you'll
0:22
get the hang of it and you also unlock
one of JavaScript most powerful features.
0:26
Passing a function around in this way
is how we'll get control over when and
0:32
how it runs.
0:35
So right now, let's get
comfortable with a simple example.
0:37
Then in future videos we'll see how
this applies to the real world.
0:40
Open up the workspace or
project files for this video and
0:43
let's have a look at some code to get
a better understanding of this idea.
0:46
The first thing I want to do is create
a temporary JavaScript file to work in.
0:50
So let's open up index.html and
0:54
connect our page to the temporary
file will create in a moment.
0:56
So at the bottom of the file,
I'll add a new script tag that links to
0:59
a JavaScript file named temp.js.
1:04
Now let's create a new file and
save it as temp.js.
1:09
And let's play with functions a little
bit in this file to get an idea of
1:15
how they work.
1:18
Now, you're probably familiar with this
style of writing a function called
1:19
a function declaration.
1:23
And we can call this save function
by using parentheses like so and
1:33
passing the string Hello as an argument.
1:38
Saving the file and switching over to
the browser we see hello in the console.
1:43
Nothing really new here.
1:48
So let's go back and
erase this last line and
1:50
write another function called
exec short for execute.
1:53
Notice the new exec function
accepts two parameters: func and arg.
2:07
So it's expecting func
to be a function and
2:12
arg to be an acceptable
argument to pass to func.
2:15
Now, inside exec calls
func passing in arg. In
2:19
other words we can pass a function into
exec and exec will run it for us.
2:23
Now, passing a function into a function
may seem a bit strange at first but
2:29
this idea turns out to be a very
powerful one in JavaScript and
2:33
you'll see this happen all over the place.
2:36
Now, let's call our new exec function
passing in say as the first argument.
2:39
Now, we'll want say to be passed
the string "hi there" when it's called, so
2:45
will pass that in as
the second argument to exec.
2:51
Now, I just wanna point out
again that these two parameters
2:55
are very different data types.
2:59
One is a function and
the other is a string but they're both
3:01
first class citizens and that they can
be passed as arguments in the same way.
3:06
So saving our file refreshing the page and
3:10
checking the console,
we see that it works.
3:14
So let's take this one step further.
3:18
We can actually pass a function
directly into another function.
3:20
So I'll go ahead and select and
cut the say function and
3:25
paste it right here as
a direct argument to exec.
3:30
So here we've actually done a little
more than just passing a function
3:36
as an argument.
3:39
We've now transformed it from
a statement into an expression.
3:40
Now, that distinction isn't
super important right now but
3:44
check the teacher's notes if you'd
like to learn more about that.
3:46
Now ,you can leave the name say here.
3:49
But often times you'll see function
expressions written without any names,
3:52
like this.
3:57
This is what's called
an anonymous function.
4:01
So now I'll change the greeting here to
say something like, Greetings everyone.
4:04
I'll save my file and
let's go back to the browser and
4:11
verify that we still get the same results.
4:14
So once I refresh it looks good.
4:16
Now why would we ever want to pass
a function into another function?
4:20
That's a great question.
4:24
And we'll look at that in the next video.
4:25
You need to sign up for Treehouse in order to download course files.
Sign up