Learn Higher Order Functions in JavaScript

Introduction

In JavaScript, one of the best features is its ability to treat functions as first-class entities. So, we can assign functions to variables, pass them as arguments in functions, and also return them from functions. In simple language, a higher-order function is a function that can take a function as an argument, return a function, or do both things, taking a function as an argument and returning a function.

Higher-order functions are a very widely and commonly used concept in JavaScript. Because it allows for the reusability and abstraction of code. In this article, we learn What is a Higher Order Function and also all three use case passing functions as arguments, returning functions, and both with examples.

What is a higher-order function?

A higher-order function is one that does at least one of the following things.

1. Functions as an argument
2. Returns a function
3. Do both functions as arguments and return a function.

A normal function works with simple data types like numbers, strings, Booleans, etc., but a higher-order function works with functions. This makes them extremely powerful for abstracting operations and reducing repetitive code. Now explore all 3 things above one by one.

1. Functions as an argument

The most common use of higher-order functions is passing functions as arguments. JavaScript provides higher-order functions like map(), filter(), and reduce() that take other functions as arguments, but you can also define your own higher-order functions to accept functions as arguments.

Example 1. Built-in higher-order functions.

Example1.js

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(function(number) {
    return number * 2;
});
console.log(doubleNumbers);

In this example, the map() function takes a function as its argument and applies it to each element of the array. The passed function doubles each number.

Output

Example 2. User-defined higher-order functions

Now define a higher-order function operateOnNumbers() that takes an array of numbers and a function as arguments. This function will apply the passed function to each number in the array.

Example2.js

function operateOnNumbers(numbers, operation) {
    const results = [];
    for (let number of numbers) {
        results.push(operation(number));
    }
    return results;
}
function square(number) {
    return number * number;
}
function cube(number) {
    return number * number * number;
}
const numbers = [1, 2, 3, 4];
const squaredNumbers = operateOnNumbers(numbers, square);
console.log("Square : " + squaredNumbers);
const cubedNumbers = operateOnNumbers(numbers, cube);
console.log("Cube : " +cubedNumbers);

In this example, operation numbers () is a higher-order function that takes an array and a function (operation) as arguments. It iterates through each number in the array and applies the provided operation function to it.

You can pass different functions, such as square and cube, to achieve different results.

Output

2. Returns a function

A higher-order function can also return a function.

Example 3. A higher-order function that returns a function.

Example3.js

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5));
console.log(triple(5));

In this example, createMultiplier() returns a function that multiplies a number by the given factor. The returned function can be reused with different inputs.

Output

3. Do both functions as arguments and return a function

This case combines both use cases, where a higher-order function takes a function as an argument and returns a value as a function.

Example 4. A higher-order function that takes a function as an argument and returns a function.

Example4.js

function multiplyBy(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}
const double = multiplyBy(2);  
const triple = multiplyBy(3); 
console.log(double(5)); 
console.log(triple(5)); 

In this example, multiplyBy() is a higher-order function that takes a function as an argument (in this case, a multiplier). It returns a new function that multiplies any number passed to it by the given multiplier.

The new functions double and triple are created by calling multiplyBy() with the desired multiplier (2 or 3, in this case), allowing the same logic to be reused with different parameters.

Output

Summary

Higher-order functions (HOFs) are functions that either take other functions as arguments, return functions, or both.HOFs simplify code, promote reusability, and enable functional programming patterns in JavaScript.

If you find this article valuable, please consider liking it and sharing your thoughts in the comments.

Thank you, and happy coding.