DEV Community

Cover image for Higher-order function in java script
T Shiva Kumar
T Shiva Kumar

Posted on • Edited on

Higher-order function in java script

What is higher-order function?

A higher-order function is a function that does at least one of the following:

  • Takes one or more functions as arguments.

  • Returns a function as its result.

Why Use Higher-Order Functions?

Higher-order functions provide several benefits:

  • Reusability:They allow you to create more generic functions that can be reused with different behaviors.

  • Modularity:They help in breaking down complex problems into smaller, manageable functions.

  • Cleaner Code: Code written with higher-order functions is often more concise and easier to read.

Common Higher-Order Functions in JavaScript

1.map: This function creates a new array by applying a function to each element of the original array.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]
Enter fullscreen mode Exit fullscreen mode

In this example, map() is a higher-order function because it takes a function (num => num * 2) as an argument.

2.filter: This function creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

Enter fullscreen mode Exit fullscreen mode

Here, filter() uses the provided function to determine which elements should be included in the new array.

3.reduce: This function applies a function against an accumulator and each element in the array to reduce it to a single value.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Enter fullscreen mode Exit fullscreen mode

reduce() is a higher-order function that lets you accumulate a result based on the function you pass in.

Creating Higher-Order Functions

function higherOrderFunction(callback) {
  console.log("Executing the higher-order function...");
  callback();
}

function callbackFunction() {
  console.log("Executing the callback function...");
}

higherOrderFunction(callbackFunction);

Enter fullscreen mode Exit fullscreen mode

Example: Function Returning a Function

function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Enter fullscreen mode Exit fullscreen mode

Combining Higher-Order Functions

One of the powerful aspects of higher-order functions is that they can be combined to perform complex operations concisely.

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
  .filter(num => num % 2 === 0) // Get even numbers: [2, 4, 6]
  .map(num => num * 2)          // Double them: [4, 8, 12]
  .reduce((sum, num) => sum + num, 0); // Sum them up: 24

console.log(result); // 24

Enter fullscreen mode Exit fullscreen mode

Conclusion

Higher-order functions are a fundamental concept in JavaScript, enabling you to write more abstract, reusable, and powerful code. By understanding and using higher-order functions, you can take your JavaScript skills to the next level, making your code cleaner, more efficient, and more maintainable.

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Your definition is unfortunately not correct. A higher order function is one that accepts functions as parameters and/or returns a function.

Collapse
 
t_shivakumar_0dc86c6486c profile image
T Shiva Kumar

Thank you for pointing that out, I appreciate your feedback. I'll make sure to update the content accordingly. Thanks again for helping to improve the accuracy of the information.