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]
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]
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
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);
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
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
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)
Your definition is unfortunately not correct. A higher order function is one that accepts functions as parameters and/or returns a function.
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.