[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
}
*/