## DEV Community

Ramiro - Ramgen

Posted on • Updated on • Originally published at ramagg.com

# Master the Javascript Array Reduce Method with 10 Examples

The Javascript reduce method is a powerful tool that allows developers to iterate over an array and accumulate a single value or object. In this tutorial, we will learn how to use the reduce method to solve real-world problems, from simple summations and multiplications to advanced tasks such as removing duplicates from an array and validating parenthesis.

By the end of this tutorial, you will have a solid understanding of how to use the reduce method and will be able to apply it to your own projects with confidence.

## 1. Summation and Multiplication:

The reduce is perfect for performing simple mathematical operations on an array. For example, we can use the reduce method to find the sum or product of all the elements in an array.

$\sum and \prod$

// Summation
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i);

// Without initial value
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i, 5 );

// For clarity the above code is the same as
[3, 5, 4, 3, 6, 2, 3, 4].reduce(function(a, i){return (a + i)}, 0 );

// Multiplication
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a * i);


In this example we can leave the initial value out, as it will grab the first item in the array, but you can also specify one to have an offset.

## 2. Find the maximum in an array:

Another common use case for the reduce method is finding the maximum value in an array. By specifying an initial value of -Infinity, we can compare each element in the array to the accumulator and return the maximum value.

[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => Math.max(a, i), -Infinity);


As an alternative you could use the spread operator and Math.max built-in method as well.

Math.max(...[3, 5, 4, 3, 6, 2, 3, 4]);


## 3. Concatenating uneven arrays

The reduce method can also be used to concatenate arrays, even if they are of different lengths. In this example, we use the map method to iterate over each sub-array, and then use the reduce method to combine all the elements into a single string.

let data = [
["The","red", "horse"],
["Plane","over","the","ocean"],
["Chocolate","ice","cream","is","awesome"],
["this","is","a","long","sentence"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>${a}${i}))

// Result
['The red horse',
'Plane over the ocean',
'Chocolate ice cream is awesome',
'this is a long sentence']


## 4. Removing duplicates in an array:

The reduce method can also be used to remove duplicates from an array. In this example, we check if the current value has an index in the accumulator array. If not, we add it to the array.

let dupes = [1,2,3,'a','a','f',3,4,2,'d','d']
let withOutDupes = dupes.reduce((noDupes, curVal) => {
if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
return noDupes
}, [])


It's important to note that this method can also be achieved by using javascript set, which by default store only unique values.

## 5. Validating parenthesis

The reduce method can also be used to validate parenthesis in a string. In this example, we use the spread operator to convert the string into an array, and then use the reduce method to iterate over each character. If the character is an opening parenthesis, we increment the accumulator, and if it's a closing parenthesis, we decrement it. In the end if the status is 0, the parenthesis are balanced.

[..."(())()(()())"].reduce((a,i)=> i==='('?a+1:a-1,0);

// using a for loop
status=0
for i in string:
if(i=="("):
status=status+1
elif(i==")"):
status=status-1
if(status<0):
return False


## 6. Filtering and Counting:

The reduce method can also be used to filter and count elements in an array. In this example, we use the reduce method to filter out all elements that are not a number, and then count the number of remaining elements.

let data = [1, 2, "a", "b", 3, "c", 4, "d"];
let filteredData = data.reduce((acc, curr) => {
if (typeof curr === "number") {
acc.push(curr);
}
return acc;
}, []);
console.log(filteredData); // [1, 2, 3, 4]
console.log(filteredData.length); // 4


## 7. Group by property

The reduce method can also be used to group elements in an array by a specific property. In this example, we use the reduce method to group an array of objects by their "type" property. In each iteration, we check if the key exist if not we create an array, then we add the current type to that and we return the group array.

let data = [
{ type: "A", value: 1 },
{ type: "B", value: 2 },
{ type: "A", value: 3 },
{ type: "B", value: 4 },
{ type: "A", value: 5 },
];
let groupedData = data.reduce((acc, curr) => {
if (!acc[curr.type]) {
acc[curr.type] = [];
}
acc[curr.type].push(curr);
return acc;
}, {});
console.log(groupedData); // { A: [ { type: 'A', value: 1 }, { type: 'A', value: 3 }, { type: 'A', value: 5 } ], B: [ { type: 'B', value: 2 }, { type: 'B', value: 4 } ] }


## 8. Flattening a Nested Array:

The reduce method can also be used to flatten a nested array. In this example, we use the reduce method to flatten an array of arrays into a single array.

let data = [[1, 2], [3, 4], [5, 6]];
let flattenedData = data.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattenedData); // [1, 2, 3, 4, 5, 6]


An intended way of doing this is just to use the .flat method.

[ [3, 4, 5],
[2, 5, 3],
[4, 5, 6]
].flat();


## 9. Counting Occurrences of Elements:

In this example, we use the reduce method to count the occurrences of each element in an array.

let data = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
let countedData = data.reduce((acc, curr) => {
if (!acc[curr]) {
acc[curr] = 0;
}
acc[curr]++;
return acc;
}, {});
console.log(countedData); // { 1: 1, 2: 2, 3: 3, 4: 4 }


This one is like doing a map and a filter at the same time, we filter the negative numbers and we rise the positive.

## 10. Reverse a string

Here we use the reduce method to reverse a string, this will work with any object not only strings.

const reverseStr = str=>[...str].reduce((a,v)=>v+a)


## 11. Binary to decimal

In this example we can use it to convert a binary number to decimal.
Here we convert the string into an array, and we square in order the array until we have the decimal number.

const bin2dec = str=>[...String(str)].reduce((acc,cur)=>+cur+acc*2,0)

const bin2dec = (str) => {
return [...String(str)].reduce((acc,cur)=>{
return +cur+acc*2
},0)
}


To Illustrate this one let's see an example:
(10111)->1+(1+(1+(0+(1+0*2)*2)*2)*2)*2

And we reach the end, the reduce method is a versatile and powerful tool that can be used to solve a wide range of problems.

Check out my youtube channel ramgendeploy drop a sub if you like there 😄

Luke Shiru

You can do pretty much anything with Array.prototype.reduce, but you should keep in mind that almost always there are more readable or performant solutions. Based on this, the first example is ok (generally Array.prototype.reduce is useful for sums), but for the rest:

• Find the maximum in an array: You can just spread the array with Math.max.
Math.max(...[3, 5, 4, 3, 6, 2, 3, 4]);

• Removing duplicates in an array: You can just use Set:
const dupes = [1, 2, 3, "a", "a", "f", 3, 4, 2, "d", "d"];
const withoutDupes = [...new Set(dupes)];

• Extract properties in an array of objects returning an array: You already pointed out map is a better fit, being that you're turning the property values into arrays, you could just use Object.values:
[
{ name: "Alice", job: "Data Analyst", country: "AU" },
{ name: "Bob", job: "Pilot", country: "US" },
{ name: "Karen", job: "Software Eng", country: "CA" },
{ name: "Jeremy", job: "Artist", country: "SP" }
].map(Object.values);

• Flattened an array of arrays: You can just use Array.prototype.flat:
const flattened = [
[3, 4, 5],
[2, 5, 3],
[4, 5, 6]
].flat();


Cheers!

Ramiro - Ramgen • Edited

Those are awesome suggestions, the post was more to have examples on how to use reduce than the most performant way of doing things 😅,
as reduce is widely used on react and it's really useful to know how the vanilla javascript method works,
but yea knowing the best way of doing things is important.
I appreciate the time you have put in the comment, Thanks 😄

Luke Shiru

Can you provide examples of the "wide use in React"? AFAIK the same applies for React: "Generally there are better solutions than reduce", similar to how generally there are better solutions than useEffect or useRef. I'm not saying you should never use reduce, I'm just saying you shouldn't default to it (using the same tool for every problem), because for the vast majority of scenarios there are better solutions.

Ramiro - Ramgen

For sure, I'm basicaly refering to the context api, it uses reduce as one of the main methods and it useful to know how .reduce works. Also if I'm not wrong useState uses useReducer at the backend but I can be mistaken, but anyways the useReducer hook can be used instead of useState when you have complex logic.

And you are right, you have to use the right tool for the right problem, I'm not arguing with that 😃
Although, I'm not sure if I'm on the same page with "generally there is a better solution than useEffect and useRef", those are really useful hooks that in the most part will do a fine job at any problem.

Luke Shiru

Just to be clear: useReducer is not the same thing as Array.prototype.reduce, so that comparison wouldn't be valid. And when I said:

generally there are better solutions than useEffect or useRef.

What I mean is that generally, the problem can be solved with other hooks, so both useEffect and useRef are more like "last resources", so if those are the first solutions that come to mind, you might have to do a little more thinking.

Ramiro - Ramgen

Yes you are correct, those are not the same, but useReducer, has the same idea behind so it really useful to understand array.prototype.reduce to understand things like useReducer.
Well I guess I need to do more thinking then 😅

Francis.B

I understand both of your arguments and illustrate of how .reduce() works.

Francis.B

I rarely use Reduce in react as there more efficient methods to manipulate data as @lukeshiru mentioned.
I personal use all eas6 methods in React most of the time:
.filter()
.map()
new Set()
.find()
.findIndex()
.includes()
Object.is()
[].entries()
[].keys()
[].values()
.sort()
and untility library such as lodash
then occasionally .reduce() .some()

Ramiro - Ramgen

I also rarely use reduce in react, but I was working with the context api the other day and it really was useful to know how the reduce method worked to understand the api (at least the part where there is reduce like syntax), but yea with array manipulation reduce is at the bottom of the list 😅

Peter Vivo

reducer in React means total different things, than array reduce function ... which is really useful tool as you described. reducer in React means pure function which modify state by action payload.

Ramiro - Ramgen

Yes you are correct, they are not the same, Thank for the comment.

lionel-rowe

There's a great HTTP 203 video about that here: Is reduce() bad? - HTTP 203

The title is maybe a little clickbait-ey, but they do make a pretty good reasoned argument for "yes... mostly" and give some great examples for how to rewrite such code in more readable ways.

Luke Shiru • Edited

Indeed! Jake started the discussion in Twitter, I made a post about it as well ... but the TL;DR is "you should use the tool that makes the most sense for the particular task", Array.prototype.reduce is extremely versatile, but generally there are better alternatives to achieve the same tasks that are more readable and have better performance :)

Jon Randy 🎖️

On your summing example, you're providing the initial value of 0 which isn't necessary - and actually makes it slightly less efficient. If you omit the initial value, the first value of the array will be used instead - reduce will then proceed from the second item in the list

Omitting the initial value is an antipattern that makes your code much harder to reason about. Let's say you want to concatenate digits into a string (deliberately oversimplified example, you'd just use join for this in real life):

const zeroDigits = []
const oneDigit   = [1]
const twoDigits  = [1, 2]

zeroDigits.reduce((a, c) => String(a) + String(c)) // throws TypeError
oneDigit  .reduce((a, c) => String(a) + String(c)) // number 1
twoDigits .reduce((a, c) => String(a) + String(c)) // string '12'


Jon Randy 🎖️ • Edited

Being 'hard to reason about' is purely subjective, and down to the individual. It's a perfectly valid language feature that has a valid use.

You can't possibly be arguing that saving the 2 or 3 minified bytes from writing ,0 or ,'' or the amount of processing power required to add zero to something is somehow worth the likelihood of your code taking a single input type and outputting two unrelated types or throwing an error?

I notice your reverseStr function from your other comment suffers from this problem — did you realize that when you wrote it?

const reverseStr = str => [...str].reduce((a, v) => v + a)

reverseStr('') // throws TypeError


Jon Randy 🎖️

Yes

Ramiro - Ramgen

Right! I forgot to mention that, nice catch 😄

Jon Randy 🎖️

Might want to re-check the summation and multiplication section - still some issues there

Jon Randy 🎖️ • Edited

Reverse a string:

const reverseStr = str=>[...str].reduce((a,v)=>v+a)


Convert a binary number in a string to a decimal:

const bin2dec = str=>[...str].reduce((a,v)=>+v+a*2,0)


Ramiro - Ramgen

Oh nice adding these examples to the post, Thanks!

Suchitra

Nice article!!
Btw I wanna ask you that which markdown format you used for the code color them cuz whenever I used to code it simply displayed in write colored text!
though it is out of the topic question:P

Ramiro - Ramgen • Edited

Thanks! to have the code with the right color format you do
´´´javascript <- language name here
let data=[]
...
´´´
Here change the commas for the right ones, this is to not have this comment formatted, the right ones are these `

Suchitra

Thanks I will try!

ShriyaStout

These are the best and most effective suggestions shared by you here , thanks for your help. dua to make someone talk to you again

JanicePerry

The reduce() method executes a user-supplied “reducer” callback function on each ... This is shown in the following interactive example. white magic for love

wegissilveira

Thank you, man.

Have a better understanding of Reduce has been on my todo list for a while. You really helped me with this article.

Ramiro - Ramgen

Thanks! Glad you like it 😁

qq449245884

Dear Ramiro，may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Ramiro - Ramgen

Sure, that'll be awesome 😁

DEV Community