Higher Order Functions Explained - Esoteric JS Part 1

August 10, 2021

TL; DR: HOFs (Higher Order Functions) allow you in JavaScript to take in a function as a parameter or return a function. The function as a parameter is also referred as “callback” function.

Hey guys. In the next couple of blog post I would like to share some parts of JavaScript where some people don’t get their head around.

That’s okay, because some parts of the language, which we have a love-hate relationship with, are quite confusing.

Introduction

But let’s start with an easy example to understand why we need HOF.

Story: You are a developer at a fancy Math company that is going to develop a fancy feature. This feature can
copy arrays and manipulate them. Very innovative, I know. To begin with you’ve implemented a function that can copy an array and multiply it by 4.

function copyArrayAndMultiplyBy4(array)
{
    const resultArray = [];
    for (let i = 0; i < array.length; i++)
        {
            resultArray.push(array[i] * 4);
        } 
    return resultArray;
}

const exampleArray = [6,7,8];
const resultOfFunction = copyArrayAndMultiplyBy4(exampleArray);

Fine. Now your boss came in and told you that the feature needs a function which can copy an array and divide it by 4! 🙄 Well okay, it’s an easy task to do.

You just copy paste the function above and replace the * with an /.

But that’s not enough:

Your boss is now telling you to implement a function which can copy an array and add 3 to each of the elements.

At this point at the latest, you should ask yourself: Is there a way to end this copy-paste hell? And yes, there is.

Solution

How about leaving a little bit of the code out to “fill it in” later on? Is there a way to do that? And yeah there is! And you’ve probably got it right, it’s called parameters, the things in the paranthesis.

You can even insert functions as parameters in JavaScript.

function copyArrayAndManipulate(array, instructions)
{ 
    const resultArray = []; 
    for (let i = 0; i < array.length; i++)
        {
            resultArray.push(instructions(array[i]));
        }
    return resultArray;
} 

function multiplyBy2(input) { return input * 2; }
const resultOfHOFFunction = copyArrayAndManipulate([6, 7, 8], multiplyBy2)

But how is that possible?

Underneath the hood of JavaScript

Functions are first class objects in JavaScript.

This means that they can co-exist with and can be treated like any other JavaScript object.

They can be…

Assigned to variables and properties of other objects
Passed as arguments into functions
Returned as values from functions

Test Yourself

function copyArrayAndManipulate(array, instructions)
{
 const resultArray = [];
  for (let i = 0; i < array.length; i++)
  { 
    resultArray.push(instructions(array[i]));
  } return resultArray;
} 
  
function multiplyBy2(input) {return input * 2;}
const resultOfHOFFunction = copyArrayAndManipulate([6, 7, 8], multiplyBy2);

Going back to the example: What is our HOF? → The outer function that takes in a function is our higher-order function

What is our Callback Function? → The function we insert is our callback function

Conclusion

HOF and Callbacks allow us to write more readable and simplified Code. It also allows you to follow the DRY Principle (Don’t Repeat Yourself) Another thing is, that Callbacks are an integral part to understand Asynchronous JavaScript, which I maybe will cover in another blog post.