Hi everyone and welcome to another code cast about ES five methods. And in this podcast we'll briefly talk about the reduce method which will execute a callback function on each element of an array and it will reduce the array to a single value. So before we start, um using the reduced method, let's take a brief look at the syntax because the syntax will give a lot of hints on how to use the method. So I have reduced. And then to reduce method takes a callback function as an argument and an initial value. Okay? So the callback is a function which is going to be executed for each element of the array that reduce is being applied to and the initial value argument is optional and it's passed to the reduced method and it's the initial or starting value if needed. Now the callback function which is passed to reduce can intern take up to four arguments. So let's discuss those number one. You have the cute new leader. Okay. And this is the total of all the returned values from the callback functions which is applied for on each array item and then we have value and this refers to the current value that is being processed in the race. So current about you. Oops. And maybe I should just not have the keyboard shortcuts right now, after that we have the index and index refers to the current index of the item which is being processed in the array. And then we have a race. So this is the name of the original array that produce is being applied on. Right? So let's go ahead. And now do an example a simple example to see how the reduce method can reduce all the values of an array to a single value. So let's suppose I have an array called number array which is equal to a bunch of numbers. So some random uh numbers. Right? So have these three random numbers and I want to apply the reduce method to these so that all of them are reduced. The array is reduced to a single value, which is the addition of all these array items. Now reduced is not going going to mutate or change the original array. So let's make a reference to the reduced array by declaring a new variable called reproduced array which is equal to number array. And then the reduce method applied on the # three. And after that, remember that we have to pass in the um compulsory callback function out here in the reduce method. So I am going to set this up like so and my function is going to take as arguments and accumulator and value. So let's reduce this to a single number and I will show you how and I'll explain what is going on in just a second. Okay, so let's see what's happening here. Now. The reduce method is applied on the number array and it's going to execute a callback function on each element in the array and add the items which is going to result in a total and we can check the total by going a console dot log, um reduced array. And Let me actually just do this uh show you in the browser console. So if I go to my browser console and then there you go. So I have this total of 32,730 out here. And this is we get this when all the items In the array are added to one another. Right now, we could also specify and optional, starting initial value. So for example, let's have an initial value after the callback function. So we have an initial value which refers to this starting value. And For example, let's say it's 100 right now, what this will do is that it's going to add an initial value of 100 to the accumulated total of whatever we got out here, which was 32,730. Right, so let's try this out with the accumulated value. So once again I can just maybe Refresh and do that and there you go. Now we have a 30, So we've Added 100 and initial value of hundreds to the accumulated total. Now, besides addition, you can also perform other math mathematical operations like subtraction, multiplication and so on. You can also maybe use, you know, reduce method to add all the values of some property in an object. So it's pretty handy and we can take a look at this other example. So let's do another example. And for example, let's see I have some data here is equal to an array and this is going to be an array of some objects. So with me put some objects here. Okay, I think. Okay. Right. So that's my first object. And let's just go ahead and make a couple of more objects with three key value pairs each inside this array. And I won't change much here. And let's make another object in this race. So, so just changing the property, the values for these properties so that um they look a bit different. Okay, So I have these three objects in the my data array and each object has three property value pairs, user name, village and points. And the goal is to sum the values of the points property in each object. And for this we can use the reduce method. Remember reduced method is applied on a race and even though these are objects, they are still in an array. Okay, so let's go ahead. And let's say, well let points is equal to my data and then apply the reduced method on the my data array. And the reduced method it takes as an argument, a callback function. And the callback function will take the accumulator and the value of the current item in the array being processed as arguments and here we are going to return the accumulated result, plus the current value being processed in the array right now, one thing to remember is that we're dealing with objects so the key or the property in our objects which corresponds to the numbers that we want to add all the points is the points property. So value dot points. So let's take a look at this. Now the reduced method is called on the my data array. Right? And the callback function takes two arguments one, the accumulator which is going to represent the sum total as we are iterating through the array. And the second argument is the value which represents the current value of the array. And this is inferred by value dot points. And for each object in the value dot points will be summed and assigned to the variable points and we can console dot log points to check if what we're doing is indeed correct. So once again I'm just going to go ahead and go here and there you go. So now I have the accumulated a total of my ah of all the points, but there is an issue here, so you can see 7000 plus 170. 100 then 7100 plus 4 1050 is about 5 8050. And here we think this thing going on. So that is not correct, which means we do have to do some um debugging. And the issue here is that when we're dealing with the properties and objects, we actually have to start out with an initial value of zero. Right? So now, if I go ahead and try this once again In my console, you should see the correct results now, which is 8550. So don't forget that um starting value out here. Right, so you need an initial value of zero and that's pretty much it for the reduce method in another podcast. What we'll do is we will change the filter and reduce and map together.