[JavaScript] Array.prototype.reduce in JavaScript by example
Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might useArray.prototype.reduce to:
- Sum an array of numbers
- Reduce an array of objects to a sum of a given property
- Group an array of objects by key or a set of given criteria
- Count the number of objects in an array by key or a given set of criteria
let numbers = [1,2,3,4,5]; console.clear(); numbers.reduce(function(preVal, curVal, index, array){ console.log({preVal, curVal, index, array}); return curVal; }); /* [object Object] { array: [1, 2, 3, 4, 5], curVal: 2, index: 1, preVal: 1 } [object Object] { array: [1, 2, 3, 4, 5], curVal: 3, index: 2, preVal: 2 } [object Object] { array: [1, 2, 3, 4, 5], curVal: 4, index: 3, preVal: 3 } [object Object] { array: [1, 2, 3, 4, 5], curVal: 5, index: 4, preVal: 4 } */
reduce() start from the second value in the array.
If there is no return value which will be passed to the next object as a previous value, then the next previous value will be undefined:
var numbers = [1,2,3,4,5]; console.clear(); numbers.reduce(function(preVal, curVal, index, array){ console.log({preVal, curVal, index, array}); }); /* [object Object] { array: [1, 2, 3, 4, 5], curVal: 2, index: 1, preVal: 1 } [object Object] { array: [1, 2, 3, 4, 5], curVal: 3, index: 2, preVal: undefined } [object Object] { array: [1, 2, 3, 4, 5], curVal: 4, index: 3, preVal: undefined } [object Object] { array: [1, 2, 3, 4, 5], curVal: 5, index: 4, preVal: undefined } */
You can give another parameter to let it start from the first element of the array:
numbers.reduce(function(preVal, curVal, index, array){ console.log({preVal, curVal, index, array}); return curVal; }, "start"); /** [object Object] { array: [1, 2, 3, 4, 5], curVal: 1, index: 0, preVal: "start" } [object Object] { array: [1, 2, 3, 4, 5], curVal: 2, index: 1, preVal: 1 } ... ... */
Sum up an number of array:
let numbers = [1,2,3,4,5]; console.clear(); var sum = numbers.reduce( (preVal, curVal) => preVal + curVal); console.log("sum: " + sum); /* Sum: 15 */
Example 2:
let people = [ { name: 'Joe mins', yearsExperience: 1, dapartment: 'IT' }, { name: "Sally koral", yearsExperience: 15, dapartment: 'Engineering' }, { name: "Bill Fork", yearsExperience: 5, dapartment: 'Engineering' }, { name: 'Jane James', yearsExperience: 11, dapartment: 'Manager' }, { name: 'Bob Super', yearsExperience: 9, dapartment: 'IT' }, ]; console.clear(); var yearsExperience = people.reduce( (sum, curVal) => sum + curVal.yearsExperience, 0); console.log(yearsExperience); //41
Group by object:
let people = [ { name: 'Joe mins', yearsExperience: 1, dapartment: 'IT' }, { name: "Sally koral", yearsExperience: 15, dapartment: 'Engineering' }, { name: "Bill Fork", yearsExperience: 5, dapartment: 'Engineering' }, { name: 'Jane James', yearsExperience: 11, dapartment: 'Manager' }, { name: 'Bob Super', yearsExperience: 9, dapartment: 'IT' }, ]; console.clear(); var departmentExperienceYears = people.reduce( (groupByObject, employee) => { let dapartment = employee.dapartment; if(!groupByObject[dapartment]){ groupByObject[dapartment] = 0; groupByObject[dapartment] += employee.yearsExperience; } return groupByObject; }, {}); console.log(departmentExperienceYears); /* [object Object] { Engineering: 15, IT: 1, Manager: 11 } */