Why We Need Higher-Order Functions

What is a Higher Order Function?

Higher Order Functions are functions that are able to take in a function as an argument, or return a function. These characteristics allow developers to produce the desired result in a much more readable way. This article will give some examples of well known higher-order functions and the benefits they provide.

Functions as Arguments & Return Values

The ability to pass a function as an argument, or return a function call is a huge benefit to developers. This is a key way to make code more neat and readable. As Joan Ayebola put it in her article 'What are Higher Order Functions in JavaScript? Explained With Examples' It also allows for 'dynamic behavior' within our code.

// Function as an argument

When the higher order function is called:

1. The function performs its code (in this case it's logging to the console)
2. The callback function is invoked and performs its tasks
3. Expect 'DO SOMETHING' and 'I was passed as an argument' to log to the console

// Function as a return value

When greet_message is called:

1. The function calls the greet function with 'Evan' passed in
2. greet() returns a function that logs a greeting to the console
3. Expect 'Hi!! Evan, Welcome To Operation Spark!' to log to the console

Useful Higher-Order Functions

• .filter() Method
• .map() Method
• .forEach() Method
• .reduce() Method

Each of these is an array method that takes a function as an argument.

.filter()

Iterates over an array and returns a new array of all the elements that returned a truthy value when passed through the function argument. Does not mutate the elements. The .filter() method takes in a parameter representing the current element being passed over.

.map()

Iterates over an array and returns a new array of the result of invoking the function argument onto each element in the array. The .map() method takes in a parameter representing the current element being passed over.

.reduce() Method

.reduce() can be used in many different ways. It iterates over an array and returns a single value. The function argument of .reduce() takes in 2 parameters:

1. accumulator: The value to be returned at the end of the function call
2. current: The current index being passed into the function

.reduce() also has an optional third parameter seed. Seed defines the value in which accumulator will start at. If no seed is given, the accumulator value begins at the first element of the array, and the function begins iterating at the second element.

Other possible uses for .reduce()

• Set the seed as an empty array and push desired elements onto it
• Assign key-value pairs to an object
• Concatenate to a string

.forEach()

Iterates over an array and mutates each element. A key charatceristic to note about the .forEach() method is that it has no return value. Therefore, unlike the other 3 methods, you cannot initialize a variable to the value of invoking .forEach(), because the return value is undefined. Just like .map() and .filter(), .forEach() takes a parameter representing the current element being passed over.

Conclusion

While higher-order functions may be a little confusing at first, they really make developers lives a lot simpler. Without the ability to return functions, or pass in functions as arguments; our code would become a lot less readable very quickly.

TIP

It may be a good idea to look at the native code for all of these methods. The more you understand about how these functions work, the easier they will be.

Source: https://www.freecodecamp.org/news/higher-order-functions-explained/#:~:text=JavaScript%20offers%20a%20powerful%20feature,even%20return%20functions%20as%20results.