Coner Murphy

Published on 21 Feb 2021 | 3 Minute Read

JavaScript Fundamentals: Higher Order Functions

When looking into functons within JavaScript, a term that is likely to come up is Higher Order Functions, here's all you need to know about them.

JavaScript Fundamentals: Higher Order Functions
  • 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[1, 2, 3, 4].map((num) => num * num); // [1, 4, 9, 16]
jsx

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:

1const base = [1, 2, 3, 4];
2const result = [];
3
4for (let i = 0; i < base.length; i++) {
5 result[i] = base[i] * base[i];
6}
7
8console.log(result); // [1, 4, 9, 16]
jsx

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
1const people = [
2 { name: "Coner", age: 21, sex: "M" },
3 { name: "Sandra", age: 40, sex: "F" },
4 { name: "Jon", age: 60, sex: "M" },
5 { name: "Emily", age: 16, sex: "F" },
6 { name: "Fred", age: 55, sex: "M" },
7 { name: "Liz", age: 26, sex: "F" },
8 { name: "Bill", age: 10, sex: "M" },
9 { name: "Susan", age: 30, sex: "F" },
10];
jsx

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.

1// Function to filter on given sex
2const sexFilter = (person, sex) => person.sex === sex;
3
4// Get All Males
5const allMales = people.filter((person) => sexFilter(person, "M"));
6
7// Get All Females
8const allFemales = people.filter((person) => sexFilter(person, "F"));
9
10// Average Function to get average age
11const average = (person) =>
12 person.reduce((acc, cur) => acc + cur.age, 0) / person.length;
13
14// Return oldest person
15const oldest = (person) => person.sort((a, b) => b.age - a.age)[0];
jsx

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

1// 1. Average of everyone's age
2average(people); // 32.25
3
4// 2. Average age of each sex.
5average(allMales); // 36.5
6average(allFemales); // 28
7
8// 3. Oldest of each sex
9oldest(allMales); // {name: "Jon", age: 60, sex: "M"}
10oldest(allFemales); // {name: "Sandra", age: 40, sex: "F"}
jsx

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.



šŸ‘„

Latest Content...

What Iā€™m up to and more.

  • How to make a flicker-free dark theme toggle with Next.js, TailwindCSS, and `next-themes`

    7 Jun 2022

    How to make a flicker-free dark theme toggle with Next.js, TailwindCSS, and `next-themes`

    Here's how to build a dark/light theme toggle in Next.js using TailwindCSS and the next-themes npm package to make it load and transition flicker-free.

  • 3 Reasons Why You Need to Design Components and Not Pages

    26 Jun 2021

    3 Reasons Why You Need to Design Components and Not Pages

    If you want to design better websites then you need to stop designing at a page level and start thinkning about components. Here's 3 reasons why.

  • 6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    26 Jun 2021

    6 Twitter Analytics Terms You Need to Know to Grow an Audience in 2021

    Building a Twitter audience is a great way to grow your business. So, here are 6 Twitter analytics terms you need to know and how to measure them.

Want to read more?

View all posts here