Okay then.
So the next array method I'd like to show you is the reduce method.
And this works a bit differently from the filter and the map methods in that it doesn't return necessarily
a new array.
Instead, it can return any single value, which could be an array, or it could be a number or a string.
But any value that you want based on the values in the array that we iterate over.
So for example, we could have an array of scores like this and we want to know how many of those scores
are over 50.
We could use the reduce method to iterate the array and then return the number of scores which are over
50.
So ultimately we're returning a number, not a new array, a number, and that number represents how
many scores are over 50.
So in this case it would be one, two, three.
So we'd return the number three.
So the reduce method still iterates an array and it performs a callback function on each item in the
array, but it doesn't necessarily return an updated array at the end of it.
It just returns any value that you want based on this original array and the values in it.
So let's do an example based on these scores.
Let's use the reduce method to return a number, and that number is going to be how many scores are
over 50.
So then first of all, we're going to store this returned value in a constant.
So we'll say const and call this result and set it equal to scores, which is the array we have dot
reduce and the reduce method takes in a callback function as an argument.
And inside this callback function we can take two parameters.
First of all, the accumulator, then current.
Now you can call these what you want, but I'm calling them ACC for accumulator and cur for current.
So this accumulator you can think of as like a running total.
So for each item in this array, we're firing this callback function and each time around we have access
to this accumulator and the value of this accumulator is remembered through each item as we fire each
callback function.
So say as we're iterating through this value right here, the callback function is fired and we, I
don't know, add ten to this accumulator.
Then when we get to this element and we fire the callback function, it will start off being ten and
we could add another ten to it.
When we come to this element, it will start off being 20.
So it remembers that value each time we fire a callback function for each individual element.
So we're accumulating values if you like, and for each iteration we can edit that value.
It's a running total, but that value doesn't have to just be a number.
It could be an object.
And for each iteration we could add a new property to that object, or we could change a property on
that object, etcetera.
So let's keep it simple and let's just make it a value.
And what we'll do is we'll check if the current score for whatever the item is and that's what this
is, by the way.
So as we iterate through, the value is current.
Okay, so we'll check if that current variable is going to be over 50.
If it is over 50, what I'm going to do is take this value and add one to it.
So we're counting the number of scores over 50.
So we'll say if and then current is over 50.
If that's the case, then we'll take the accumulator and just say plus plus.
So we're adding one to that.
Now, at the end of the whole thing, what we do is return the accumulator.
So for each callback function, we're returning the value that this is at the end of that iteration
and then that's the value that gets passed into the next iteration up here.
So we keep on passing it in.
Now, this is okay, but there's one thing missing because how do we know what this is to begin with?
We don't specifically say it's zero or it's an empty object.
So that has to be passed in as a second argument to the reduce function.
So after this function right here, we can pass in an argument which is the initial value of the accumulator
and I'm going to set it to zero.
So the first time this callback function fires Assisi will be zero.
And then as soon as we add one to it, it will become one, then it will become two, etcetera.
Every time we add something to it.
So then now let's log to the console.
The result This should be three because there's three scores over 53 we get right there.
Cool.
So let's do another example.
What I'm going to do is comment that out and I'm just going to copy some new data and paste it down
here and we need to comment this bit out as well.
Now these scores are a bit more complex instead of just numbers.
Now we have objects, but it's still an array of objects and each object represents a particular go
on a computer game or something like that.
So in this case we can see the player was Mario and he scored 50.
In this case, the player was Yoshi, he scored 30.
In this case, Mario played again and he scored 70.
And in this case, Krystal and she scored 60.
So what I'd like to do is use this reduce method again to iterate this array.
And I want to add up the total score by just Mario.
So essentially it will be this and this.
Now this is easy for us to work out without doing the reduce method because we can see this is 120.
But if we had, you know, 200 scores and Mario had 30 different goals that we want to tot up, then
that's where the power of the reduce function would come into play because it's much easier then than
just cycling through them ourselves and trying to add them up.
So let us now say const Mario Total is going to be equal to the scores, which is the array dot reduce
and we pass our callback function in here, we'll take the accumulator and also current and.
Inside the callback function.
We need to manipulate the accumulator each time around.
But first of all, we'll set this to be zero to begin with.
Okay, so in here we need to check if the player of the current element is going to be Mario.
So remember, current represents each item as we iterate the array so we can say inside here if current
dot player, which is the player property is equal to Mario, then we want to take Mario score and add
it to the accumulator.
So we'll say ACC is plus equal to current score.
Does that make sense?
Because we're taking whatever the accumulator currently is.
If the player is Mario and we're adding that person's score right here, the score property to the accumulator,
then at the end, remember we need to return the accumulator.
So now let's try and log out Mario Total.
So console dot log and Mario Total.
All right then.
So if we head over to the console, we can see 120.
Now if I was to just add a few more of these, let me just copy and paste those down here a few times.
You can see if this starts to get a bit more complex and we can change some of Mario's.
So we'll change that.
We'll change this to 90 and we'll change this 1 to 80, save that, and this should still do the same
thing.
Let's come over here.
Now we can see the total is 490.
Okay, So there we go, my friends.
That's how we can use the reduce method to return a single value.
And that value is based on this accumulator, which we can edit as we iterate the array.
