javascript: reduce array function

Reduce

The reduce function as the name suggest reduces an array into a single input . This is helpful because you can make operations on arrays like removing duplicates, sum of an array of numbers, calculate the max of numbers, creating instances of new object and many more cases.

How does reduce work?

Let's pretend you would like to calculate the sum of an array of elements, how would you do this without reduce function?

1) declare a variable to store the result in this case total
2) iterate through the array
3) capture the value and sum the total plus the current number
4) total variable will contain the result from adding the numbers

const numbers = [1, 2, 3, 4, 5, 6];
let total = 0;

numbers.forEach((number) => {
  total = total + number;
});

console.log(total); // 21 

Well this is good, however you can achieve the same result with the reduce function, I will show:

const numbers = [1, 2, 3, 4, 5, 6];
let result = numbers.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(result); // 21

This is nice right? reduce will produce the same effect and it is more understandable, but how does reduce now about the elements and how to sum them?

This is the anatomy of reduce:

• Reduce accepts two arguments: a callback function and the initial argument
  • There are a couple of arguments that the callback accepts you can take a look here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce, but the ones you have to know are the accumulator and the current value: in this case the accumulator will be the initial argument that is 0 and the current value will be the first number from the array in this case the number 1 from the numbers array.
  • The callback returns the next number that will be assigned to the accumulator.
  • The second argument is the initial argument, in other words where would you like the accumulator to start in this case is 0. If not provided then the first number of the array will be used in this case 1. In above example:

reduce( (acc, curr)=> {} /* <= callback */, 0 /* <= initial argument */);

• Reduce iterates through all the elements array and the return from the callback will be assigned to the accumulator:

This is the process based on the example from above:
1) 1st iteration acc = 0, curr = 1 and returns 1
2) 2nd iteration acc = 1, curr = 2 and returns 3
3) 3rd iteration acc = 3, curr = 3 and returns 6
4) 4th iteration acc = 6, curr = 4 and returns 10
5) 5th iteration acc = 10, curr = 5 and returns 15
6) 6th and last iteration acc = 15, curr = 6 and returns 21

How does reduce work internally?

This is a small representation, this is not the original implementation it is just for you to have an idea about reduce.

function Reduce(array, cb, initalValue) {
  let result = initalValue;
  array.forEach(value => {
    result = cb(result, value);
  });

  return result;
}

function Cb(acc, curr) {
  return acc + curr;
}
let res = Reduce(numbers, Cb, 0);


console.log(res); // 21

Reduce is a great feature to know as it is helpful when dealing with arrays in js or even other programming languages!

Resources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

I hope this gives a better idea about reduce, reach out for any question.