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, then 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.
A technique you might want to try is to go through the course, just watching the videos first. Then retake the course again with the videos and assessment.
Another technique would be to keep retaking the assessments at using the spaced repetition method.
Find out what helps you learn and let your student's know in the Treehouse Community forum.
You can read more about spaced repetition here.
Also check out the our How to Learn series .
[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 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
synchronist 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
Call backs 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
Call backs 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, call backs 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 up