When you try to get a high-level view of things, you have to dig down into details. This is exactly what a Higher-order function is: a higher level of abstraction than your typical functions. A function that accepts and/or returns another function is called a higher-order function.

It’s higher-order because instead of strings, numbers, or booleans, it goes higher to operate on functions. To fully understand this concept, you first have to understand the concept of First-class functions.

First-class Functions

You may have heard it said that JavaScript treats functions as first-class citizens. What this means is that functions in JavaScript are treated as objects. They have the type Object, they can be assigned as the value of a variable, and they can be passed and returned just like any other reference variable.

let random = function(){
    return Math.random()
}

let giveMeRandom = random // assigning random to a variable

This has been extensively discussed in my previous post on Understanding data types in Javascript.

Higher-order functions

Higher-order functions are functions that take other functions as arguments or return functions as their results.

Taking an other function as an argument is often referred as a callback function, because it is called back by the higher-order function. This is a concept that Javascript uses a lot.

Map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

The callback function passed to the map() method accepts 3 arguments: element,index, and array.

Parameters

-callbackFn

Function that is called for every element of arr. Each time callbackFn executes, the returned value is added to newArray.

The callbackFn function accepts the following arguments:

-element The current element being processed in the array.

-index The index of the current element being processed in the array.

-array The array map was called upon.

-thisArg(Optional) Value to use as this when executing callbackFn.

Filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Like forEach, filter is a standard array method. Note how the filter function, rather than deleting elements from the existing array, builds up a new array with only the elements that pass the test. This function is pure. It does not modify the array it is given.

Reduce

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

The reducer function (callback) accepts four parameters: accumulator, currentValue, currentIndex, sourceArray.

If an initialValue is provided, then the accumulator will be equal to the initialValue and the currentValue will be equal to the first element in the array. If no initialValue is provided, then the accumulator will be equal to the first element in the array and the currentValue will be equal to the second element in the array.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Conclusion

Being able to pass function values to other functions is a deeply useful aspect of JavaScript. Higher-order functions are just like regular functions with an added ability of receiving and returning other functions are arguments and output. If you find this useful, like, share and comment :) !