The Quest for Higher Order Functions

The Quest for Higher Order Functions

Learn the working of Higher Order Functions in JavaScript

ยท

3 min read

Introduction

This is the new blog in my JavaScript Voyage series. In this blog, we will learn about the concept behind Higher Order Functions.

A Higher Order Function (HOF) is a function that takes a function as an argument or returns a function. Let's take an example,

const nums = [1,2,3,4,5,6,7,8,9,10];

function evenCondition(num){
    return num%2 == 0;
}

const even = nums.filter(evenCondition);
console.log(even);    // [2, 4, 6, 8, 10]

In the above code, we are passing a function to the filter method which is a built-in Higher Order Function.

Difference between Higher Order Functions and Callback Functions

Higher Order Functions and Callback functions are entirely different.

In the above code,

  • filter method is acting as a Higher Order Function

  • evenNumber function is acting as a callback function

A Callback function is a function that can be passed to another function as an argument.

Need of Higher Order Function

In short, HOFs are needed to keep your code clean and bug-free. As the number of lines of your code increases, the chances of bugs also increase.

Let's take an example, we want to create a function to copy an array and divide its elements by 2.

function copyArrayAndDivideBy2(array){
    const output = [];

    for(let num of array){
        output.push(num/2);
    }

    return output;
}

const myArray = [1,2,3];
const result = copyArrayAndDivideBy2(myArray);
console.log(result);   // [ 0.5, 1, 1.5 ]

But wait! What if we want to divide the array elements by 3 or 4? Now, we need to rebuild the whole function from scratch even for a minor change. So, we are breaking the principle of DRY(Do Not Repeat Yourself!).

Let's see how can we use Higher Order Functions to make our life easier. We can wrap up the functionality and tell our function at the runtime.

function copyArrayAndManipulate(array, instruction){
    const output = [];

    for(let num of array){
        const modifiedElement = instruction(num);
        output.push(modifiedElement);
    }

    return output;
}

// instruction 1
function multiplyBy2(input){ 
    return input * 2; 
}

// instruction 2
function divideBy2(input){ 
    return input/2;
}

const myArray = [1,2,3];
console.log(copyArrayAndManipulate(myArray, multiplyBy2));  // [ 2, 4, 6 ]
console.log(copyArrayAndManipulate(myArray, divideBy2));    // [ 0.5, 1, 1.5 ]

This is how we can use HOFs to perform different operations using different instructions.

A note about functions in JavaScript

Functions in JavaScript are First-Class Objects. They can co-exist or be treated like any other JavaScript object. This means,

  • We can assign them to variables and as properties of other objects.

  • We can pass them as arguments into functions.

  • We can return them as values from functions.

Conclusion

In this blog, we discussed Higher Order Functions and how to use them. We also talked about the differences between HOFs and Callback functions and a keynote about functions in general.

If you're having any doubts please mention them in the comments below! ๐Ÿ˜Ž

References

ย