DEV Community

Cover image for Master the Javascript Array Reduce Method with 10 Examples
Ramiro - Ramgen
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.

image

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.

βˆ‘and∏ \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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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
}, [])
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 } ] }
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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

[ [3, 4, 5],
  [2, 5, 3],
  [4, 5, 6]
].flat();
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Bonus

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)

// Long format for readability
const bin2dec = (str) => {
  return [...String(str)].reduce((acc,cur)=>{
    return +cur+acc*2
  },0)
}
Enter fullscreen mode Exit fullscreen mode

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 πŸ˜„

Top comments (32)

Collapse
 
loucyx profile image
Lou Cyx

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]);
Enter fullscreen mode Exit fullscreen mode
  • 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)];
Enter fullscreen mode Exit fullscreen mode
  • 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);
Enter fullscreen mode Exit fullscreen mode
  • Flattened an array of arrays: You can just use Array.prototype.flat:
const flattened = [
    [3, 4, 5],
    [2, 5, 3],
    [4, 5, 6]
].flat();
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
 
ramgendeploy profile image
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 πŸ˜„

Collapse
 
loucyx profile image
Lou Cyx

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.

Thread Thread
 
ramgendeploy profile image
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.

Thread Thread
 
loucyx profile image
Lou Cyx

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.

Thread Thread
 
ramgendeploy profile image
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 πŸ˜…

Thread Thread
 
fbolaji profile image
Francis.B

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

Collapse
 
fbolaji profile image
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()

Thread Thread
 
ramgendeploy profile image
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 πŸ˜…

Collapse
 
pengeszikra profile image
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.

Thread Thread
 
ramgendeploy profile image
Ramiro - Ramgen

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

Collapse
 
lionelrowe profile image
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.

Collapse
 
loucyx profile image
Lou Cyx • 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 :)

Collapse
 
jonrandy profile image
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

Collapse
 
lionelrowe profile image
lionel-rowe • Edited

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'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jonrandy profile image
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.

Thread Thread
 
lionelrowe profile image
lionel-rowe • Edited

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
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Yes

Collapse
 
ramgendeploy profile image
Ramiro - Ramgen

Right! I forgot to mention that, nice catch πŸ˜„

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

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

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Reverse a string:

const reverseStr = str=>[...str].reduce((a,v)=>v+a)
Enter fullscreen mode Exit fullscreen mode

Convert a binary number in a string to a decimal:

const bin2dec = str=>[...str].reduce((a,v)=>+v+a*2,0)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ramgendeploy profile image
Ramiro - Ramgen

Oh nice adding these examples to the post, Thanks!

Collapse
 
suchitra_13 profile image
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!
Please specify:)
though it is out of the topic question:P

Collapse
 
ramgendeploy profile image
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 `

Collapse
 
suchitra_13 profile image
Suchitra

Thanks I will try!

Collapse
 
shriyastout profile image
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

Collapse
 
janiceperry profile image
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

Collapse
 
wegissilveira profile image
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.

Collapse
 
ramgendeploy profile image
Ramiro - Ramgen

Thanks! Glad you like it 😁

Collapse
 
qq449245884 profile image
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.

Collapse
 
ramgendeploy profile image
Ramiro - Ramgen

Sure, that'll be awesome 😁