So you have an array in the state of your application and need to process it somehow? Let’s take a look at how to write a simple algorithm to sum all the values of the array. Later we will improve on it by using the reduce JS method available on the arrays.

Algorithm

Given an array of objects, where each object has two properties, name and age, calculate the average age of all the users. We will first do it in the simplest way possible, by utilising the for loops that iterate over the array.

  const users = [{ name: 'Tom', age: 21}, { name: 'Mike', age: 23}, { name: 'Anna', age: 54}]

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

getAverageAge(users) // Result is 32.66....

In the body of the getAverageAge function, we’re creating a new local variable sum. We’re then iterating over the array of users by using the for loop, inside the loop code block we’re grabbing each of the user’s age and adding it to the total sum. As the last step, we’re dividing the sum variable by the total length of the input array.

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 it method on the array that can help us handle this operation.

Reduce

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

  const users = [{ name: 'Tom', age: 21}, { name: 'Mike', age: 23}, { name: 'Anna', age: 54}]

  const getAverageAge = (users) => {
    const sum = users.reduce((prev, curr, index, array) => prev + curr.age, 0)
    return sum / users.length
  }

getAverageAge(users) // Result is 32.66....

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)
• current value of the current element (given that users is an array of objects, we’re reaching for the age property of each object)
• index postion of the current element in the array (we are not using it)
• the array on which we called the reduce mathod itself (we are not using it either)

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

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.