Ramiro - Ramgen

Posted on Sep 20, 2021 • Edited on Jan 26, 2023 • Originally published at ramagg.com

Master the Javascript Array Reduce Method with 10 Examples

#beginners #javascript #webdev #programming

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)

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)
}

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 (27)

Ramiro - Ramgen • Sep 20 '21 • 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 😄

Francis.B • Sep 24 '21

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 • Sep 25 '21

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 • Sep 21 '21

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 • Sep 21 '21

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

Jon Randy 🎖️ • Sep 21 '21

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

lionel-rowe • Sep 21 '21 • 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'

Jon Randy 🎖️ • Sep 21 '21 • 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.

lionel-rowe • Sep 21 '21 • 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

Jon Randy 🎖️ • Sep 21 '21

Yes

Ramiro - Ramgen • Sep 21 '21

Right! I forgot to mention that, nice catch 😄

Jon Randy 🎖️ • Sep 21 '21

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

Ramiro - Ramgen • Sep 21 '21

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 • Sep 24 '21

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

Jon Randy 🎖️ • Sep 21 '21 • 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 • Sep 21 '21

Oh nice adding these examples to the post, Thanks!

Ramiro - Ramgen • Sep 21 '21

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.

Suchitra • Sep 23 '21

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

Ramiro - Ramgen • Sep 23 '21 • 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 • Sep 23 '21

Thanks I will try!

lionel-rowe • Sep 22 '21

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.

ShriyaStout • Sep 23 '21

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 • Sep 24 '21

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