Higher Order Functions You Should Know Before Learning React

React is one of the most famous frontend framework in the world and that has been the case for many years now. One of the things that makes React more appealing to new developers is that it is quite easier to use.
But, many developers that dive straight into React before achieving a good understanding of JavaScript face issues with it and end up getting confused.
This article will introduce you to some of the higher order functions that are used in React very often.

But wait... What qualifies a function to be called a Higher Order Function?

The function that performs any action on another function(s) by taking them as arguments or returns a function as response, is called a Higher Order Function.

It is not necessary for the function to do both the above mentioned things. As long as it does either of those, it is considered a Higher Order Function.

.forEach()

.forEach() can be considered a replacement for the for loop. It performs a set of operation over a collection of data (such as array, object etc.) by going over all the items one by one, just the way a for loop does.
One advantage that it has over for loop is that it adds another layer of abstraction in the code.
Following examples will clear it even further:

// Use of For loop
const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];

for (i=0; i < ages.length; i++) {
  if(ages[i] >= 18) {
    console.log("You are an adult");
  } else {
    console.log("You are not an adult");
  }
}

// Use of .forEach()
const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];

ages.forEach(age => age >= 18 ? console.log("You are an adult") : console.log("You are not an adult"));

.map()

.map() is a very useful function in the sense that it allows us to create a new array from anything, be it an array or object. Let's look at an example for this.

// Use of For loop

const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];

let twiceAge = [];
for (i = 0; i < ages.length; i++) {
  twiceAge.push(ages[i]);
}

// Use of .map()

const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];

let twiceAge = ages.map(age => age * 2);

.filter()

.filter() allows us to filter data based on a condition that we provide. We can understand the contrast between the loop approach and the approach using the .filter() function, as well as the functionality of .filter() much better using the following examples:

// Use of For loop
const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];

let approvedForVoting = [];
for (i = 0; i < ages.length; i++) {
  if (ages[i] >= 18) {
    approvedForVoting.push(ages[i]);
  }
}

// Use of .filter()
const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];

let approvedForVoting = ages.filter(age => age >= 18)

.sort()

.sort() as the name suggests, allow us to sort and rearrange the data based on a condition that we provide.

// Use of For loop

const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];
initialAge = 0;
for (i = 0; i <= ages.length ; i++) {
  for (j = i; j <= ages.length; j++) {
    if(ages[j] < ages[i]) {
      initialAge = ages[j];
      ages[j] = ages[i];
      ages[i] = initialAge;
    }
  }
}

// Use of .sort()
const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];
ages.sort((a, b) => a - b);

.reduce()

.reduce() basically starts you off with a set of data and a variable with an initial value. It then allows you to go through all the values in the set of data and then add it to the variable. It then returns the final value as the result.

// Use of For loop

const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];
let total = 0;
for (i = 0; i < ages.length; i++) {
  total += ages[i];
}

// Use of .reduce()

const ages = [15, 18, 14, 9, 22, 86, 74, 45, 3, 76, 32, 36];
let totalOfAges = ages.reduce((total, age) => {return total += age}, 0);

Conclusion

Although this is not an exhaustive list of all the higher order functions in JS, these are the ones that I have seen and used most by far. Learning these before diving into React, will likely make your learning experience better.

Please leave your comments if you liked this article. Your suggestions are always welcome as well. I hope you will benefit from reading this article. I will see you all soon with my next post. Until then, keep learning.