This course contains good reference material, but does not reflect our current quality standards.

Check out a free preview of the full Organizing JavaScript Functionality course:
The "Callbacks" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Callbacks occur when a function is passed as an argument so it can be called after another routine has finished. One of the most common uses for callbacks is with the setTimeout method. Kyle demonstrates the setTimeout method as well as how to use callbacks with AJAX requests.

Get Unlimited Access Now

Transcript from the "Callbacks" Lesson

>> [MUSIC]

>> Kyle Simpson: Let's imagine that I have some utility called Fu, and I'm not even going to tell you what Fu does. But Fu does some work and it doesn't finish right away. For example, there's a utility built into JavaScript called setTimeout and we can pass something to setTimeout, which is a function.

[00:00:23] And then we tell it how long we want to wait before it runs that function. So if I had declared a function called bar that prints out Hello World.
>> Kyle Simpson: If I pass bar by name, notice no parentheses there, if I pass bar by name, this utility, at some point later in the future, 1,000 milliseconds from now, it's going to call that function.

[00:00:54] And print this out. So, everybody try this, try typing that code into your console. Let me copy it over and show you. Let's try typing that code in your console and running it, and what you'll see is that it waits for a second, and then it prints out Hello World.

>> Kyle Simpson: So essentially what I'm doing is I'm passing a function by its value. I'm not calling the function, I'm passing the function value. Similar to how we returned a function earlier, this is one where we're passing it in. Now this usage, passing a function as a value, is often called callbacks.

[00:02:07] Because I'm passing a function in that at some point later in the future, and I don't care when, you're going to call back to my function. Sometimes you're just going to execute it like we're seeing here. Sometimes you're going to call back and you're going to pass me something.

[00:02:22] So, an example of that is, let's imagine, back here, that I have some utility defined by a library called Ajax. And what Ajax takes is two parameters. So when I call it, I call Ajax, and the first thing it expects is a URL. But the second parameter that it expects is a function.

[00:02:48] Okay, now I'm going to name mine resp. So if I declare what that function looks like, function resp is expecting some content back from the Ajax request. And I'm going to print it.
>> Kyle Simpson: So what's happening is, I'm not calling resp, there's no parentheses here. I'm passing the resp in by reference, by name, and at some later point after the Ajax request finishes and it's got some content back, it's going to call my function, and pass that content in so that I'm going to be able to print it.

>> Kyle Simpson: This isn't directly related to closure, but it's actually related to one of the base principles of closure, which is functions as first class values. That is, functions are a value, just like the number 42 is a value, and the string Hello World is a value. They're all just values, and we can pass values all around wherever we want to and we can return values wherever we want to.

[00:04:07] There's nothing special about a function that makes it more or less capable as a value than the number 42, does that make sense? It's just a value that we can pass around. So in this case, what we're saying is, I don't have the response from that Ajax request yet, if I did have the response, if it was an immediate thing like if it could happen right away, then I could just say, var resp = ajax, I could just get it.

[00:04:32] But because Ajax is not a blocking network request, it doesn't have the answer right away. And the way we then wait for that answer is to pass in a call back. And that callback will get called back at some later time with the answer that we were looking for.

[00:04:51] Asynchronous programming, which is essentially this is us dipping our toe into that pool. Asynchronous programming is a fantastically complex branch of JavaScript programming, and there's tons and tons of stuff out there about it. Books that I've written and many others have written. So we're not going to go any further than just understanding this concept that if I pass a function in, somebody can call it at a later time.