# React Reduce An Array with Example

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:

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. 🙂

## Comments

No comments yet…