As a function that operates on an array, reduce() is considered one of many iteration methods. An iteration method accepts a function (or callback) as an argument and does its bidding (executes it) on each element in the array being processed. In that vein, reduce(), too, accepts a callback and does what is peculiar to reduce() on a given array.

What is peculiar to reduce() and why have I chosen to approach the definition of the method this way? Because each array method has what is peculiar to them and will always have that as their final result (or return value), leaving you the programmer to define the callback to suit your own purposes. For reduce(), that peculiarity is that it "reduces" the given array to a single value.

Per MDN,

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Making sense, though? Picture an array, a list of things. You execute (or call) .reduce() on it, and it reduces it to one thing. Let's get to this one thing.

The return value of reduce()

It's interesting how this one thing of reduce()'s return can also be an array! Putting that out there just so the idea of "single output value" doesn't get you thinking it's so literal, like 1 or 10, or true or false or "kb", ugh, you get the idea. This one thing can also be an object. So, only take the idea of one thing to mean you're building up, or really, drilling down, to a particular expected result from an array with your function to do that for you. Cool?

So, that one thing is really up to you, and you get there with how you define your callback. We can leave it there, I think.

reduce()'s function signature or syntax

The signature of reduce() is essentially this:

    arr.reduce(callback, ini);

Breaking that down, we're saying, you call reduce() on an array, arr, passing in two arguments - a callback (your recipe for reducing the array) and an initial value, ini, which is kinda optional, but which ensures that your callback starts at index 0, that is, the very first item in the array. Best practice advises that you always pass in an ini, which is why it makes it into the signature.

According to the doc, if ini isn't supplied, reduce() will execute the callback starting at index 1, skipping the first. You'll see the reason for skipping one index as soon as we introduce the gut of the callback. Anyways, that's next.

reduce()'s callback function (the reducer)

The gut of reduce(), that is, what makes reduce reduce, what reduces in reduce, what does the reducing for you, okay, enough, is your reducer. Your callback function. Barebones, it is:

    const callback = (acc, cur, idx, src) => acc;

    // Or as a declaration with the function keyword
    function callback(acc, cur, idx, src) {
    	return acc;

As obvious, your reducer takes four arguments, the last two of which are optional.

  1. acc for "accumulator", that is the compounding variable that becomes the final result - it builds up. The value of acc is equal to ini at the start of the array processing, say reduction. But equal to the item at index 0 if you didn't ini, which is why this first index is skipped on iteration - it's reserved for acc. You'll see more when we discuss how reduce() works.
  2. cur for "currentValue", is the current element being processed in the array, which argument you must supply because reduce() is assigning it a value when it runs based on the content of the array, your ini, and the acc. Again, how it works will throw more light.
  3. idx for "index" or, better put, "currentIndex", is the index of cur above. You only supply this argument if you'll use/need it in your reducer. idx will start from 0 if ini is given and rove from there. Otherwise, it'll start from 1 because acc, remember? the skipping? Cool.
  4. src for "source array" is just the array itself that reduce() was called upon. src is rarely useful, according to pros of JavaScript who've written reduce() in the real world a quintuple time. You pass it in in case you "want to access some other element in the original list".

Yup, there you have it. All spoken is what reduce() the amazing is, and, as I've written, is how I took the time to get it. I hope I was able to pass it down to you. Next in the series, I'll go into the guts of it - how reduce() works. Trust you'll love it. Thoughts? Let me know in the comments.