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.