Section 5.2. Callback Functions | Learning JavaScript, 2nd Edition

5.2. Callback Functions

In Chapter 4's section on the Array object, I wrote that there are some methods dependent on functions that are invoked automatically based on some event. The Array methods are filter, forEach, every, map, and some, and the functions used are function literals, though when used in this manner, they're usually referred to as callback functions.

Returning to the Array methods, the filter method ensures that elements are not added to any element unless they pass certain criteria. Rather than have to test a value and then add to an array, you can just toss everything at the array and let filter take care of the work for you. The forEach method takes a function that's then processed against each element. Unlike filter, the array is not impacted by the function.

The every method runs the callback function against every element in the array until one returns a false value. The map method runs the callback function against all the array elements and creates a new array from the results. Finally, the some method is the opposite of every, in that it runs the callback function against every element until one returns a true value.

Each callback function has three parameters: element, index, and array. Some return a value, others don't. None impact the original array.

Example 5-4 demonstrates how to use a callback function with an Array. In this example, the original array contains elements that are themselves an array containing color values in a range of 0255. After the array is built, one function is attached, checkColor, which checks each array element for proper range. A second then checks to make sure all three RGB values are present.

Example 5-4. Using callback functions with Array filter method

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Array filter and callback functions</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> //<![CDATA[ // check color range callback function function checkColor(element,index,array) {   return (element >= 0 && element < 256); } // check to ensure you have three RGB colors function checkCount(element,index,array) {   return (element.length == 3); } // color array var colors = new Array(  ); colors[0] = [0,262,255]; colors[1] = [255,255,255]; colors[2] = [255,0,0]; colors[3] = [0,255,0]; colors[4] = [0,0,255]; colors[5] = [-5,999,255]; // filter on color range var testedColors = new Array(  ); for (var i in colors) {        testedColors[i] = colors[i].filter(checkColor); } // filter on three values var newTested = testedColors.filter(checkCount); for (i in newTested) {    document.writeln(newTested[i] + "<br />"); } //]]> </script> </body> </html>

In the end, only four of the color points survive both checksthe middle four.