All language subtitles for 11. The Array reduce Method

All right.

So we tackled the map and the filter method.

And so now it's time for the one method that rules them all, which is the reduce method.

So the reduce method is really the most versatile and the most powerful of all array methods in JavaScript.

So in fact, we could probably implement all the other methods simply using the reduce method, but

that would be a little bit too much work.

And so that's why we have all of these other methods which are a lot easier to use.

So I will really not go deep into the reduce method here because we could spend hours just with this

method.

But I will just show you one of the most common use cases, which is to add together numbers or basically

to perform any operation or mathematical operations with numbers.

So let's say that for some reason we wanted to read all of the books in the array and we wanted to know

how many pages we would have to read.

So the solution is to add together all of these pages, properties of all of the books in the array.

Right.

And so for that we can use the reduce method.

So let's say pages.

All.

Books and then books Dot.

Reduce.

Now, the reduce method also takes in a callback function which will be executed for each element of

the array.

And as the second argument, it also takes in a starter value basically.

But before we go into these, let's actually understand what the reduce method does and what it's used

for.

So it is called the reduce method, because the goal of reduce is to reduce basically the entire array

to just one value.

So to boil it down, and if you think about it, this is exactly what we are trying to do now.

So we want to boil down the entire array to just one number, which is in this case, the number of

pages of all the books combined.

Right?

And so that second argument that I mentioned earlier is basically the starter value for that final value

that we want to obtain.

So first, we will want to pass in a function.

We will do that in a minute.

And second, we want that starter value.

And in this case, since we are adding together all of these values, we will start from zero.

Of course, it makes sense, right?

And now here, let's talk about the function that will get called.

So before we always had this callback function with a book, and then here we did something right.

But here the callback function will be a little bit different.

So the function that we pass in here will not only get called with the current element, but also with

the current value of the accumulator, which starts at zero.

So that's all sounds very confusing, but let me just call this here ACC, which stands for accumulator.

And then we will see in a second why this makes sense.

So here what we want to return is this accumulator plus book dot.

Pages.

And now if we say pages, all books, then we get this huge number.

Okay, so let's understand what happened here by going over this array element by element.

So the first element again, here is the Lord of the Rings.

And so in this first iteration, this book here is of course, this one.

But what is the accumulator?

Well, the accumulator is basically the current value of the final value that we want to boil the array

down to.

So basically, in this case, the pages of all the books combined, which starts at zero.

And so in the first iteration, the accumulator will still be zero.

So this function here will get called for the first element and then the accumulator will be zero and

the book will be the current book.

And so then we add together the current accumulator, so the current pages, all books, so to say,

which is still zero plus this 1216.

And so we can imagine that the second value here then becomes 1216 after this first iteration.

And so therefore, in the next iteration, when we go to the second object, the current accumulator

is already 1216.

So here again, it will in the second iteration, be already 1216.

And then on top of that we add 295.

So that's then the current book pages.

And so then in the next iteration, the accumulator will already be 1216 plus 295, which is like 1500

something.

And then on top of that, we add this number of pages and so it goes all the way until the end.

So we can imagine this accumulator here basically as a pile onto which we put more and more and more

until in the end we reach the final result that we were looking for.

So it's like an intermediary value in this case onto which we keep adding the number of pages until

in the end we reach 3227 pages.

Okay, so that was a bit confusing once again, but it's also not super important to understand how

it works, especially if all we're doing is like this simple adding of numbers.

So this always works the same in the end.

And so the most important use case usually of reduce is just this.

But we can also do very, very complex things, as I said in the beginning, because this initial value

here doesn't have to be a number.

It could also be an array or it could be an object.

And so what this means is that we could do really anything that we do with map or filter, also with

a reduce.

But I won't go into that right now because yeah, for that we have already map and filter.

Now here I just like to in this case to replace the accumulator value with some.

So calling it just some because that is what it's actually doing.

But just keep in mind that, well, it is an accumulator because we keep adding up and up and up onto

this temporary value, so to say.

In this case, it's simply the sum of the pages.

And so here I like to then call it sum.

Okay.

And that's actually all I had to show you here about reduce because, yeah, many times we just use

it for simple stuff like this.

And so now you know how to do that.