First Class Functions, Higher Order Functions & Callback Functions
All three of these terms are related and go together. They are as simple to understand as they are widely used in javascript. And they are all part of javascript’s functional programming paradigm.
Here is a quick definition of each type of function, followed by full explanations of each.
A first class function is a function that was built with the intention of being passed around to other functions. It does one specific thing, does not have side effects, and is not intended to be called directly, but rather, to be used by ‘other functions.’
Those ‘other functions’ which accept one of those ‘first class functions’ as an argument are called higher order functions. Higher order functions also might be functions that return a function.
In a higher order function, when one of the parameters passed in is a function, that function is a callback function because it will be called back and used within the higher order function.
A higher order function is named as such because when using a callback to perform an operation within itself, the function has a ‘higher’ purpose than a regular function. When it returns a function, it also has a ‘higher’ purpose.
First Class Functions
First class functions should be created by function expressions, as opposed to function declarations. This makes them easy to read and pass around. Here is an example that would never be used in the real world, but should show this concept in more detail…
var add = (x, y) => x + y;
var subtract = (x, y) => x - y;
var multiply = (x, y) => x * y;function numbers(fn, x, y){
return fn(x, y);
}var addResult = numbers(add, 3, 2);
var subtractResult = numbers(subtract, 3, 2);
var multiplyResult = numbers(multiply, 3, 2);
The numbers function above is a higher order function that takes in a first class function as its callback function. It is custom built (not built in to js.)
Higher Order Functions
Typically, when beginners learn higher order functions they are learning the Array.prototype functions that javascript now provides as part of the language. Those functions are .map(), .filter(), .every(), .some(), and many more, which work by taking in a function as its parameter and applying it to every item an array.
.map()
The .map() function is a higher order function that will run a callback on every item in the array and will push each result into a new array.
var nums = [1, 2, 3, 4, 5];var numsTimesTwo = nums.map(num => num * 2);// numsTimesTwo = [2, 4, 6, 8, 10];
The above example uses an anonymous function as its callback. However, you can also do the same thing by creating and using a first class function.
var nums = [1, 2, 3, 4, 5];var multiplyByTwo = num => num * 2;var numsTimesTwo = nums.map(multiplyByTwo);// nums.map(multiplyByTwo)
// would be exactly the same as
// nums.map(num => num * 2)
.filter()
The .filter() function will run a callback function on every item in an array and will return either true or false for each item. If true, it will push the item to the new array.
var nums = [1, 2, 3, 4, 5];var oddNumbers = nums.filter(num => num % 2 !== 0 );// oddNumbers = [1, 3, 5];
And done with a first class function as the callback…
var nums = [1, 2, 3, 4, 5];var isOdd = num => num % 2 !== 0;var oddNumbers = nums.filter(isOdd);
Functional Programming Paradigm
You might be asking, why even create a first class function, why not just code an anonymous function as the callback, after all, it’s so simple?
Here is the reason… Because the purpose of functional programming, and coding in general actually, is to write reusable code. Don’t repeat yourself!
So, in the above example for .filter() we wrote a first class function isOdd. Now, we can use isOdd in any other function in the whole program. Let’s keep going with more higher order functions, but now we’ll use the isOdd function.
.every()
The .every() function will run a callback function on every item in the array checking for a returned true or false value. If every item in the array returns true, it will return true. If any item in the array returns false, it will stop its loop and immediately return false.
var nums = [1, 2, 3, 4, 5];if( nums.every(isOdd) ){
console.log('Yes, they are all odd!');
} else {
console.log('Nope, they are not all odd!');
}
.some()
The .some() function will run a callback function on every item in an array checking for a returned true or false value. If any item in the array returns true, it will return true. If all of the items in the array returns false it will return false. As soon as it gets one true value it will stop the loop and return true.
var nums = [1, 2, 3, 4, 5];if( nums.some(isOdd) ){
console.log('At least one of these numbers are odd!');
} else {
console.log('None of these numbers are odd!');
}
In a future articles we will dive even deeper into how Javascript frameworks and libraries use first class functions, higher order functions, and callback functions to create amazingly useful tools for developers. We will also dive into what is literally happening behind the scenes of these functions.
