Higher-Order Functions — JavaScript

Higher-order functions are an important and powerful concept in programming which allows you to write more flexible and modular code. In JavaScript, they are functions which uses other callback functions either by taking them as arguments or by returning them as output.

In JavaScript we have a few higher-order array functions, they include:

• The Map function : this is an higher-order function which takes an array and a function as arguments and returns a new modified array which is the result of applying the function to each element of the previous array.

let array1 = [3, 5, 17, 30];

//create function
function multiply(p1) {
  return p1 * 2;
}
//pass function as an argument
const map1 = array1.map(multiply);

console.log(map1);
// expected output: Array [6,10,34,60]

• The Filter function : this is an higher-order function which takes an array and a function as arguments but in this case only returns a new array of elements which pass a given condition in the function.

let array1 = [3, 5, 17, 30];

//filters out only numbers greater than 6
const result = array1.filter(x => x > 6);

console.log(result);
// expected output: Array [17,30]

• The Reduce function : this is an higher-order function that takes an array and a function as arguments, but it returns only a single value that is the result of applying the function to each element of the array in a specific order. This could be confusing so let’s use a common and easy example straight from MDN
  

  MDN Web Docs

  The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

  developer.mozilla.org

  to explain
  

const array1 = [1, 2, 3, 4];

const initialValue = 0;

// 0 + 1 + 2 + 3 + 4
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
//Expected  output: 10

The reducer walks through the array element-by-element, at each step adding the current array value to the result from the previous step (this result is the running sum of all the previous steps) — until there are no more elements to add. Read more here..

• The Sort function : this is a higher-order function that takes an array and a function as arguments and returns the reference to the same array, now sorted according to the results of applying the function to each element. This could however be used by default (where it considers all elements as strings and sorts them in ascending order) without a function argument, for example..

const names = ['Michael','Amy', 'John', 'Faith', 'Dan'];

//the sort function in default
names.sort();
console.log(names);
// expected output: Array ["Amy", "Dan", "Faith", "John", "Michael"]

However, when we need to sort out other things apart from strings, like numbers for instance, then we will need to add a function to handle that. Here’s an example for sorting numbers

const array1 = [1, 30, 4, 21, 10000];

//function that sorts by going through and return the lowest of two numbers
function numSort (a,b) {
  return (a - b);
}

//calling the sort function with the numSort callback function
array1.sort(numSort);
console.log(array1);
//Expected result : [1,4,21,30,100000]

• The For Each function : this is a higher-order function that takes an array and a function as arguments, and applies the function to each element of the array. It does not return a new array, but just performs an action on each element of the same array.

const foods = ['pizza', 'spaghetti', 'food from Chowopa.com', 'burgers'];

//applies this function on each element in the foods array
foods.forEach((food) => {
  let statement = `I am hungry, maybe I'll get ${food}`;
  console.log(statement);
});

Higher-order functions provides an easier way for you to write more concise and expressive code and could also get rid of the need to write complex loops or conditional statements.

I hope you found this useful. Ciao.