Javascript Array Reduce

welcome everyone today we will be looking at the javascript array method called reduce what this method does is it takes an entire array and reduces it to one single value so this entire data set right here we have an array of objects or an array of avengers with six avengers inside of it so it's just an object with uh can fly property of true or false a strength index of between 0 and 100 and just a name and there's six objects here inside this entire array and what the reduce method does is it takes this entire array and it converts it to one single value so that single value can be you know a boolean so it can be either true the entire array method can return you know maybe a number like 50 or something or a string like hello so basically what it does is it doesn't it transforms this entire array into one single unit value so that's why it's called reduce so it reduces it down to the smallest possible unit and we will be using this method to do this challenge here so the challenge is to get the average strength using the reduced method so remember what the average strength is so all the avengers here having a strength property right between 00-100 so 71.85 so they're all numbers right so we just want to get the average strength that'll give us an indicator of you know what's the average strength amongst the entire team here so for the average all we have the first step is to um we want to do is to get the sum of all the strengths and then what we want to do is then divide that sum right divide the sum by the number of avengers in the array so we'll just do that by doing avengers.length but i will save this step for later so the most important part here is to get the sum of all the strengths so we want to loop through the entire array right and calculate what the sum would be so traditionally what you would do is use the for loop to iterate over this so we're going to do it the traditional way so the old-school way with the for loop and then i'll show you exactly how to do it using reduce okay so the way you would normally start is you would declare a variable so i would just say let sum and you would initialize that to equal to zero right because you want to keep track of the sum as you're iterating through the loop and then you would just say um four and then you want to loop through it the entire array right so you wanna say let i is equal to zero and then while i is less than equal to avengers.length and you want to say i plus plus like that's because this is going to be that's going to it's going to represent the index so this is going to be index 0 1 2 3 4 5. so it's going to go from zero all the way to you know up to six so that's that's when the loop will stop and then to get the current avenger inside this uh index all we have to do is just say const current avenger is equal to avengers and then you want to get the index at i right like that so it'll be for the first one it'll be um since i is equal to zero it'll start at zero and then uh when you're done i will increment by once it'll be one to the first index so the index of one would be this one and then the next one the next one so this is pretty standard right and then what we want to do is simply say sum is e now we're going to we're going to update the variable to sum is equal to sum plus so current avenger and we want to extract the strength property right because this right here is an object so it's going to represent this entire object so we want to get the strength out of it so current avenger does strength like that okay and then you know sum is going to be equal to sum plus current avenger.strength so short way we can just do this is just simply say sum plus equals so it's just going to add on to whatever the current strength is so for the first one it'll you know some will start out at zero and it'll get upgraded or updated to you know the strength of the first ones to say we're 71 so now it's gonna be zero plus 71 and then when it goes to the next one it'll be zero plus 71 plus 85 and then plus 65 and it'll just keep adding it to this variable here until it gets to the end of the array so that's basically how we calculate the sum so let's go ahead and um cancel the log just to see what the sum is the sum is and then sum like that so it looks like the sum is 501 yeah so that's correct so if you just do 71 plus 85 plus all these numbers right here it does add up to 501 so that is how we get the sum right using the traditional four method or for loop you know method so what now we're going to do is use the reduced method so this is the modern and more advanced solution and this is this is what um you know job employers would want and this is you know the modern way and i would highly recommend to learn the reduce method so you can you know be up to date with your skills so using reduce what we're going to simply do is i'm going to go ahead and comment this part out here so we can keep it as a reference like that and i'll go ahead and start by um doing the reduce so reduce is a native array method so i'll just go ahead and do avengers dot reduce like that so reduce is a function like this on the native arrays so that's by because this right here is an array so that's why i can use reduce and the first argument it takes is a function so this function is going to run for every single um element like this and what it's going to do is going to it takes in two parameters and these two parameters are very important so the first one is generally called the accumulator and then the second parameter or the second argument here is usually called um you can call it current so remember this function is going to run for every single element right and the current this is going to assign the current to be equal to the current object right so say it's the first time over this function is running it's going to be um this and then current is going to be equal to that and then current will be equal to this one and like that and i'll do it to the end and that's what current is and so you might be saying what does a queue do or this first um you can call it anything right so notice just like how we had over here then the for loop was running whatever is inside here it was running right for every single element and this sum variable was pretty much um you know this sum variable here was basically being tracked throughout this entire loop right so this sum is um you can also call this the cube so think of the accumulator as this sum variable here so that's what the accumulator does so the accumulator is going to be um actually on the second argument here so in reduce you have two arguments that it requires the first one is a function and then the second one is going to be the initial value of the accumulator so just like we had here we set the initial value of sum equals zero we'll do the same thing here so the second um parameter or circuit argument right here for the reduced method is going to be the initial value of the accumulator so even in our nodes here i can change the sum variable i can rename this and i'll just call this a cube right just like that so you can see the how um the parallels right so this accumulator is gonna be basically the same functionality as this um this variable right here it's gonna be we're going to keep track of this accumulator and just add to it so like i said before this function runs for every single element and then the current we have access to it so before we do anything let me just um do a simple console.log and i'm going to console.log a cube and i'm going to console.log current.name simply like that because remember current is the entire object that it's running through yeah so notice here that accumulator starts at zero and then it does yeah so the current object iron man captain america black widow hulk just in the exact order right so you might notice that why does it say undefined because um what this reduced met with this function does it has to return something right so this return is going to be the new value of accumulator so remember it runs for the first time okay now it needs to know what the before we go to the next one what the new value of accumulator is so similarly um just like how we had in the for loop that we had to update a right we were updating accumulator or the sum we were updating it so the way we update it using reduce we have to actually return it from this function so we have to return so let's say we return just hello so that'll be the new value of a queue just like that so you can see notice it was originally set to zero just like over here and then of course it runs around you know from first to last and then and then accumulator would here get updated to simply hello of course this is not very useful but just so you get the intuition that uh yeah so whatever it returns that's the new value of accumulator so for our problem here we want to keep track of this accume right so this is going to be equal to the sum so basically we want to keep track of the sum right so instead of returning hello what we want to do is um we want to return the new value of accumulator which is simply going to be equal to whatever accumulator is right now right so plus current dot strength so we want to keep track of the strength remember so this is just for testing so i'm going to erase this so notice here that um yes accumulate a starts at zero and now every time the function runs we um so we're going to return whatever the new value of accumulator is and just like how we had it here accumulator is equal to current avenger that strength so we want to do the same thing remember so this is actually the same thing as saying a cube is equal to a cube plus current strength right so that we just did the shorthand but let me just write it a longer way so we can get the intuition so qm is equal to accum plus current avenger.strength so that we're going to do exactly the same thing here so the new value right so return is going to be whatever accumulator is now plus the current strength just like that and so that'll um this so we're not printing anything so that's when nothing happened here but this is not going to keep so hume is now going to be updated to whatever this is and then so the next iteration will be say 85 and then it's going to be accumulator it's going to get added so 65 and then 100 right and then what the reduce method does is it actually returns whatever the result is so when it's done it just returns whatever the accumulator is so we can store that into a variable right here so cons sum or you can say constant result but in our case it is the sum so we're gonna just log and see what that is sum is sum okay so notice that it has the same exact result 501 right and it did exactly the same thing as the for loop area because um we did this exact same functionality so avengers that reduced remember it's going to return one single value that's exactly what it did and that single value comes from whatever accum is and notice what we did is we kept track of accumulator the entire time so the first time it ran accumulator was set to equal zero right and then um so this one now the new value of accumulator is going to come from so whatever it is now so zero plus the current that strength it's a 71. okay so then it's going to run the next time and then the accumulator's value is 71 and then the new value of accumulator is going to be equal to 71 plus 85 right and then whatever that is plus 6500 right so you get the idea yeah so the reduced method can be a little um you know abstract a little complex to understand but all you have to do is remember that we're just keeping track of this value here the accumulator and the current is the current object we're iterating over and accumulator is always going to be um should be updated and whatever you return from here is going to be the new value of accumulator and just remember that in this right here it returns and the accumulator at the very end so when the entire array is finished it returns whatever um the accumulator was at that time so let's just say we didn't do anything like this right so let me comment this part out here and let's just say we returned hello every single time so accumulator starts at zero and the next time it just updates to hello and that's we don't do anything else with it but simply do hello so now um it's gonna return so accumulator's gonna stay at the variable hello so that's what this variable we're printing is sum is equal to simply just a string hello or let's just say five right right so it's just going to be five so accumulator is what we're keeping track of so this is the most important part and reduce so um that's exactly what it returns here so of course we just want to get the strength so the strength the sum of the strength like that so notice the parallels between the four method here and then the avengers are that reduced so the reduced method here right so reduce takes in a function and we're keeping track of just like here we kept track of accumulator and we added to it we updated it here we're keeping track of accumulator and we're updating it like this by returning from this function like that so i'm going to now get rid of this part here so we have some more space to work with okay and we'll save that so now i'm going to comment this part out and use the error syntax so it's even easier so i just did this so you can notice that it is a function that returns a value so now i'm going to use the es6 error function syntax i'm going to say avengers so i'm going to say const sum also const sum is equal to avengers dot reduce like that so i'm going to use an error function so remember it takes in two um two parameters so the first one is a function and the second was the initial value of accumulator which in this case is zero okay so i'm going to go ahead and say um arrow function so since we're gonna have two parameters i'm going to have to put a parenthesis so the first one we'll call the accumulator and the second one we'll call it sum and it's going to be like that and simply all we're going to do is say return so notice that we don't have to do like that and then return so if it's just one line of code we're simply just going to return out of that sort of return um a queue plus so this is actually not some sorry so this is actually the current avenger so you can call it a right so a for avenger so for singular i'll just do a dot strength like that and then remember so this is the function right here so function that takes in two arguments accumulator and then the current or you can just say remember so notice this is current right so we'll we all know that and then current dash strength so i'm going to call it a for short so a for avenger right okay so this is the first argument like that so a function and then remember the second argument here is the initial value of the accumulator so in our case it's going to be zero like that and let's see if that gets us the same exact result some so yeah 501 right the same exact result the sum is avengers that reduce this can produce an entire array into a single value called sum so our challenge was to get the average strength using the reduced method and we're going to do just that so we're going to say const average strength is equal to whatever the sum is divided by the number of avengers right so we can just simply use that by getting avengers that length like that and i'll go ahead and log this so i'm going to say the average strength is average strength like that so i'm going to make some space here so look at that the average strength is 83.5 and that makes sense because if you just analyze these 83.5 is somewhere in the middle of all these numbers right so 100 is in the high end and 71 of the lines on low end so 83.5 does make sense so that's basically the avengers uh sorry the reduce method in a nutshell so just make sure to keep track of that it takes in a function and it takes in an argument so this is and it really matters that you um understand that the accumulator met parameter right here is really important because this keeps track of usually like the sum um or whatever that you want to keep track of and this this stays on you know this variable stays between the entire array so every time you're iterating over it you'll have access to the accumulator method and you can or the parameter right and you can update it and then the second parameter of the function right here is the current value so b so a will be initially equal to this and then this and then this and the entire time you can use the um a to update whatever the accumulator is so that's basically the array reduce method in a nutshell like and subscribe [Music] [Music] you

Channel: Alpha Javascript

Views: 195

Keywords: ecmascript, javascript reduce, javascript reduce tutorial, reduce javascript, sum of array javascript, es6 arrow, array reduce, javascript array reduce example, javascript array, javascript reduce function, higher order functions javascript, es6 arrow functions, es6 javascript, how to use reduce in javascript, reduce javascript tutorial, js reduce array, javascript array reduce method, reduce method javascript, array reduce in javascript, javascript array methods

Id: WFUxKIhyskk

Length: 16min 41sec (1001 seconds)

Published: Mon Sep 06 2021