JavaScript Arrays: Properties, Methods, and Manipulation (Part 6 of 7)

Key Takeaways

so reduce and reduce right are uh one of the harder methods to grasp just because um instead of running an array instead of running every element through a function and then getting a response reduce and reduce right will actually remember the previous response and apply it the next time around and i don't think i can describe it better than the chart over on the mozilla developer network so i'm just going to show you one of their examples here if you look at their example they have an array that is just 0 1 2 3 4 and then they call reduce and then within reduce they are using their callback function and so far in this tutorial we've been pulling these call callback functions out and naming them but putting them inside here is basically the same thing so instead before we have usually called an element here and we've done element and then index and then array but with reduce we have previous value and current value and you can see here that they return previous value plus current value so there is two ways to call reduce you can either not provide an initial value or you can provide an initial value and if you don't provide an initial value then the first time through the first time it runs this function the previous value will be set to the first value of the array the current value will be the second element in the array if you do provide an initial value down here they have one with an initial value of 10 and if they do provide one instead of this instead of the first time through the function instead of the previous value equaling the first element of the array it equals the initial value that you passed in and the current value equals that first element of the array but pretty much if we go through this step by step what's happening here is it calls this function on the on the first positions of the array so like i said here there's no initial value so the previous value zero the current value is one and what we're returning is previous value plus current value so zero plus one and then we can see over here they have the return value listed zero plus one is one and now this return value is saved as the previous value the next time around so now uh if we come down here to the second call this previous value is now equal to one and then the current value is the next value in the array which is two so one plus two is three so that three gets saved as the previous value for the next call so three and then we move on to the next value in the array which is now three so three plus three is six and then six it's carried over to the previous value again and then the next value in the array is four so previous value is six current value is 4 6 plus 4 equals 10. so basically this reduced function is just a way to sum up all these values and if you provide the initial value here and it does the same thing except it just has this one extra call at the beginning that takes the initial value and adds it to the first element of the array and then that return value gets passed in as the previous value for the second call and it moves to the next index so if i pull this up in our examples here we have this array that is one two three four five if i made a function called add values and remember we'll have previous we'll have current and we can also pass in the index and we can also pass in the array so what we'll do here we'll just i'll just show you the example that they had so let's return previous plus current and then let me uncomment out this result variable here and we'll set the result equal to ray17 dot reduce and we will pass in add values and save that and let me output this to the screen and you can see that the reduced result is 15 because 1 plus 2 is 3 3 plus 3 is 6. 6 plus 4 is 10 and 10 plus 5 is 15. so what if we did this with an array of characters so i'll uncomment that and now you can see this reduced result is a b c d e because the first time through it does a plus b and then a plus b which is a b it's passed in as the previous value so then the next time through you have a b plus c and then the next time through you have abc plus d and then you have a b c d plus e so that's how that works and i grouped together reduce and reduce right to show you at the same time because reduce right instead of starting at the zeroth element and working to the right what reduce right does is it starts at the end and it just goes to the left so if i was to do reduce right to these add values then you can see now this reduce result is reversed because it starts off here at e and e is the previous value current value is d so it says e plus d which is e d then the next time through ed is the previous value and then ed plus c is edc then edc plus b and then edc b plus a and then you get uh the entire reversed string as the result so hopefully that makes sense i know that this is one of the more complicated methods that we took a look at um just to come kind of hammer it in let's take a look at doing this with an object so let me uncomment out this and okay now you have to be careful when you're working with objects and this is why reduce can be a little complicated because you might run into some things that you didn't expect so for example if i was to do total age here then okay so we give previous current and then we'll just leave off the index and array since we're not using it so you would think that we could just do something like this previous.age plus current.h and you think that this would go through all of these elements here and see and add up all the ages the sum total total of the ages just like it did for the integers but if we run this bar result let's do array this is array 17 ray17 dot reduce and this is total age and save that and let's output this to the screen okay you can see that the reduced result is not a number so what's the deal here what happened well if we look at this further then you see i have some comments here whenever we first run through this total age function it starts off since we don't have an initial value the previous value will be the first down here where we've printed out the original this previous value will be an object with name quarry and age 28 and the current will be an object with the name john and age 52 so we're saying previous dot age plus current that age so 28 plus 52 that returns 80. okay so that's what we expected but then the next time through the next time it calls total age this return value gets passed in as previous so then we get to the point where it gets to previous dot age plus current dot age but it sees this 80 and this 80 doesn't have an age property so it doesn't know what to do and then that's where it kind of blows up so how can we solve something like this it's just something that we need to be aware of so we can do probably the best way there's probably multiple ways to solve this but probably one of the better ways is just to pass in an initial value of 0 and then here instead of previous.age we could just do previous plus current.h and now what happens here whenever you pass in an initial value let me go ahead and change what my example is down here so let me move some of this stuff around okay so previous will be the initial value of zero current is going to be the first value of our array which is an object with the name query and the age 28 so then we run previous which is zero plus current.age which is 28. so 0 plus 28 is 28 and then this return value gets assigned to previous on the next call so we have previous which is 28 um plus we're not looking up the dot age property so it's previous which is 28 plus current.age which is this object here 52 so this will return 80. save that and then the next time through it'll do 80 plus uh 36 which you can see down here now on in our html it's outputting uh 116. so that's what we expect when it adds up all those ages so that's just something that you have to look out for it might not be you have to keep in mind not only what's going to happen the first time you run through the method or through the method reduce but you have to keep in mind what it's going to be looking at every time it runs through and what previous values you're going to be or what values you're going to be assigning to that previous variable so hopefully that was a good look at reduce and you understand how that works so now let's take a look at the map method