{"id":5653,"date":"2022-05-22T17:16:00","date_gmt":"2022-05-22T22:16:00","guid":{"rendered":"https:\/\/upmostly.com\/?p=5653"},"modified":"2022-03-21T17:16:47","modified_gmt":"2022-03-21T22:16:47","slug":"how-to-reduce-an-array-in-react","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/how-to-reduce-an-array-in-react","title":{"rendered":"How To Reduce An Array in React?"},"content":{"rendered":"\n

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<\/strong> JS method available on the arrays.<\/p>\n\n\n\n

Algorithm<\/h2>\n\n\n\n

Given an array of objects, where each object has two properties, name<\/strong> and age<\/strong>, 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.<\/p>\n\n\n\n

  const users = [{ name: 'Tom', age: 21}, { name: 'Mike', age: 23}, { name: 'Anna', age: 54}]\n\n  const getAverageAge = (users) => {\n    let sum = 0\n    for (let i = 0; i < users.length; i++) {\n      sum += users[i].age\n    }\n    return sum \/ users.length\n  }\n\ngetAverageAge(users) \/\/ Result is 32.66....<\/code><\/pre>\n\n\n\n
In the body of the getAverageAge<\/strong> function, we’re creating a new local variable sum<\/strong>. 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 <\/strong>and adding it to the total sum<\/strong>. As the last step, we’re dividing the sum<\/strong> variable by the total length of the input array.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Reduce<\/h2>\n\n\n\n
Let’s take advantage of the reduce<\/strong> function to simplify the above code snippet just a little bit. <\/p>\n\n\n\n
  const users = [{ name: 'Tom', age: 21}, { name: 'Mike', age: 23}, { name: 'Anna', age: 54}]\n\n  const getAverageAge = (users) => {\n    const sum = users.reduce((prev, curr, index, array) => prev + curr.age, 0)\n    return sum \/ users.length\n  }\n\ngetAverageAge(users) \/\/ Result is 32.66....<\/code><\/pre>\n\n\n\n
Do you see what happened there? Let’s break it down.<\/p>\n\n\n\n
Instead of making use of the for loop, we’re using the reduce<\/strong> method. It takes two arguments with the first one being a callback function<\/strong> and the second one the initial value<\/strong>. Very often the callback function tends to be simple and can be written as an arrow function to simplify things even further.<\/p>\n\n\n\n
The callback function<\/strong> takes four arguments:<\/p>\n\n\n\n