Feb 21st 2021 | 1 Minute

JavaScript Higher Order Functions Overview

JavaScript

JavaScript Higher Order Functions Overview
  • Functions that return other functions or take other functions as arguments.
    • Taking another function as an argument is referred to as a callback function as it is being called back by the higher-order function

For example, the map function

[1, 2, 3, 4].map((num) => num * num); // [1, 4, 9, 16]

Other Examples include forEach, reduce, filter and sort.

If we didn't have the map higher-order function and had to use normal functions it would look like:

const base = [1, 2, 3, 4];
const result = [];

for (let i = 0; i < base.length; i++) {
  result[i] = base[i] * base[i];
}

console.log(result); // [1, 4, 9, 16]

By using the map higher-order funciton we have to write less code which not only reduces the risks of introducing errors but also makes the code more readable.

Building the puzzle pieces

One of the biggest benefits of using higher-order functions is the ability to mix and match them together. For example, if we wanted to answer the following questions about the below dataset we can write one function that handles one piece of logic and reuse it.

Questions

  1. Average of everyone's age
  2. Average age of each sex.
  3. Oldest of each sex
const people = [
  { name: "Coner", age: 21, sex: "M" },
  { name: "Sandra", age: 40, sex: "F" },
  { name: "Jon", age: 60, sex: "M" },
  { name: "Emily", age: 16, sex: "F" },
  { name: "Fred", age: 55, sex: "M" },
  { name: "Liz", age: 26, sex: "F" },
  { name: "Bill", age: 10, sex: "M" },
  { name: "Susan", age: 30, sex: "F" },
];

Doing this without higer-order functions would be a pain. But, using higher order functions we can write a couple of functions and re-use them.

// Function to filter on given sex
const sexFilter = (person, sex) => person.sex === sex;

// Get All Males
const allMales = people.filter((person) => sexFilter(person, "M"));

// Get All Females
const allFemales = people.filter((person) => sexFilter(person, "F"));

// Average Function to get average age
const average = (person) =>
  person.reduce((acc, cur) => acc + cur.age, 0) / person.length;

// Return oldest person
const oldest = (person) => person.sort((a, b) => b.age - a.age)[0];

With these 5 functions we can now answer all of the above questions:

// 1. Average of everyone's age
average(people); // 32.25

// 2. Average age of each sex.
average(allMales); // 36.5
average(allFemales); // 28

// 3. Oldest of each sex
oldest(allMales); // {name: "Jon", age: 60, sex: "M"}
oldest(allFemales); // {name: "Sandra", age: 40, sex: "F"}

This is beauty of higher-order functions we can write one function and re-use it over and over again regardless of the data we feed into it or how we want to mix them together.

Email Newsletter

Want to get weekly notifications of my posts and more exclusive content?

Please consider signing up to my email newsletter.