Array Reduce Method in JavaScript

Hello everyone! Today i wanted to write an article about a method that gave me a lot of trouble back in the day. That method is the Array.prototype.reduce method.

I'll first show the method to you using an example, then explain everything after.

Check the example below:

const numbersToAdd = [0, 1, 2, 3, 4, 5];

const initialValue = 0;
const sum = numbersToAdd.reduce((previousValue, currentValue) => previousValue + currentValue, initialValue);

console.log(sum);

In the example above, we had an array that we wanted the sum of, so we used the reduce method to "reduce" the whole array into one number. That's what this method does, it reduces the array into one particular thing.

The reduce method takes one callback function, and optionally one other parameter that states the initial value that we're going to reduce the array to. This can be an object, a number, a string, anything basically.

Note that if you don't specify an initialValue, the reduce method will use the first element of the array as the initialValue.

And inside the callback, the callback function takes 2 parameters and it can take 2 other optional ones, the first two are previousValue and currentValue respectively. What that means is, reduce method effectively loops over the array, taking the returned value of the callback function, as the previousValue of the next loop. And uses that to execute the callback again with the currentValue, and so on so forth.

The other two parameters this method can take are currentIndex and array. As those two suggest by their name, currentIndex is just the current index of the currentValue in that array, and array of course, being the array itself that is being looped upon.

Here is another example, this time with all the optional parameters used:

const peopleData = [["Khan", 23], ["James", 30], ["Molly", 43]];

const initialValue = {};
const peopleObj = peopleData.reduce((previousValue, currentValue, currentIndex, array) => {
  const [name, age] = currentValue;
  previousValue[currentIndex] = {
    name,
    age,
  };

  return previousValue
}, initialValue);

console.log(peopleObj);

OK i kinda lied with the "all" optional parameters being used part but i think you get what it means :D

And there you go, the Array Reduce method of JavaScript! I don't know why this gave me trouble before but i hope i cleared any confusion you might've had as well!

CONCLUSION

Array reduce method is a method used to reduce an array into one specific thing. Like getting the sum of an array of numbers or making an object out of an information array.

And as always, if there's any error in my code or the information i've given you, please comment so i can see and fix it immediately! Feedback is very important, and i'm always looking out for it.

Have a great day! :)