Here is a basic explanation of how the Javascript reduce() method works.

const evenNums = [2, 4, 6, 8]
evenNums.reduce((accumulator, currVal) => accumulator + currVal)

The above is the most basic (simplest) form you would see the reduce() method being used.

The above example also makes use of the es6 const and arrow function. Let's take an example using the normal function keywords and var, then break it down.

var evenNums = [2, 4, 6, 8]
evenNums.reduce( function (accumulator, currVal){
    return accumulator + currVal
})

Alright.

In the first line of both codes given above, a variable is declared const and var, then they are both named as evenNums, then an array is assigned to this named variables (an array of even numbers).

So, I decided that I want to get the sum of all the numbers in my array and get them as a single value. This is where my reduce() method comes in. The only other way I know of getting this exact result is by using a for loop, but have you seen the above code? it's shorter, easier and straight forward.

Let's continue.

Another thing the above codes have in common is evenNums.reduce() In this case, the reduce method is being called on the array, which is stored in the variable named evenNums.

This is where it gets different. Es6 uses the arrow function which is literally a syntactic sugar, and you do not have to use a return function. So, in the first example, we have (accumulator, currVal) => accumulator + currVal.

The reduce method iterates over the values of an array to return a single value. It takes four argument - accumulator, currVal, index and array. However, the index and array aren't always required. The first two (accumulator and currVal are required and compulsory).

The accumulator is a holder for the values. While the currVal, like the name implies holds the current value in the operation (and the operation in this instance is the addition (+) called on the function.

This is our array [2, 4, 6, 8] and we want to reduce it to a single value. And in our function, the 'way' we want it to be reduced is by adding the values together.

Remember I said, reduce() method works like iteration, so the currVal holds the first value 2, then it sees the operator to be used + then it iterates (moves to the next value), 4, adds it together and stores the sum (which is 6) in the accumulator. It then takes the value from the accumulator and performs the operation '+' with the next value in the array. And so on till it reaches the last item in the array.

The function method follows the same convention. You declare your anonymous function, give it arguments, and voila, return what you want with the given arguments. evenNums.reduce( function (accumulator, currVal){
return accumulator + currVal
})

Can you guess what the answer is?

If you did try it and if you didn't, copy out any of the above codes into your chrome developer tools (or any other tool you use), and see if you got it (or what the answer is if you didn't try it).

(accumulator, currVal) are not fixed names!

You can use to name your arguments anything. (total, val) (accum, vals) anything!

The operation you can perform are limitless

The beautiful thing about reduce() method is, you can perform any operation you want with it. I have used addition (+), subtraction (-), division (-), multiplication (*), modulo (%), but of course the operations are limitless and you can try any mathematical operation you want.

Go ahead, open your chrome dev tools (or any other tools), and try writing out a reduce method with a different operator

What is reduce() method

Admittedly, this should have come first, but it was going to be a link to a great article that gives all the essay-y educative bit of reduce(), so I decided to leave it till later part.

For an insightful read on Javascript reduce method, I would suggest you check out this link. [https://www.educative.io/edpresso/what-is-reduce-in-javascript].

Going in-depth into reduce() method

Totally unrelated: I feel like adding 'method' after 'reduce() is a tautology, since the brackets already mean that it's a method.

Reduce() is a very powerful tool I would suggest you get into and utilize properly. For instance, using the index and array arguments of the reduce method, you could use it as a map and filter for your array. You could return another array, get only values that are divisible by eight, greater than four, or any other 'filterable' operation you can think of.

An if statement can be used in a reduce method. An array could also be flattened using a reduce method.

Check out the FreeCodeCamp article, a guide to reduce method to learn much more complex bits of the reduce function. [https://www.freecodecamp.org/news/reduce-f47a7da511a9/].

Resources

Other resources to check out includes the MDN documentation on reduce() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce]

Bitdegree's basics of applying Javascript Reduce on Array [https://www.bitdegree.org/learn/javascript-reduce]

Lastly, finally, Understand the Javascript Reduce Method by Paul Ryan [https://alligator.io/js/finally-understand-reduce/].

If this article wasn't clear enough, do check out all the resources I have provided. They are brilliant. If you have any more questions, I'd be sure to answer them in the discussion section below. If you would like to correct something, add something (especially a useful resource), do leave a comment in the discussion below.

Happy coding.