What is higher order functions? Why should you we use them?

A higher order function is a function that either takes in or returns a function. Shortening the time, it would take while keeping the code down to one 1 or two lines. The code becomes more flexible, and reusable.

Higher Order Functions in JavaScript
https://blog.javascripttoday.com/blog/higher-order-functions-in-javascript/
Replit breakdown - https://replit.com/@DariusC16/Building-map-reduce-filter-forEach-2#index.js

Higher Order Function .map()

Map takes in 2 arguments, a collection and callback function. Collection will be tested to see if it's an array or object. Whichever the collection, will be iterated through, then invoke the callback function on each item, following with any condition placed for the callback function. Afterwards an array is returned with each iteration pushed inside.

var mapArr = [
  {
  name: 'Godzilla'
  },
  {
    name: 'Destroyah'
  }
]
 const mapExample = function(array) {
   // USING MAP FUNCTION
    var a = array.map(function(element) {
      // NOW LOOPING THROUGH ARRAY
       // IF OBJECT DOESN'T HAVE CREATURE SUMMARY
        if (!element["creatureSum"]) {
          // CREATE PROPERTY IN OBJECT
           element["creatureSum"] = 'Monster';
        }
      return element;
    })
   return a;
 }
console.log(mapExample(mapArr)); /* Output => [
  { name: 'Godzilla', creatureSum: 'Monster' },
  { name: 'Destroyah', creatureSum: 'Monster' }
] */

Higher Order Function .filter()

Filter takes in 2 arguments, an array, and callback function. Looping through the array, each item is passed into the callback function, producing a boolean value. Whatever the condition set, if the current element in the array passes true, it will be pushed into an array return value. Only those values that pass true will be returned in the array.

var filterArr = [
  {
  name: 'Godzilla'
  },
  {
    name: 'Destroyah'
  }
]
 const filterExample = function(array) {
   // USING FILTER FUNCTION
    var a = array.filter(function(element) {
      // NOW LOOPING THROUGH ARRAY
       // IF OBJECT NAME IS GODZILLA
        if (element.name === 'Godzilla') {
          // RETURN OBJECT
           return element;
        }
    })
   return a;
 }
console.log(filterExample(filterArr)); /* Output => [
  { name: 'Godzilla'}
] */

Higher Order Function .reduce()

Reduce takes 3 arguments, an array, callback function, and seed. Seed being optional, however can affect the code for specific problems. If no seed is defined, then a variable of result will be defined and automatically assign itself to the first element in the array. If a seed is assigned, it's the return value of the datatype desired to be returned. While iterating through the array, the result will be reassigned the invoked callback function. Taking 4 arguments, the result, the current array element, the index, and the array. The result will be the accumulation of all the elements in the array to pass the condition set.

var reduceArr = [
  {
  name: 'Godzilla'
  },
  {
    name: 'Destroyah'
  }
]
 const reduceExample = function(array) {
   // USING REDUCE FUNCTION
    var a = array.reduce(function(acc, curr) {
      // NOW LOOPING THROUGH ARRAY
       // IF OBJECT NAME IS TRUTHY
        if (curr.name) {
          // PUSH ELEMENT NAME INTO ACCUMULATOR
           acc.push(curr.name);
        }
      // RETURNING ACCUMULATOR
       return acc;
    }, [])
   return a;
 }
console.log(reduceExample(reduceArr)); /* Output => [ 'Godzilla', 'Destroyah' ] */

Conclusion
Using these higher order functions can make things easier in a more structured manner. Slightly complex than your standard loop variations, but get the job done much more efficiently.
The filter function should be used when targeting specific values that meet the requirements for what you set. The map function should be used when creating code that affects all elements in the array and returning them. The reduce function can be used to do the same as filter, and map, just more effectively.