Preview
Video Player
00:00
00:00
Functions as Parameters
3:57To understand how JavaScript can respond to user events, we first need to understand a little bit more about functions. Functions are often called first-class citizens in JavaScript. This means just like other data types, they can be stored in variables, and most importantly, passed into other functions.
To understand how JavaScript
can respond to user events,
0:01
we first need to understand
a little more about functions.
0:04
Functions are often called first
class citizens in JavaScript.
0:08
This means that like other data types,
they can be stored in variables and
0:13
most importantly,
passed into other functions.
0:18
The idea of functions being passed
into other functions might be
0:22
familiar if you've worked with
callback functions before.
0:25
If not, I've added links to resources on
callback functions in the teacher's notes.
0:29
Passing a function into another
function gives us control over how and
0:36
when that function runs.
0:41
Right now,
let's get comfortable with an example.
0:42
Later on, we'll learn how this
applies to the real world.
0:46
Open up the workspace for this video and
0:50
let's check out some code to get
a better understanding of this idea.
0:53
You're probably familiar with
this style of writing a function,
0:57
it is called a function declaration.
1:01
We've defined a function called sayHi that
prints the message Hello to the console.
1:03
We can call this sayHi function
by using parentheses like this.
1:08
Switching over to the browser and
refreshing, we get Hello in the console.
1:16
Nothing new here.
1:20
Let's erase this last line and
write another function called hiAndBye.
1:24
Notice in the new hiAndBye function,
the function accepts a parameter or
1:55
placeholder value,
which we can name anything we'd like.
1:59
Here it's named func.
2:03
hiAndBye expects func to be a function.
2:06
Inside hiAndBye,
hiAndBye calls the function.
2:09
In other words,
we can pass a function into hiAndBye and
2:13
hiAndBye will run that function for us.
2:17
Passing a function into a function
may seem a bit strange at first, but
2:20
this idea turns out to be
a powerful one in JavaScript,
2:24
and you'll notice this
happen all over the place.
2:28
Let's call our new hiAndBye function,
passing sayHi as an argument
2:31
Checking the console, it works.
2:44
Let's take this one step further.
2:47
We can actually pass a function
directly into another function.
2:50
I'll select and
cut the sayHi definition and
2:55
paste it right into hiAndBye, save.
2:59
And it works just the same.
3:06
You can leave the name sayHi here,
but oftentimes you will find function
3:11
expressions written without any names,
like this.
3:15
This is what's called
an anonymous function.
3:25
I'll change the name of the greeting.
3:30
There we go and it works.
3:43
Now why would you want to pass
one function into another?
3:47
Great question.
3:50
We'll find out in the next episode
of interacting with the DOM
3:52