Higher order function(HoF)

Javascript important topic

Definition:

A higher-order function is a function that takes one or more functions as arguments or returns a function as its result. Higher-order functions are a fundamental concept in functional programming, and they enable more expressive and concise code.

All important methods are :

  1. map(): The map() method creates a new array by calling a provided function on each element in the original array. It takes a function as an argument and returns a new array with the same number of elements as the original array. Here is an example:
javascriptCopy codeconst numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
  1. filter(): The filter() method creates a new array with all elements that pass the test implemented by the provided function. It takes a function as an argument and returns a new array with the elements that pass the test. Here is an example:
javascriptCopy codeconst numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
  1. reduce(): The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. It takes a function and an initial value as arguments and returns a single value. Here is an example:
javascriptCopy codeconst numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Output: 15
  1. forEach(): The forEach() method calls a provided function once for each element in an array. It takes a function as an argument and does not return a value. Here is an example:
javascriptCopy codeconst numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num * 2)); // Output: 2, 4, 6, 8, 10
  1. sort(): The sort() method sorts the elements of an array in place and returns the sorted array. It takes a comparison function as an optional argument. Here is an example:
javascriptCopy codeconst numbers = [3, 1, 5, 2, 4];
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // Output: [1, 2, 3, 4, 5]

These are some of the most commonly used higher-order functions in JavaScript. There are many more such functions available in the language, and you can also create your own higher-order functions as needed.

Basic Example:

Here's a basic example of a higher-order function:

javascriptCopy codefunction applyOperation(num, operation) {
  return operation(num);
}

function double(num) {
  return num * 2;
}

function triple(num) {
  return num * 3;
}

console.log(applyOperation(2, double)); // Output: 4
console.log(applyOperation(3, triple)); // Output: 9

In this example, the applyOperation function takes two arguments: num, which is a number, and operation, which is a function. The applyOperation function calls the operation function with the num argument and returns the result.

The double and triple functions are functions that take a number and return its double and triple, respectively.

The applyOperation function is a higher-order function because it takes the double and triple functions as arguments.

Advanced Examples:

Here are some advanced examples of higher-order functions:

javascriptCopy codefunction multiplyBy(factor) {
  return function (num) {
    return num * factor;
  };
}

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

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

In this example, the multiplyBy function is a higher-order function that returns a function. The returned function takes a number and multiplies it by the factor argument passed to the multiplyBy function.

The double and triple constants are functions that are created by calling the multiplyBy function with the arguments 2 and 3, respectively. These functions can then be called with a number argument to return its double or triple, respectively.

javascriptCopy codefunction compose(func1, func2) {
  return function (arg) {
    return func1(func2(arg));
  };
}

function double(num) {
  return num * 2;
}

function add5(num) {
  return num + 5;
}

const add5ThenDouble = compose(double, add5);

console.log(add5ThenDouble(3)); // Output: 16

In this example, the compose function is a higher-order function that takes two functions as arguments and returns a function. The returned function calls the second function with the argument, and then calls the first function with the result of the second function.

The double and add5 functions are functions that double a number and add 5 to a number, respectively.

The add5ThenDouble constant is a function that is created by calling the compose function with the double and add5 functions as arguments. This function takes a number, adds 5 to it, and then doubles the result.

Conclusion:

Higher-order functions are a powerful tool in JavaScript that allow for more expressive and concise code. They enable functions to be treated as first-class citizens and can make code more modular and reusable.

Did you find this article valuable?

Support shiv singh baghel by becoming a sponsor. Any amount is appreciated!