Javascript Array reduce()

The reduce() method executes a reducer function on each element of the array and returns a single output value.

Example

const message = ["JavaScript ", "is ", "fun."];

// function to join each string elements
function joinStrings(accumulator, currentValue) {
  return accumulator + currentValue;
}

// reduce join each element of the string let joinedString = message.reduce(joinStrings);
console.log(joinedString); // Output: JavaScript is fun.

reduce() Syntax

The syntax of the reduce() method is:

arr.reduce(callback(accumulator, currentValue), initialValue)

Here, arr is an array.


reduce() Parameters

The reduce() method takes in:

  • callback - The callback function to execute on each array element (except the first element if no initialValue is provided). It takes in
    • accumulator - It accumulates the callback's return values.
    • currentValue - The current element being passed from the array.
  • initialValue (optional) - A value that will be passed to callback() on first call. If not provided, the first element acts as the accumulator on the first call and callback() won't execute on it.

Note: Calling reduce() on an empty array without initialValue will throw TypeError.


reduce() Return Value

  • Returns the single value resulting after reducing the array.

Notes:

  • reduce() executes the given function for each value from left to right.
  • reduce() does not change the original array.
  • It is almost always safer to provide initialValue.

Example 1: Sum of All Values of Array

const numbers = [1, 2, 3, 4, 5, 6];

function sum_reducer(accumulator, currentValue) {
  return accumulator + currentValue;
}

let sum = numbers.reduce(sum_reducer);
console.log(sum); // 21
// using arrow function let summation = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue );
console.log(summation); // 21

Output

21
21

Example 2: Subtracting Numbers in Array

const numbers = [1800, 50, 300, 20, 100];

// subtract all numbers from first number
// since 1st element is called as accumulator rather than currentValue
// 1800 - 50 - 300 - 20 - 100
let difference = numbers.reduce( (accumulator, currentValue) => accumulator - currentValue );
console.log(difference); // 1330 const expenses = [1800, 2000, 3000, 5000, 500]; const salary = 15000; // function that subtracts all array elements from given number // 15000 - 1800 - 2000 - 3000 - 5000 - 500
let remaining = expenses.reduce( (accumulator, currentValue) => accumulator - currentValue, salary );
console.log(remaining); // 2700

Output

1330
2700

This example clearly explains the difference between passing an initialValue and not passing an initialValue.


Example 3: Remove Duplicate Items from Array

let ageGroup = [18, 21, 1, 1, 51, 18, 21, 5, 18, 7, 10];
let uniqueAgeGroup = ageGroup.reduce(function (accumulator, currentValue) { if (accumulator.indexOf(currentValue) === -1) { accumulator.push(currentValue); } return accumulator; }, []);
console.log(uniqueAgeGroup); // [ 18, 21, 1, 51, 5, 7, 10 ]

Output

[
  18, 21,  1, 51,
   5,  7, 10
]

Example 4: Grouping Objects by a property

let people = [
  { name: "John", age: 21 },
  { name: "Oliver", age: 55 },
  { name: "Michael", age: 55 },
  { name: "Dwight", age: 19 },
  { name: "Oscar", age: 21 },
  { name: "Kevin", age: 55 },
];

function groupBy(objectArray, property) {
return objectArray.reduce(function (accumulator, currentObject) { let key = currentObject[property]; if (!accumulator[key]) { accumulator[key] = []; }
accumulator[key].push(currentObject); return accumulator; }, {}); } let groupedPeople = groupBy(people, "age"); console.log(groupedPeople);

Output

{
  '19': [ { name: 'Dwight', age: 19 } ],
  '21': [ { name: 'John', age: 21 }, { name: 'Oscar', age: 21 } ],
  '55': [
    { name: 'Oliver', age: 55 },
    { name: 'Michael', age: 55 },
    { name: 'Kevin', age: 55 }
  ]
}

Also Read:

Did you find this article helpful?

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges