[MUSIC]

Hello and welcome to this course on callback functions in JavaScript.

My name is Andrew, a JavaScript developer life longer learner and

teacher here at Tree House.

Along your JavaScript journey,

you'll have probably come across some callbacks already.

Callback functions are a foundational concept in JavaScript.

In this course, you'll learn about callback functions and

you'll get to practice writing your own.

Callbacks are a challenging topic to understand and master.

Repetition, time, patience, and practice will get you there.

Check the teacher's notes for some successful learning strategies.

In this course,

we'll be building a couple of projects along the way all with callback functions.

The first project will be a simple surprise application.

After random interval of time a callback is triggered and

the surprise message will appear on the screen.

Then we'll make clock.

Thanks to a callback function, the display of the clock will update every second.

Finally, we'll use the Document Object Model and callbacks to alter the style

of an input and text area when a user interacts with the form.

If you're new to the Document Object Model,

or DOM, Be sure to take the prerequisites for this course.

Callbacks are just functions, but instead of being called by you explicitly,

they are called by the computer at a given time in the future.

Think of a fire alarm at a school or a workplace.

Pupils and staff are given instructions on what to do when the fire alarm goes off.

Mr. Pierce's class is designated to go out of the side entrance and

meet at the basketball hoop.

These instructions need to be followed,

no matter the cause of the fire alarm going off.

If the fire alarm is triggered by stuff in the school's office for

a drill, if someone uses the alarm pull station, or, if there's a real fire,

Mr. Pierce's class will follow the instructions previously given.

They'll exit the side entrance and meet at the basketball hoop.

It would be inefficient of me to tell the class the instructions whenever the alarm

sounds.

It's stopping me from doing anything.

It's better for me to tell them the plan before hand and

have the students and staff carry out this instructions when necessary.

No matter the method of activation, the fire alarm was triggered some

time in the future and the instructions were followed by the pupils and staff.

This is analogous to callbacks.

Just like a function, students and staff have a set of instructions to execute.

Instead of following the instructions when you tell them to

they follow the instructions when they were supposed to.

Remember, a function is a set of instructions that can be run

over and over again.

When you call or invoke a function you're asking for

those lines of code to be executed immediately.

This is also known as synchronist programming.

When you use the function as a callback, it gets executed or

invoked when it's supposed to in the future.

This is known as asynchronous programming.

Using asynchronous programming allows a computer to perform other tasks

while waiting for an event to occur.

Let's take a look at some scenarios where callbacks are used.

Call backs are used for one off and repeat timers.

For example,

in our clock application, we'll want the clock to update every second.

[SOUND].

Call backs are used in user interaction.

When a user clicks a button, types into an input field, or

submits a form developers have an opportunity to have a callback triggered.

You should already be familiar with this.

If not, why not check out the prerequisites for this course.

Another place where you'll be waiting for

something to occur is loading data from a server.

AJAX is a popular technique used to load dynamic information into a web page

without reloading the page.

When you make a request to web server, the JSON data is returned into a callback.

I've linked to the treehouse content on AJAX in the teacher's notes.

Another example of using a callback in JavaScript is reading a file in Node.js.

When the file has been completely read the contents of

the file are passed into a callback.

This isn't a comprehensive list of all the callbacks

you'll come across when writing JavaScript programs.

In fact, call backs are so common, you'll be spotting them everywhere.

The prevalence of callback functions and asynchronous programming and

the speed they can bring means JavaScript is known for

its performance when building user interfaces and web applications.

Callbacks are everywhere in JavaScript, but what do they look like?