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]