Javascript's reduce method in a nutshell.

The word "reduce" in the English language means :

to diminish in size, amount, extent, or number

Let's suppose that we have an array of items

const cartItems = [1,3,5,7,9];

I want the sum of all the items.

I could use the For Loop but it's going to be a bit hairy. The method reduce() will give us one total number with less code (always go for the less-code option).

reduce() takes two arguments: a callback function (the reducer itself) and an initial value. The callback function takes two arguments: the previous value and the current value:

let total = cartItems.reduce((previousValue, currentValue) => {
    return previousValue + currentValue;
}, 0)

Let's calculate the first rotation on the array.

The previousValue is going to be equal to 0 while the currentValue is going to be equal to the first item in the array, which is 1.

Next, the previousValue is going to be equal to 1 while the currentValue is going to be equal to 3 and so it goes. The total amount will be sum of all the numbers: 25

Keep in mind that the initial Value is totally optional. When omitted, the first value of the array is used as an initial value.

Note: the reverse of the reduce() method is reduceRight(). Yes! It takes items from right to left.

Ladies and gentlemen, that was a quick tutorial of the reduce() method.

Don't forget to practice.

Thank you.

Comments

[Basharath]

It's a good article. You should avoid saying previous value, because it doesn't actually hold the previous value.

previousValue accumulates all the results, nothing but the squeezing of the array is stored in that. So it is a convention to call it an accumulator or store.

General convention
arr.reduce((acc, curr) => {}, initial)👍

[Amine Amhoume]

I appreciate that. You are definitely right! But, the thing I try to write articles for people with low level English and not to confuse them with puzzling words. Thank you again.

[Michael]

As a native speaker I found the previous and current more confusing to be honest. Very nice that you can do this sort of thing in JS but I did have to reread your example a couple of times as it didn't sound right to me.

[Amine Amhoume]

Thank you Michael. Feedback like yours is what keeps me improving. I will take that in consideration when writing my next article which I will publish in a few days.

[Josh]

Anything for can do, reduce can do cleaner (i.e., with fewer side effects).

Getting certain items in an array:

[1, 'pears', new Set()].reduce(
  (iters, maybeIterable) => {
    if (maybeIterable[Symbol.iterator]) {
      iters.push(maybeIterable)
    }
    return iters;
  }, 
  []
);
// => [ 'pears', Set [] ]

Transforming the contents of the array, in-place:

const words = "why would you want me to spell these words backwards".split(" ");
 words.reduce(
  (backwords, word, index) => {
    backwords[index] = word.split("").reverse().join("");
    return backwords;
  }, 
  words
)

console.log(words.join(" "))
// => yhw dluow uoy tnaw em ot lleps eseht sdrow sdrawkcab

Summing a bunch of numbers:

// see post example

Even mimicking forEach(), if you hate optimized native code:

['butter', 'milk', 'eggs', 'whatever'].reduce(
  (_, item) => console.log(item),
  null // if no accumulator is passed, the first item in the list won't be logged
)

/*
butter
milk
eggs
whatever

=> undefined
*/

[Amine Amhoume]

Excellent examples man! reduce() is truly powerful.

[kaouthar-hub]

can you plz add me i need to talk to you

[Jon Randy 🎖️]

You didn't mention that the initial value is actually optional. If you omit it, the first value of the array is used, and the reduce proceeds from the next value

[Amine Amhoume]

Thanks for the reminder Jon. I had that in mind but didn't bother to put it but now I think I should.