Higher-Order Functions Beginners Should Be Familiar With.

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them.

There are a lot more higher order functions than what will be covered in this article, but these are good ones to get you up and running as a beginner. These standard array methods are forEach() , filter() , map() and sort() .

1. forEach( ): This is used when you want to operate on or interact with any element inside of an array. Basically works like the for loop.

N.B- I’d be using examples to illustrate each method so you can get a clearer picture, and also just printing to the console to keep the examples as simple and basic as possible.

Example: Lets say in an array of a group or friends, and we want to loop through that array and print to the console each element of that array.
Using a for loop ;

const friends = ['Toyin', 'Olumide', 'Fola', 'Tola'];
for ( let i=0; i < friends.length ; i++) {
  cosole.log (friends[i])
};

The action same as above can be achieved using theforEach() method as seen below;

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];
friends.forEach(function(name) {
  console.log(name)
};

What the forEach() method simply does is to take in a function as an argument and loop through each item in the array without using iteration[i].

This is really awesome when the ES6 arrow functions are used, our code is reduced to a single line that is clean and maintainable. As seen below:

const friends =  ['Toyin', 'Olumide', 'Fola', 'Tola'];
friends.forEach(name => console.log (name));

2. filter( ) : Just like the name implies, it is used to filter out elements of an array that do not meet the conditions set in the callback function passed as an argument. The callback function passed to the filter() method accepts 3 parameters: element, index, and array , but most times only the element parameter is used.

Example : In an array showing a group of friends and their ages, lets say we want to print to the console the friends that can drink assuming the age limit for drinking is 18. Using a for loop without high order functions;

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
for ( let i=0 ; i<friends.length ; i++) {
   if (friends[i].age > 18) {
    console.log(`${friends[i].name} can drink`);
 }
};

Now using the filter() method :

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
friends.filter (function (friend) {
  if (friend.age > 18){
   return true;
 } 
});

Copy and run the code snippet above on the js console and see that an array containing only friends that can drink is printed. You can now see how filter() works with this example. And again using ES6 arrow functions, this can be re-written as :

friends.filter( friend => friend.age > 18);

3. map( ) : The map() method creates a new array by calling the callback function provided as an argument on every element in the input array. The map() method will take every returned value from the callback function and create a new array using those values.

The callback function passed to the map() method accepts 3 arguments: element, index, and array.

Example: Still using the friends array , lets say we want to double the ages of all friends in the array. We can use the for loop too like I showed previously, but I’m just going to dive right into using the map() method using both ES5 and ES6 functions.
N.B -map() method creates a new array unlike filter() that doesn't.

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
// using ES5 functions
  const doublesAge = friends.map(function(friend) {
    return friend.age* 2
  });
  console.log (doublesAge);
// using ES6 functions
  const doublesAges = friends.map( friend => friend.age * 2);
  console.log(doublesAges);

4. sort ( ) : This method is used to arrange an array in either an ascending or descending order. The callback function passed to the sort() method accepts 2 parameters , which are the elements in the array that is to be compared to each other.

Example : From our friends array, let say we want to arrange it from the youngest to the oldest friend using the sort() method.

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
//using ES5 functions
const order1 = friends.sort(function (friend1, friend2){
  if (friend1.age > friend2.age){
   return 1
   } else return -1
});
console.log (order1);
//using ES6 functions
const order2 = friends.sort((friend1, friend2) => friend1.age - friend2.age);
console.log (order2);

To sort it from the oldest to the youngest, the if condition in the ES6 function will be reversed like friend2.age — friend1.age

Now I’m sure it is clear how useful this higher order functions can be, even in this very small operation, there is clear evidence how important they are, now imagine how much more relevant they will be in bigger applications.

Last but definitely not the least, It is important to know that these methods can be used together and this is what makes it really crucial.

I’m going to combine all the examples shown above to create an array of friends
a. that can drink,
b. arrange them from the eldest to the youngest,
c. and print each of them. All at the same time.
This is the beauty of higher order functions!. See the code snippet below;

const friends = [
  {name : 'Toyin', age: 24},
  {name : 'Olumide', age: 14},
  {name : 'Fola', age: 12},
  {name : 'David', age: 42}
];
const finalExample = friends
 .filter (friend => friend.age > 18)
 .sort((friend1, friend2) => friend2.age - friend1.age)
 .forEach (friend => 
 console.log (`${friend.name} is ${friend.age} years old and allowed to drink`));
//this will print
// David is 42 years old and allowed to drink
// Toyin is 24 years old and allowed to drink

Remember to run these codes in your console and see how they implement. I strongly advise you to create your own arrays, set different conditions, tweak things a little bit and apply all these methods.
I really hope this article was helpful.

Practice makes perfect!
Happy Coding!