Callback Functions in JavaScript

By Sue Smith

In JavaScript, programmers can define units of code including variables and functions. JavaScript functions can also receive parameters, with the code calling a function passing these parameters either as variables or values. It is also possible to pass a reference to another function as a parameter. A callback function is typically one that is called when another function finishes executing. For this reason, callback functions often appear as parameters to other functions.

Callback Definition

To implement a callback function, the JavaScript code in a page must first define the function. The following sample code defines a function and stores a variable reference to it: var callbackDefinition = function(numParam) { alert(numParam); };

The function uses a numerical parameter for demonstration. The callback function can contain any JavaScript code a standard function could include. The code will now be able to pass a reference to the function as parameter to another function, using the variable name.

Callback Parameter

Once a script has a function defined as a variable, it can pass that variable as parameter to another function. The following sample code demonstrates the technique: mainFunction(10, callbackDefinition);

This code calls a named function, passing a number parameter and the name of the variable storing the callback function code. The outline of the function being called here must match these two parameters. The function receiving the callback variable will be able to call the function it stores.

Function Execution

Once passed to the main function, a callback function can be executed. The following sample code demonstrates: function mainFunction(myNum, callbackFn) { alert(myNum); callbackFn(myNum*2); }

For demonstration, this code first outputs a JavaScript alert which will cause a dialog to appear in the user's browser. Once this code executes, the function calls the callback function using the name specified as parameter. The callback function call includes a numerical parameter, which is expected by the function that was initially defined as a variable.

Function Call

Once a page has a function defined, including a callback, it can execute this code. Often, developers instruct the browser to listen for a user event, executing functions when this occurs. For example, the following HTML code calls a function:

Here is a click-able section

If the function specified as parameter contains the callback variable definition and the call to the main function, this will create the callback effect, as follows: function doCallback() { var callFn = function(numParam) { alert(numParam); }; mainFunction(10, callFn); }

Once the main function executes its own code content, it calls the callback function.