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.