1
00:00:00,000 --> 00:00:04,615
[MUSIC]

2
00:00:04,615 --> 00:00:08,470
Hello and welcome to this course on
callback functions in JavaScript.

3
00:00:08,470 --> 00:00:11,490
My name is Andrew, a JavaScript
developer life longer learner and

4
00:00:11,490 --> 00:00:13,680
teacher here at Tree House.

5
00:00:13,680 --> 00:00:15,480
Along your JavaScript journey,

6
00:00:15,480 --> 00:00:18,017
you'll have probably come
across some callbacks already.

7
00:00:19,220 --> 00:00:22,990
Callback functions are a foundational
concept in JavaScript.

8
00:00:22,990 --> 00:00:25,950
In this course,
you'll learn about callback functions and

9
00:00:25,950 --> 00:00:28,430
you'll get to practice writing your own.

10
00:00:28,430 --> 00:00:31,830
Callbacks are a challenging
topic to understand and master.

11
00:00:31,830 --> 00:00:35,270
Repetition, time, patience, and
practice will get you there.

12
00:00:35,270 --> 00:00:39,260
Check the teacher's notes for
some successful learning strategies.

13
00:00:39,260 --> 00:00:40,200
In this course,

14
00:00:40,200 --> 00:00:45,280
we'll be building a couple of projects
along the way all with callback functions.

15
00:00:45,280 --> 00:00:48,970
The first project will be
a simple surprise application.

16
00:00:48,970 --> 00:00:51,910
After random interval of time
a callback is triggered and

17
00:00:51,910 --> 00:00:54,436
the surprise message will
appear on the screen.

18
00:00:54,436 --> 00:00:57,080
Then we'll make a clock.

19
00:00:57,080 --> 00:01:01,480
Thanks to a callback function, the display
of the clock will update every second.

20
00:01:02,950 --> 00:01:07,750
Finally, we'll use the Document Object
Model and callbacks to alter the style

21
00:01:07,750 --> 00:01:12,560
of an input and text area when
a user interacts with the form.

22
00:01:12,560 --> 00:01:14,870
If you're new to
the Document Object Model,

23
00:01:14,870 --> 00:01:19,350
or DOM, be sure to take
the prerequisites for this course.

24
00:01:19,350 --> 00:01:23,800
Callbacks are just functions, but
instead of being called by you explicitly,

25
00:01:23,800 --> 00:01:27,350
they are called by the computer
at a given time in the future.

26
00:01:27,350 --> 00:01:30,950
Think of a fire alarm at a school or
a workplace.

27
00:01:30,950 --> 00:01:35,454
Pupils and staff are given instructions on
what to do when the fire alarm goes off.

28
00:01:35,454 --> 00:01:40,620
Mr. Pierce's class is designated
to go out of the side entrance and

29
00:01:40,620 --> 00:01:42,760
meet at the basketball hoop.

30
00:01:42,760 --> 00:01:44,720
These instructions need to be followed,

31
00:01:44,720 --> 00:01:48,060
no matter the cause of
the fire alarm going off.

32
00:01:48,060 --> 00:01:51,280
If the fire alarm is triggered by
stuff in the school's office for

33
00:01:51,280 --> 00:01:56,195
a drill, if someone uses the alarm pull
station, or, if there's a real fire,

34
00:01:56,195 --> 00:02:00,580
Mr. Pierce's class will follow
the instructions previously given.

35
00:02:00,580 --> 00:02:05,340
They'll exit the side entrance and
meet at the basketball hoop.

36
00:02:05,340 --> 00:02:09,260
It would be inefficient of me to tell the
class the instructions whenever the alarm

37
00:02:09,260 --> 00:02:10,400
sounds.

38
00:02:10,400 --> 00:02:12,025
It's stopping me from doing anything.

39
00:02:12,025 --> 00:02:16,590
It's better for
me to tell them the plan before hand and

40
00:02:16,590 --> 00:02:20,730
have the students and staff carry out
this instructions when necessary.

41
00:02:20,730 --> 00:02:25,230
No matter the method of activation,
the fire alarm was triggered some

42
00:02:25,230 --> 00:02:29,270
time in the future and the instructions
were followed by the pupils and staff.

43
00:02:29,270 --> 00:02:31,400
This is analogous to callbacks.

44
00:02:31,400 --> 00:02:37,100
Just like a function, students and staff
have a set of instructions to execute.

45
00:02:37,100 --> 00:02:40,150
Instead of following the instructions
when you tell them to

46
00:02:40,150 --> 00:02:42,870
they follow the instructions
when they were supposed to.

47
00:02:43,920 --> 00:02:47,270
Remember, a function is a set
of instructions that can be run

48
00:02:47,270 --> 00:02:48,800
over and over again.

49
00:02:48,800 --> 00:02:51,810
When you call or
invoke a function you're asking for

50
00:02:51,810 --> 00:02:54,980
those lines of code to
be executed immediately.

51
00:02:54,980 --> 00:02:58,430
This is also known as
synchronous programming.

52
00:02:58,430 --> 00:03:01,990
When you use the function as a callback,
it gets executed or

53
00:03:01,990 --> 00:03:05,120
invoked when it's supposed
to in the future.

54
00:03:05,120 --> 00:03:07,380
This is known as asynchronous programming.

55
00:03:08,390 --> 00:03:12,780
Using asynchronous programming allows
a computer to perform other tasks

56
00:03:12,780 --> 00:03:15,370
while waiting for an event to occur.

57
00:03:15,370 --> 00:03:19,180
Let's take a look at some scenarios
where callbacks are used.

58
00:03:19,180 --> 00:03:22,760
Callbacks are used for
one off and repeat timers.

59
00:03:22,760 --> 00:03:23,690
For example,

60
00:03:23,690 --> 00:03:28,075
in our clock application, we'll want
the clock to update every second.

61
00:03:28,075 --> 00:03:29,096
[SOUND].

62
00:03:29,096 --> 00:03:32,120
Callbacks are used in user interaction.

63
00:03:32,120 --> 00:03:35,370
When a user clicks a button,
types into an input field, or

64
00:03:35,370 --> 00:03:40,940
submits a form, developers have an
opportunity to have a callback triggered.

65
00:03:40,940 --> 00:03:43,320
You should already be familiar with this.

66
00:03:43,320 --> 00:03:47,480
If not, why not check out
the prerequisites for this course.

67
00:03:47,480 --> 00:03:49,140
Another place where you'll be waiting for

68
00:03:49,140 --> 00:03:52,460
something to occur is
loading data from a server.

69
00:03:52,460 --> 00:03:57,410
AJAX is a popular technique used to
load dynamic information into a web page

70
00:03:57,410 --> 00:03:59,600
without reloading the page.

71
00:03:59,600 --> 00:04:05,380
When you make a request to web server,
the JSON data is returned into a callback.

72
00:04:05,380 --> 00:04:09,570
I've linked to the treehouse content
on AJAX in the teacher's notes.

73
00:04:09,570 --> 00:04:14,864
Another example of using a callback in
JavaScript is reading a file in Node.js.

74
00:04:14,864 --> 00:04:17,756
When the file has been
completely read the contents of

75
00:04:17,756 --> 00:04:19,780
the file are passed into a callback.

76
00:04:19,780 --> 00:04:22,670
This isn't a comprehensive
list of all the callbacks

77
00:04:22,670 --> 00:04:25,830
you'll come across when
writing JavaScript programs.

78
00:04:25,830 --> 00:04:30,670
In fact, callbacks are so common,
you'll be spotting them everywhere.

79
00:04:30,670 --> 00:04:34,530
The prevalence of callback functions and
asynchronous programming and

80
00:04:34,530 --> 00:04:37,530
the speed they can bring
means JavaScript is known for

81
00:04:37,530 --> 00:04:41,630
its performance when building user
interfaces and web applications.

82
00:04:42,920 --> 00:04:46,341
Callbacks are everywhere in JavaScript,
but what do they look like?