JS Higher Order Functions
function higherOrder(callback) {
return callback(value);
}
array.map(fn);
array.filter(fn);
array.reduce(fn, initial);What Is a Higher Order Function
A higher-order function either accepts another function as an argument, returns a function, or both — treating functions as ordinary values you can pass around like any other data.
Example: What Is a Higher Order Function
function repeat(n, action) {
for (let i = 0; i < n; i++) action(i);
}
repeat(3, console.log); // passing a function as an argumentmap
Array.prototype.map() takes a callback and returns a new array where each element is the result of applying that callback to the corresponding original element, leaving the original array unchanged.
Example: map
const nums = [1, 2, 3];
console.log(nums.map(n => n * 2));filter
Array.prototype.filter() takes a callback that returns true or false for each element and returns a new array containing only the elements where the callback returned true.
Example: filter
const nums = [1, 2, 3, 4];
console.log(nums.filter(n => n % 2 === 0));reduce
Array.prototype.reduce() takes a callback and an initial value, then repeatedly combines each element into a single accumulated result — useful for sums, groupings, or building any single output from a list.
Example: reduce
const nums = [1, 2, 3, 4];
console.log(nums.reduce((sum, n) => sum + n, 0));Combining Higher Order Methods
Because map, filter, and reduce all return new arrays or values, you can chain them together in a single readable pipeline instead of writing separate loops for each transformation step.
Example: Combining Higher Order Methods
// Declare the constant `nums`, set to `[1, 2, 3, 4, 5, 6]`
// Declare the constant `nums`, set to `[1, 2, 3, 4, 5, 6]`
const nums = [1, 2, 3, 4, 5, 6];
// Declare the constant `result`, set to `nums.filter(n => n % 2 === 0).map(n => n * 10).reduce((sum, n) => sum + n, 0)`
// Declare the constant `result`, set to `nums.filter(n => n % 2 === 0).map(n => n * 10).reduce((sum, n) => sum + n, 0)`
const result = nums.filter(n => n % 2 === 0).map(n => n * 10).reduce((sum, n) => sum + n, 0);
// Print `result` to the console
// Print `result` to the console
console.log(result);- Forgetting to
returna value insidemap(), so the new array is full ofundefined. - Using
map()only for side effects, whenforEach()is meant for that. - Expecting
reduce()on an empty array to work without an initial value, which throwsTypeError.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: