JavaScript Array Reduce Method Practice in 5 Minutes

so you want to get better at javascript well arrays are an essential part of javascript so in this video let's look at the array reduce method in about five minutes so first off if you're new to the channel welcome i do weekly videos on web development topics so if you're interested in more of that content make sure to subscribe so you can see it when it comes out all of that said let's dive into arrays all right so this is a series on javascript arrays and i've got a github repository here that inside of this github repository has a readme on what we'll work on and then a worksheet that you will check out to be able to use below so inside of that worksheet you'll have some sample star wars character data that we're going to work with and we're going to walk through in these different videos mapreduce filter sort every sum and then maybe we'll add some no pun intended extra videos to this on the end if you're interested so let's go ahead and dive in all right so i've got the array functions practice repository checked out and inside of the worksheet.js i've got the array here of star wars characters each one having a name height mass eye color and gender properties and what we're going to do is come down to the reduce section and basically with reduce of arrays you're wanting to iterate through each item in array and get some sort of ending result so an example of that would be what if we wanted to calculate the total mass of all of these characters we'll do that in a second we want to iterate through each one add the total mass for each one to get a total mass and the way we do that is we start off with some sort of accumulator some sort of a value that we're going to build up or accumulate on so this is an accumulator pattern that you can look up in any programming language but in this case the simplest one is starting off with zero being the accumulator and then adding on the weight for each individual character so let's take a look at what this looks like let's create a total mass property and let's take our characters array and call dot reduce and what reduce will do or what it takes is the first parameter is a callback function that gets a reference to the accumulator and the current value so i'm going to make this an arrow function in here and the second parameter that it takes is the initial accumulator so in this case since we're building up a number the initial value should be zero and then we'll have access to that accumulator in here as well as the current item as we iterate through characters so what the way this will look is we will take our accumulator and then we'll add on the cur dot mass so whatever this is it starts off at zero we add on the mass of the first one then to that number we add on the mass of the second one and for this to work we have to return the new accumulator the uh updated accumulator and then that's what gets passed into here the next time around so let's do a uh try to log this out and see if this works so where is our total mass and then i'm going to use nodemon which i have installed on my machine to do a live reloading server here so i don't know right offhand if 346 is correct but my code looks correct so i'm going to go ahead and assume that is so it looks like this is working well now one additional thing we can do or one less thing we can do is since this is a one line return we can actually ignore that uh return keyword and then the brackets for the function and the semicolon as well and now i'll get a little bit of formatting here this is uh the same thing it does the exact same thing you see we get the same number down here but it's a little bit of a shorthand really cool with es6 arrow functions so uh then what if we wanted to get the total height well this is going to be the same concept we're going to take our characters and reduce them and then we'll have our callback function with accumulator and current and then what do we want to return well we want to return accumulator plus the cur dot height and then again the second parameter we pass in here is the starting value of the accumulator which is zero so let's do a log of this so we should have our total height and total weight our total mass and total height so you see 712 for the total height there so now what if we wanted to do something a little bit trickier what if we wanted to know uh the number of characters that have a certain eye color so this may be a weird name here but characters by eye color and what i really want is for this thing to be a map or an object that has a key of the eye color and then a value of the number of characters that have that eye color so this is a pretty cool use case for reducing a little bit more tricky so let's do let's go ahead and stub this out with our reduce we'll have our callback function with the accumulator and the current and i'm going to make this a full function here so i'm going to make this a full function and then give an initial value of an empty object and then we'll say if the accumulator already has a key of current dot i color so if we've already seen that eye color before then we want to take whatever value is in there and then update it so we'll say accumulator with that value or that key so the accumulator object with that key we're going to set it to what it was before so the existing value so we'll kind of type out that same thing and then add plus one to it so we're basically if we are if we already have this eye color set inside of this object we're going to increase it by one otherwise we are going to set the accumulator at with the value of eye color to be one so that means we've seen this eye color one time now one thing we could do is we could take color and put it in its own variable or the eye color so we could do curve.i color that will save us a little bit of effort in here so let me go ahead and replace these all right and then we can also add a little bit of shorthand to just say the accumulator with that color we can just do a plus plus so we can just do plus plus here that will add one and then at the end of this we want to now return the accumulator that should be on a new line so we start off with an empty object and then as we see a new eye color we add it to that object with a value of one if we've seen that eye color before we just increment that value by one this is a pretty common question that you can see in javascript interviews that sort of thing where you're trying to associate something with a count and a map or an object is a great way to do that so let's do a log here of the characters by eye color and let's just see what we get well now you can see hopefully this makes more sense maybe i'll zoom in a bit to see that this is an object that has keys of blue yellow and brown and you can see that that comes back to these colors up here and you can see that we do have two blues which are counted appropriately uh down there in the resulting uh in the results of the accumulator uh or the reduce function all right so let's do uh let's do one more here what's uh let's do a total uh name characters and this will be our characters dot reduce uh we'll have our accumulator and our current value and what we're wanting to do is take our accumulator and add on the current dot name dot length so the length of that name will add it on to the accumulator and then we'll start off with zero as the initial value for the accumulator so just a number accumulator pattern there and then let's log out our total name characters and 52 looks reasonable so it looks like that is working all right i hope you enjoyed that video and you feel like you're getting better at javascript arrays if you're interested in learning more about arrays make sure to check out one of the other videos in the playlist and if you have any additional questions or topics in javascript you'd like to see covered feel free to leave a comment below or check out the link to join the learn build teach discord server and you can ask and share there as well thanks again for watching the video and i'll catch you in the next one

Channel: James Q Quick

Views: 12,333

Rating: 4.9761548 out of 5

Keywords: javascript array reduce, array reduce, javascript arrays, javascript array functions, javascript array methods, web development, vanilla js, js, learn javascript, learn javascript arrays, become a web developer, js arrays in 5 minutes, arrays explained, javascript tutorial for beginners, web development tutorial for beginners, javascript tutorial, web development 2021, array map explained, javascript array practice, web developer, javascript programming

Id: 0aJ65a6LsSc

Length: 8min 1sec (481 seconds)

Published: Wed Jan 06 2021