Hello Artisans,  today we will learn how to reduce an Array in React. For this, we will have an array and will process it with reduce function in our application. First, we will take a look at how to write a simple algorithm to sum all the values of the array. And then, we will improve on it by using the reduce method available on the arrays in JS.

Let's see it in action:

1. Creating of array
2. Sum up the values using iteration
3. Sum up the values using reduce method

In our react app we will create an array of objects named students with some sample data where each object has three properties id, name and age. We will calculate the average age of all the students. 

const students = [
 	{ id: 1, name: 'Foe', age: 20}, 
 	{ id: 2, name: 'Bar', age: 25}, 
 	{ id: 3, name: 'Jon', age: 35}
];

Now we will first do it in the simplest way possible, by using the for loops that iterate over the array.

const getAverageAge = (students) => {
  let total = 0
  const length = students.length;
  for (let i = 0; i < length; i  ) {
    sum  = students[i].age
  }
  return total/ length
}

getAverageAge(students) // Result is 26.666...

In the body of the getAverageAge function, we created two local variables total and length by declaring the initial value of total as 0 and length value as the length of the array. Then we iterate over the array of students by using the for loop. Inside the loop, we’re grabbing each of the student’s age and adding it to the total. As last, we’re dividing the total by the length.

On the code level, there is absolutely nothing wrong with the above implementation. It does the job, but it’s not very readable and as it turns out there is clearly a built-in method on the array that can help us handle this operation.

Now let’s take advantage of the reduce function to simplify the above code snippet just a little bit.

const getAverageAge = (students) => {
  const length = students.length
  const total = students.reduce((total, student, index, array) => total   student.age, 0)
  return total / length
}

getAverageAge(students) // Result is 26.666...

Do you see what happened there? Let’s break it down.

Instead of making use of the for loop, we’re using the reduce method. It takes two arguments with the first one being a callback function and the second one the initial value. Very often the callback function tends to be simple and can be written as an arrow function to simplify things even further.

The callback function takes four arguments:

• Previous value of the resulting call to the function (on first iteration it’s set to the initial value, which is 0 in our case as total)
• Current value of the current element (given that students is an array of objects, we’re reaching for the age property of each object, which is student in here)
• Index position of the current element in the array (we are not using it)
• The array on which we called the reduce method itself (we are not using it either)

For a more detailed syntax explanation please check the MDN web docs.

That's it for today. I hope you've enjoyed this tutorial. Thanks for reading. 🙂