1
00:00:01,020 --> 00:00:04,842
To understand how JavaScript
can respond to user events,

2
00:00:04,842 --> 00:00:08,743
we first need to understand
a little more about functions.

3
00:00:08,743 --> 00:00:13,239
Functions are often called first
class citizens in JavaScript.

4
00:00:13,239 --> 00:00:18,431
This means that like other data types,
they can be stored in variables and

5
00:00:18,431 --> 00:00:22,044
most importantly,
passed into other functions.

6
00:00:22,044 --> 00:00:25,740
The idea of functions being passed
into other functions might be

7
00:00:25,740 --> 00:00:29,308
familiar if you've worked with
callback functions before.

8
00:00:29,308 --> 00:00:36,516
If not, I've added links to resources on
callback functions in the teacher's notes.

9
00:00:36,516 --> 00:00:41,091
Passing a function into another
function gives us control over how and

10
00:00:41,091 --> 00:00:42,804
when that function runs.

11
00:00:42,804 --> 00:00:46,283
Right now,
let's get comfortable with an example.

12
00:00:46,283 --> 00:00:50,380
Later on, we'll learn how this
applies to the real world.

13
00:00:50,380 --> 00:00:53,054
Open up the workspace for this video and

14
00:00:53,054 --> 00:00:57,850
let's check out some code to get
a better understanding of this idea.

15
00:00:57,850 --> 00:01:01,445
You're probably familiar with
this style of writing a function,

16
00:01:01,445 --> 00:01:03,505
it is called a function declaration.

17
00:01:03,505 --> 00:01:08,369
We've defined a function called sayHi that
prints the message Hello to the console.

18
00:01:08,369 --> 00:01:12,590
We can call this sayHi function
by using parentheses like this.

19
00:01:16,272 --> 00:01:20,608
Switching over to the browser and
refreshing, we get Hello in the console.

20
00:01:20,608 --> 00:01:21,972
Nothing new here.

21
00:01:24,580 --> 00:01:29,300
Let's erase this last line and
write another function called hiAndBye.

22
00:01:55,130 --> 00:01:59,791
Notice in the new hiAndBye function,
the function accepts a parameter or

23
00:01:59,791 --> 00:02:03,640
placeholder value,
which we can name anything we'd like.

24
00:02:03,640 --> 00:02:06,180
Here it's named func.

25
00:02:06,180 --> 00:02:09,238
hiAndBye expects func to be a function.

26
00:02:09,238 --> 00:02:13,590
Inside hiAndBye,
hiAndBye calls the function.

27
00:02:13,590 --> 00:02:17,411
In other words,
we can pass a function into hiAndBye and

28
00:02:17,411 --> 00:02:20,189
hiAndBye will run that function for us.

29
00:02:20,189 --> 00:02:24,712
Passing a function into a function
may seem a bit strange at first, but

30
00:02:24,712 --> 00:02:28,238
this idea turns out to be
a powerful one in JavaScript,

31
00:02:28,238 --> 00:02:31,549
and you'll notice this
happen all over the place.

32
00:02:31,549 --> 00:02:36,051
Let's call our new hiAndBye function,
passing sayHi as an argument

33
00:02:44,830 --> 00:02:47,170
Checking the console, it works.

34
00:02:47,170 --> 00:02:50,235
Let's take this one step further.

35
00:02:50,235 --> 00:02:55,110
We can actually pass a function
directly into another function.

36
00:02:55,110 --> 00:02:59,975
I'll select and
cut the sayHi definition and

37
00:02:59,975 --> 00:03:04,080
paste it right into hiAndBye, save.

38
00:03:06,630 --> 00:03:08,029
And it works just the same.

39
00:03:11,280 --> 00:03:15,753
You can leave the name sayHi here,
but oftentimes you will find function

40
00:03:15,753 --> 00:03:19,070
expressions written without any names,
like this.

41
00:03:25,221 --> 00:03:27,420
This is what's called
an anonymous function.

42
00:03:30,960 --> 00:03:32,739
I'll change the name of the greeting.

43
00:03:43,671 --> 00:03:47,173
There we go and it works.

44
00:03:47,173 --> 00:03:50,790
Now why would you want to pass
one function into another?

45
00:03:50,790 --> 00:03:52,619
Great question.

46
00:03:52,619 --> 00:03:56,140
We'll find out in the next episode
of interacting with the DOM