In this article, we are going to learn javascript reduce method in detail. We will learn how to use the reduce method in your code to do the some most interesting operation like finding the sum of the array, an average of the array, separate a number of arrays in to even and odd numbers of an array and lots of other operations in a very easy way.

Before going further with this article, I will highly recommend you to read the below article to learn more deeply about the reduce function in javascript.

JavaScript reduce() Method Syntax

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback

This is a function to execute in each element of the array. It takes below four arguments:

accumulator

It accumulates the return value of the callback function.

currentValue

The current element being processed in the array.

index

The index of the current element being processed in the array. It is an optional field. Indexing starts from o if the initialValue provided otherwise start from 1.

array

The array reduce called upon.

initialValue

This is the value to use as a first argument to the first call of the callback function. If no initialValue  supplied, the first element in the array will be used and skipped.

JavaScript reduce() Method Return Value

The single value that results from the reduction.

JavaScript reduce() Method Description

The array reduce method in javascript is used to reduce the array into a single value by applying a function on each element of the array.

In the reduce method, when the first time the callback method is called then accumulator and initialValue can be one of the two values. If no initialValue will be provided then accumulator will be equal to the first value in the array and currentValue will be equal to the second value.

It throws TypeError when the array is empty. If the array only has one element (regardless of position) and no initialValue is provided, or if initialValue is provided but the array is empty, the solo value will be returned without calling the callback.

It is always a good practice to provide the initial value to avoid the unexpected return value.

JavaScript reduce() Method Examples

Till now, we learned a lot of theory about the js array reduce function. Now, let’s see some working example of this. 🙂

Sum all the values of an array

let sum = [1,2,3,4].reduce((accumulator,currentValue) => {
	return accumulator + currentValue;
},0);

console.log(sum);

//output
// 10

Counting instances of values in an object

You have a collection of items and you want to know how many of each item is in the collection then you can easily do that with the js array reduce method.

let numbers = [1, 2, 2, 3, 4, 2];

let countedNames = numbers.reduce((allNumbers, number) => { 
  if (number in allNumbers) {
    allNumbers[number]++;
  }
  else {
    allNumbers[number] = 1;
  }
  return allNumbers;
}, {});

console.log(countedNames)

// countedNames is:
// { 1: 1 , 2: 3 , 3: 1 , 4: 1 }

Remove duplicate items in the array in Javascript

let duplicateArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let uniqueArray = duplicateArray.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue);
  }
  return accumulator
}, [])

console.log(uniqueArray);

//output 

// ["a" ,"b" ,"c" ,"e" ,"d"]

Conclusion

This is all about the reduce method in javascript. I have tried to explain as simple as it can be. Hope you get a good understanding of the js reduce method.

You can go The MDN Official documents for details. They also have a good explanation on this topic. If you want to learn Javascript in details then you can join a course either from Udemy or Codecademy.

If you really like the article then share it on social media and tell others about this. Comment your doubts in the comment box, if you have any otherwise share it 🙂

Codecademy Web Development
Pin It