16.7: Array Functions: reduce() - Topics of JavaScript/ES6

it's me I'm tiny I'm up here in my code what's over here this is the array oh it's a nice array I'm going to be here talking about reduce so I reduced myself to a very small person but I am going to [Music] unreduced myself back to my normal size to talk about reduced hope that was totally worth doing wasting the first 30 seconds of this video for that bit of check ok so reduce this is a really interesting and kind of weirded quirky higher-order functions for arrays and what it what's generally the reason why it's called reduced is let's say I have an array and I want to take this array and I want to just I want to find out the essence of the array as a whole I want to reduce it into one thing so that's what this does now there's lots of ways reasons why you might want to do this but I think probably the simplest scenario to start with is I'll have an array and I want to add up all the numbers in it I want to average all the numbers in it so let's look at how that works with reduce right first let's actually do that without reduce just to just to kind of like get the hang of things here so if I wasn't using reduce I would say 4 let I equals 0 I is less than Val's dot length I plus plus and I would have a variable like let's sum equals 0 and I would say sum plus equal Val's index I and then I would say console dot log sum and I would refresh up here we could see there we go all those numbers add up to 21 now if you've been paying attention to my es6 videos of which this is in a playlist I could also say for let Val of Val's so this is kind of like a kind of like a for each style loop there is actually something called a for each in JavaScript with a little bit different also a higher order function that you can pass anyway but this is saying every Val inside of vowels and oh of course now I don't have that index I would just do this add them all together so this is reducing it a little bit reducing the code a little bit and if I hit refresh I've also got 21 all right so let's look at how this reduce function works and actually before I act write the code let me come down here and let me go and look at the documentation so I'm gonna look at reduce so reduce is a function that has that takes two arguments and there's a way of doing it with one argument which I will get to at some point an accumulator and a current value what does that mean accumulator and a current value accumulator and a current value so this is not reduce takes a function it's a higher-order function so let's write a function that has both it compute an accumulator and a value so I'm gonna get rid of this code and I'm gonna say function and I'm gonna use ACC for short for accumulator and Val for value and I'm gonna say return accumulator plus value hmm okay return accumulator plus value I think this is right oh and let me name this called I'm gonna call this sum now I'm gonna say Val dot reduce some and I'm gonna say let result answer equal that and I'm gonna say console dot log answer I realize I kind of just type this out and I haven't really explained it yet cuz to be honest I'm not entirely sure what I'm doing just yet but hopefully this is gonna make sense that I can back it's gonna work and I can back up and explain it let's see I got the answer 21 okay so what does this do well do you remember when I let's let me go back to my old code I'm gonna just quickly copy this we go back to here what if I actually called this ACC short for accumulator and then set ACC plus equal Val well the accumulator starts with 0 and then every Val is added to it over and over again this is the idea of reduce you give it something that's going to persist over time as it's looping through elem every element of the array and then you can act on that thing that's persisting and the actual value of the array now in this case to to add them both together all I want to do to add a sum I just want this accumulator to always persist and just keep having each Val added to it now what's the weird thing about this is what's the value of accumulator like what does it start with well interesting it enough let's see if we can determine I'm gonna add console.log accumulator in here and I'm probably gonna need a bit more room in my console so I'm gonna do that look at that five nine ten twelve twenty one interestingly enough the first time I ran the code the accumulators value was five this is because I did not provide an initial value for the accumulator so if you do not provide an initial value for the accumulator it will by default be the first thing in the array which is five notice now if in here I say reduce some and then I pass a second fat a second argument so sum is this function that's the hot that's one passing reduce but there's an optional second argument which is referred to as the initial value so if I want the initial value of accumulator to be zero I didn't have to do it for this problem that I'm solving but I couldn't do that here now I'm gonna hit refresh and oh and let's look at what it did notice that it started at zero so I have an extra console.log it did actually it didn't actually bother to run it with the first value because it just started accumulator as that value but the previous time but now it's doing that so just to be make it clear if I say ten right if I start accumulator at ten can take this out what should think about pause and think about what am I going to see in the console refresh 31 right because I added all the numbers starting with ten okay how can i condense this now well first of all I can use the arrow syntax I can get rid of the word function I don't need it to be named and it's one line of code so I don't need the curly brackets and I don't need the return so this actually can now go right here and this is now I'm going to give myself a little more space this is the full line of code I can say hey take this array and reduce it with an accumulator of a starting value of 10 and for each value add that value to the accumulator okay so in this case though if I really just want to calculate the sum which I can call this sum I don't want to start with 10 so I'm going to do this and just to be aware just to say it again this is very important especially once you start having like arrays of objects and other things the accumulator if you don't give an initial value is not starting with like a default value of 0 it's actually starting with whatever the first element of the array is so if you ever seen this code and I'm going to do this soon enough in a future video where this is an array of particles I might want to do something to say calculate the average the centroid of all those particles I'm gonna have to be clever about how I think about doing this ok now they're checking a good suggestion which would be to find the maximum or the minimum of and of course there is I think in p5 I know has the min and Max function is probably a native JavaScript one as well but let's try to do that let's try to find the minimum and maximum using reduce so let's I'm gonna write it out the long winded way because this helps me I'm gonna say fine max and actually this is great because this relates to some of my neural network videos that I've been making where I'm going to have an accumulator and a value okay now if value is greater than accumulator accumulator should equal value right accumulator doesn't have to just be a thing that's you're adding up together you're saying it's just a variable that's going to persist while I'm going over the whole array and value is each one so if that current value is greater than whatever the accumulator is then I'm gonna get then accumulator should equal that value and then I guess do I want to I need to return the accumulator or does that by definition no yes I need to return the accumulator I think so let's see let's take a look at this so let's say let biggest equal Val's dot reduce find max all right so and then let's console.log biggest nine that's the lot now let's put nine in the middle because just to be sure that that's really working because it was the last element nine it still worked so I definitely need to and if I take out this return accumulator yeah I don't get it so of course I need to return that right because the whole point is I am going to return at the end it's kind of you sort of get into that's being assumed that value that persisted over the whole time now how can I reduce this so first of all I can make this as we know an arrow function so let's actually do this and I'm going to put this here now into here so this works this is a little bit awkward looking but this is definitely kind of functional style I'm gonna reduce that I have an accumulator and a value I'm using the arrow syntax and running this code let's make sure this still works I get nine now I could probably use I think it's called a ternary operator if I wanted to be this crazy person who is crazy person who is reducing who's like so if I want to be this crazy person who's like always trying to get the code to be shorter ensure it is shorter let's try to remind ourselves what a ternary operator is so but this okay so this is an if statement if a is greater than B B equals a but it could also sort of think of this as if a is greater than B I might say like return right if it's greater than a is greater than B then a is the the new bigger value otherwise return B is the new bigger value so this kind of statement can be written in with a ternary operator by saying question mark a colon B so I can get rid of hey I felt like what I'm doing today I get rid of this if and these returns and I basically have a value wait this boolean expression if it's true here we got a if it's false here we got B so in theory I believe that I could let's change these actually to a and B which is fine an accumulator and values kind of useful but I could say a greater than B : I don't know question mark a : B I gotta give myself a lot more room here did I get this right oh it's right let's look at this is this really right oh my goodness oh oh this really freaks me out but it's okay it's okay everything's gonna be okay I got too many mouths things everywhere all right let's think about this again I'm taking an array a is the is the accumulator B is the value if value I yeah it's funny because I was thinking about it the other way around cuz I think what I want to do is say if the value is greater than the accumulator then return the value otherwise return the accumulator they're really the same thing but um so let's see if this works I should get nine nine I still got nine so the idea here is that I'm saying reduce this array have about have a variable called a the accumulator persists over time and then look at every value B in the array start with five if B if it's before is bigger than five that's your new accumulator if nine is bigger than five that's your new accumulator which it is if two is no is two bigger than nine knows one bigger than I know I'm left with nine so laughs hopefully this is kind of helping you these are two scenarios now we've now seen where this is like a nice little snippet of code to find the largest value in an array and this is a nice little snippet of code if I put it back to find the sum of all the values in the array and both of these the initial value is can feet is is assumed for example just to be clear about this what if I put 20 here if I put 20 here if the accumulator starts is 20 what am I going to see 20 and then the sum is 21 because right so it's gonna be 20 because none of the numbers are bigger than 20 so this could also be a test like hey find me the maximum value in the array but if nothing is bigger than 20 just stick with 20 so but if I said if I said 8 here I'm gonna get 9 right so this initial value is assumed to always start with 5 but unless you explicitly initialize into something else as the second argument to the reduced function okay so boy I don't know how I feel about these functions but at least I've covered them I've tried to explain them you should let me know in the comments because I don't know I felt pretty good about nap it felt like if you're watching that video I've made sense you could find use of it this reduced one is really confusing and it takes a lot of practice especially as we like condense it short ensure with the arrow function so let me know how that goes I'm going to use it with a particle system in a future video that will hopefully be linked from here somehow in a magical way so that might give you more of a sense as you see it used in a practical scenario where you're actually doing some graphics and animation so next video I will talk about filter [Music]

Channel: The Coding Train

Views: 104,878

Rating: 4.9287643 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp nyu, es6 arrow functions, es6 arrow, map es6, reduce es6, reduce javascript explained, array reduce javascript, javascript reduce method, higher order functions javascript, es6 tutorial, es6 tutorial for beginners, es6 javascript, reduce js

Id: -LFjnY1PEDA

Length: 14min 39sec (879 seconds)

Published: Wed Feb 21 2018