Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Callback Functions in JavaScript

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What is a Callback?

3:06 with Andrew Chalkley

In this video we'll take a look at what a callback looks like with some example syntax.

Callback Syntax

Given the following code...

function everySecond(callback) {
  // This function runs the callback every second
}

function getStockData() {
  // This function gets stock data from the NYSE
}

everySecond(getStockData);

...the getStockData function is a callback function since it's being invoked by the everySecond function. Callbacks are just regular functions used by another function at some other time in the future. This can be at regular intervals or from user interaction.

The easiest way to spot a callback is if it has the name of a function and is being passed into another function call.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    What is a callback? 0:00
    A callback is function like any other, but it's what you do with it that's different. 0:02
    Instead of calling the function manually, 0:08
    you're passing the name of the function to another function to execute. 0:11
    Here, we have two functions. 0:16
    One called callbackFunction and another called executeCallback. 0:18
    Both have the word callback in their names, but they don't need to. 0:22
    They're just the names that describe what the functions are or do. 0:26
    The callbackFunction is a regular function that could have any functionality inside. 0:30
    The executeCallback function will, 0:36
    at some point in the future, execute or call the callback. 0:38
    How do you pass in a parameter into another function? 0:43
    Simply, pass in the name of the function you want to use as a callback. 0:45
    Notice there's no parentheses. 0:50
    Remember, we are not calling the function, we want the computer to. 0:53
    But we have to tell the computer the name of the function it should execute. 0:58
    When you declare a function with a name, like callbackFunction, 1:03
    you are giving it the variable name of callbackFunction. 1:07
    Creating a callbackFunction variable and 1:10
    setting the same functionality to that variable is functionally identical 1:12
    to declaring a function with the callbackFunction name. 1:18
    If you're unfamiliar with this syntax, 1:22
    we'll be covering this a lot more in depth later. 1:24
    The simple rule, when using a function as a callbackFunction is 1:27
    don't use parentheses when passing in the function into another function. 1:31
    It's often said that functions are first class objects in JavaScript. 1:36
    This is a fancy way of saying functions can be used like other variables. 1:40
    A function can be used as an argument, just like a string, 1:44
    number, Boolean, or object. 1:48
    You wouldn’t put parenthesis after a variable name. 1:51
    You don’t with a callback. 1:54
    Let’s look at some examples of callbacks. 1:57
    I've got some sample code that shows some fictitious functions and 2:00
    callbacks for illustrative purposes. 2:04
    The first line of code will show a hint when a user clicks on a text field. 2:06
    Can you see which function would be a call back? 2:12
    showHint has no parentheses and that's what you'd want to invoked or 2:14
    called when the click happens. 2:19
    The second line has similar functionality, so 2:22
    what we'll be doing in one of our projects, creating a clock. 2:24
    Every second, the clock will update the hands and time. 2:29
    You should be getting a handle of seeing what a callback function is now. 2:32
    tickClock is the callback function here, it has no parentheses. 2:37
    The final line of code has two parameters. 2:41
    It's a function that reads a filename and 2:44
    then a callback will print the contents of the file. 2:46
    Callbacks don't have to be the first parameter of a function, 2:49
    it can be anywhere in the function call. 2:53
    In this case, it's the second parameter. 2:56
    Now that you've seen what a callback function looks like, 2:58
    let's create our own callback and a function that will invoke our callback. 3:01

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up