JavaScript reduce() Method | Array.prototype.reduce()

JavaScript reduce() method tutorial is the topic, we are going to understand today.

So what is reduce() method in JavaScript? How does it work? Where you should use JavaScript reduce() method in your program.

JavaScript reduce() Method Definition

Just like JavaScript map() method, it also runs a callback function for each element of an array. It’s returned value is assigned to the callback (the accumulator), whose value is remembered on each iteration throughout the array and ultimately becomes the final a single resulting value.

Reduce() Method Syntax

var reduced_result = array.reduce(callback);

// We can specify an initial value optionally
var reduced_result = array.reduce(callback, initial_value);

Let’s try to understand, what all arguments and variable do here?

• reduced_result – A single value that is returned after completion.
• array – The main array to run the reduce function on.
• callback – The function to execute on every element in the array.
• initial_value (optional) – supplied initial value. If the value is not supplied, the 0th element is used as an initial value.

The callback function can also take four arguments. Three arguments are the same as we use in map() and filter() methods and the new argument is the accumulator.

• accumulator – the accumulator accumulates all of the callbacks returned values.
• current_value – the current value being processed in the array.
• index – the current index of the element being processed in the array. It starts from index 0 if an initial value is provided. Otherwise, it starts from index 1.
• array – our main array reduce() is called upon.

Let’s take a simple example and we will see how reduce() method works in an array.

Let’s say we have an array with these employees and their years of experience in JavaScript programming.

var employees = [
  {
    id: 2,
    name: "Thomas",
    years: 7,
  },
  {
    id: 9,
    name: "Alex",
    years: 6,
  },
  {
    id: 17,
    name: "Lucy",
    years: 9,
  },
  {
    id: 29,
    name: "James",
    years: 5,
  }
];

Now, our challenge is we want the total years of experience of all employee using JavaScript reduce() method.

var totalExperience = employees.reduce(function (accumulator, employee) {
  return accumulator + employee.years;
}, 0);

You can see that we have set the initial value as 0. I could have also used any value if our program needs. After running the callback on every element of the array, the reduce() will return the final value of our accumulator.

The result will be returned 27.

You can also make the syntax even shorter using ES6’s arrow functions:

const totalExperience = employees.reduce((acc, employee) => acc + employee.years, 0);

Now let’s say we want to find which employee is the most experienced in their skill. For that, we can use reduce as well:

var mostExperienceEmp = employees.reduce(function (oldest, employee) {
  return (oldest.years || 0) > employee.years ? oldest : employee;
}, {});

We have named our accumulator oldest. Our callback compares the accumulator to each employee. If an employee has more experience than oldest, then that employee becomes the new oldest so that’s the one we return.

Conclusion

It’s really very simple to generate a single value using JavaScript reduce() method.

Please note that the returning value could be anything like an object, array, etc.

Finally, JavaScript Array reduce() method tutorial is over. Hope you understood the concept of .reduce() method.

You can find detailed information here.