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
In this video we'll take a look at why you'd use callbacks.
Additional Treehouse Content
Study Tips
If you find some topics particularly challenging you might need to revisit them. You can use a technique called Spaced Repetition. Take this course today, then tomorrow, after a further 3 days, then after a week, then after two weeks, etc. Doing this will help cement syntax and terminology in your long-term memory. Also, check out our How to Learn series.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hello and welcome to this course on
callback functions in JavaScript.
0:04
My name is Andrew, a JavaScript
developer life longer learner and
0:08
teacher here at Tree House.
0:11
Along your JavaScript journey,
0:13
you'll have probably come
across some callbacks already.
0:15
Callback functions are a foundational
concept in JavaScript.
0:19
In this course,
you'll learn about callback functions and
0:22
you'll get to practice writing your own.
0:25
Callbacks are a challenging
topic to understand and master.
0:28
Repetition, time, patience, and
practice will get you there.
0:31
Check the teacher's notes for
some successful learning strategies.
0:35
In this course,
0:39
we'll be building a couple of projects
along the way all with callback functions.
0:40
The first project will be
a simple surprise application.
0:45
After random interval of time
a callback is triggered and
0:48
the surprise message will
appear on the screen.
0:51
Then we'll make a clock.
0:54
Thanks to a callback function, the display
of the clock will update every second.
0:57
Finally, we'll use the Document Object
Model and callbacks to alter the style
1:02
of an input and text area when
a user interacts with the form.
1:07
If you're new to
the Document Object Model,
1:12
or DOM, be sure to take
the prerequisites for this course.
1:14
Callbacks are just functions, but
instead of being called by you explicitly,
1:19
they are called by the computer
at a given time in the future.
1:23
Think of a fire alarm at a school or
a workplace.
1:27
Pupils and staff are given instructions on
what to do when the fire alarm goes off.
1:30
Mr. Pierce's class is designated
to go out of the side entrance and
1:35
meet at the basketball hoop.
1:40
These instructions need to be followed,
1:42
no matter the cause of
the fire alarm going off.
1:44
If the fire alarm is triggered by
stuff in the school's office for
1:48
a drill, if someone uses the alarm pull
station, or, if there's a real fire,
1:51
Mr. Pierce's class will follow
the instructions previously given.
1:56
They'll exit the side entrance and
meet at the basketball hoop.
2:00
It would be inefficient of me to tell the
class the instructions whenever the alarm
2:05
sounds.
2:09
It's stopping me from doing anything.
2:10
It's better for
me to tell them the plan before hand and
2:12
have the students and staff carry out
this instructions when necessary.
2:16
No matter the method of activation,
the fire alarm was triggered some
2:20
time in the future and the instructions
were followed by the pupils and staff.
2:25
This is analogous to callbacks.
2:29
Just like a function, students and staff
have a set of instructions to execute.
2:31
Instead of following the instructions
when you tell them to
2:37
they follow the instructions
when they were supposed to.
2:40
Remember, a function is a set
of instructions that can be run
2:43
over and over again.
2:47
When you call or
invoke a function you're asking for
2:48
those lines of code to
be executed immediately.
2:51
This is also known as
synchronous programming.
2:54
When you use the function as a callback,
it gets executed or
2:58
invoked when it's supposed
to in the future.
3:01
This is known as asynchronous programming.
3:05
Using asynchronous programming allows
a computer to perform other tasks
3:08
while waiting for an event to occur.
3:12
Let's take a look at some scenarios
where callbacks are used.
3:15
Callbacks are used for
one off and repeat timers.
3:19
For example,
3:22
in our clock application, we'll want
the clock to update every second.
3:23
[SOUND].
3:28
Callbacks are used in user interaction.
3:29
When a user clicks a button,
types into an input field, or
3:32
submits a form, developers have an
opportunity to have a callback triggered.
3:35
You should already be familiar with this.
3:40
If not, why not check out
the prerequisites for this course.
3:43
Another place where you'll be waiting for
3:47
something to occur is
loading data from a server.
3:49
AJAX is a popular technique used to
load dynamic information into a web page
3:52
without reloading the page.
3:57
When you make a request to web server,
the JSON data is returned into a callback.
3:59
I've linked to the treehouse content
on AJAX in the teacher's notes.
4:05
Another example of using a callback in
JavaScript is reading a file in Node.js.
4:09
When the file has been
completely read the contents of
4:14
the file are passed into a callback.
4:17
This isn't a comprehensive
list of all the callbacks
4:19
you'll come across when
writing JavaScript programs.
4:22
In fact, callbacks are so common,
you'll be spotting them everywhere.
4:25
The prevalence of callback functions and
asynchronous programming and
4:30
the speed they can bring
means JavaScript is known for
4:34
its performance when building user
interfaces and web applications.
4:37
Callbacks are everywhere in JavaScript,
but what do they look like?
4:42
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up