JavaScript Callback Functions
FREE     Duration: 6:18
Part of Course: Introductory D3 Course
 

Takeaways:

  • A JavaScript function is a block of code that will be executed when you call it
  • Because JavaScript functions are first-class objects, you can pass functions to other functions as variables
  • The method of passing in functions as parameters to other functions to use them inside is used in JavaScript libraries almost everywhere
  • A JavaScript Callback Function is a function that is passed as a parameter to another JavaScript function, and the callback function is run inside of the function it was passed into
  • JavaScript Callback Functions can be used synchronously or asynchronously

Transcript:

JavaScript Callback Functions

Passing JavaScript Functions as Variables Revisited


function functionName() {
    // some code	
}

This is a JavaScript Function

A function is a block of code that will be executed when you call it

A function is written as a code block inside curly { } braces, preceded by the function keyword

The code inside the function will be executed when you call the function


function functionName(var1, var 2) {
    // some code
}
functionName(argument1, argument2);

When you call a function, you can pass along some values to it, these values are called arguments or parameters.

These arguments can then be used inside of the function.

You can send as many arguments as you like, separated by commas (,)

To use the arguments inside of the function, you must declare the arguments as variables when defining the function

The variables and arguments must be in expected order.

That is, the first argument gets assigned to the first variable.


function functionOne(x) { return x; };

function functionTwo(var1) {
    // some code
}

functionTwo(functionOne);

Because you can assign functions to variables, and because functions are objects in JavaScript, you can pass functions to other functions as variables

Which means that in this case, we are passing functionOne as a variable to be used inside of functionTwo

Inside of functionTwo, var1's value will be functionOne

This is how you can pass functions to other functions in JavaScript.

In this case, functionTwo can use functionOne inside of it.



JavaScript Callback Functions


function functionOne(x) { return x; };

function functionTwo(var1) {
    // some code
}

functionTwo(functionOne);

This method of passing in functions to other functions to use them inside is used in JavaScript libraries almost everywhere.

The common name for the function passed in is a callback function.

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time.

The invocation may be immediate as in a synchronous callback or it might happen at later time, as in an asynchronous callback.

We will come back to synchronous and asynchronous callbacks in another video.


function functionOne(x) { alert(x); }

function functionTwo(var1, callback) {
    callback(var1);		
}

functionTwo(2, functionOne);

This is an example of using the callback variable in a JavaScript Function.

Function One takes in an argument and issues an alert with the x as it's argument.

Function Two takes in an argument and a function.

Function Two then passes the argument it took in to the function it took in.

Function One is the callback function in this case.


As JavaScript has anonymous functions available, you can also pass in anonymous Functions as a variable to a function.

function functionTwo(var1, callback) {
    callback(var1);		
}

functionTwo(1, function (x) { alert(x); })

In this case, the callback function is defined when we are calling functionTwo.


Note that we can call the callback function inside of functionTwo as many times as we like.

function functionTwo(var1, callback) {
    callback(var1);	
    callback(var1);	
}

functionTwo(1, function (x) { alert(x); })

There is no limit to how many times we can call it.


The other thing to pay attention to is that you can pass in as many callback functions as you like to another function.

function functionTwo(var1, var2, callback1, callback2) {
    callback1(var1);	
    callback2(var2);	
}

functionTwo(1, 2, function (x) { alert(x); }, function (x) { alert(x); })

Here in function two we pass in two variables and two functions as arguments.

Inside of function two, we run callback1 with variable 1 and we run callback2 with variable 2.


Let's take a look at the code in the JavaScript Console to see how it functions.


First we start in the browser with the Developer tools open and the JavaScript Console ready to go.

function functionOne(x) { alert(x); }

FunctionOne is defined so that it emits an alert with the value of the argument that got passed into it.


Let's test it

functionOne(2);

BROWSER - Click on the Okay button

Function One alerts us with the number 2.


Next, let's define function two so that it alerts us as well.

function functionTwo(x) { alert(x); }

FunctionTwo is defined so that emits an alert with the value of the argument that got passed into it.

It has the exact same functionality as functionOne.


We test it with the number two.

functionTwo(2);

BROWSER - Click on the Okay button

Function Two alerts us with the number 2.

This is expected because it's the same functionality as function one.


Let's rewrite the definition of functionTwo so that it takes in a variable and a function.

Then it will pass the variable to the function that was passed in.

function functionTwo(var1, callback) { callback(var1); }

We name the function being passed into functionTwo callback.


Let's test it by passing the number 2 and the functionOne function

functionTwo(2, functionOne);

BROWSER - Click on the Okay button

It works the same as before.

Function Two alerts us with the number 2.

This time however, instead of functionTwo having the alert command inside of it, it used the command inside of functionOne.


Let's test it a different way this time.

We continue passing in the number 2, except this time instead of passing in the functionOne function, we pass in an anonymous function.

functionTwo(2, function(x) { alert(x); });

BROWSER - Click on the Okay button

It works the same as before.

Function Two alerts us with the number 2.

This time however, instead of functionTwo having the alert command inside of it, it used the command inside of the anonymous function we passed in.


Let's rewrite the definition of functionTwo so that it takes in a variable and two functions.

function functionTwo(var1, callback1, callback2) {
    callback1(var1);
    callback2(var1);
}

Function two now takes in one variable and two functions.

We name the functions being passed into functionTwo callback1 and callback2.

It then passes this variable to the first function - callback1.

It then passes this variable to the second function - callback2.


Let's test it by passing the number 2 and the functionOne function in twice

functionTwo(2, functionOne, functionOne);

BROWSER - Click on the Okay button

It works the same as before for each function.

Function Two alerts us with the number 2 then alerts us with the number 2 again.


Finally, Let's test it by passing the number 2, the functionOne function and an anonymous function.

The anonymous function will alert the result of adding two to the number that was passed into it.

functionTwo(2, functionOne, function(x) { alert(x+2); });

BROWSER - Click on the Okay button

First we get the alert of the number 2.

Then we get the alert of the number 4.


And with that we have covered what JavaScript Callback Functions are and how they can be used.

This will let us explore topics like AJAX, how D3 does asynchronous requests to the server and how we can use callback functions to manipulate the data after D3 receives it and parses it for us.

<< Back To D3 Screencast and Written Tutorials Index