welcome back baby or welcome for the
first time who knows this video now I am
going to talk about these higher-order
functions it's really just kind of me
like trying to sound smart make it son
fancy these are just functions that it
can call on arrays in JavaScript so you
might really think of an array as like
oh alright it's a list of stuff it's an
ordered list of things like it might be
an ordered list of numbers like this and
I can iterate with a for loop I can you
know use I could that kind of thing I
could iterate with for loop like how
would I calculate the sum of everything
in this array I would have a for loop
and I'd start with the svet variable sum
equals 0 and then I'd add the first
element in the second element the third
limb so what I'm saying is that these
higher-order functions these array
functions allow you to manipulate the
array as a whole all in one fell swoop
and you actually have seen this before
if you watched it in my videos for
example push this is not a higher-order
function because it doesn't receive a
function as an argument but it does it
does manipulate the array so if I say
push and I pass in 7 then it will add an
extra element to the end of the array
now what it's actually doing behind the
scenes or all that that's the topic of
discussion for another time what I want
to look at is let's look at these four
so where do these come from and what do
they do so over here this is the Mozilla
Foundation web Docs there are lots of
places to find resources about what the
various things available in the browser
and JavaScript are but this is the
JavaScript array object and so the array
object this is how you might think of it
usually it's got two things like a
string and you console.log the length
and you get two but if i go over here to
the left i'm gonna see oh look all these
other functions for example and they're
listed here is array dot prototype push
now I do have a video about what the
prototype thing is luckily what I'm
doing now is I'm living in this world of
JavaScript es6 the version of javascript
six and you don't really have to mess
with the prototype too much and that's
the mode topic for another time but if
but this is where I could find the list
of the functions so if I click on push I
would find like oh look this is what it
does if I say animals dot push cows now
I have another element in that array
called cows a string called cow
which is at the end so let's let's try
to decide what should we do first let's
look at the map function okay so to
demonstrate this I'm Jo and this is a
little bit silly and I know those are
you have more sophisticated workflows
will complain but I've got my text
editor here and the browser console up
here so if I were to write something
like an array I'm gonna call it let
valve equal you know four eight one two
nine and I were to say console.log valve
hit save and go up here and hit refresh
I see it there okay so this is gonna be
my workflow right now to demonstrate
type some code down here refresh and see
the output up here so what if what I
want to do let's see what do I want to
talk about first let's do we're gonna do
the math function first and uh the chat
reminded me that there's also a function
called fill which I could I mean there's
just so many more so you know the point
of this is for me not to like teach you
how every function works but to get the
basic idea and then you can kind of
learn to and go through and read the
documentation to figure out what some of
those other functions are but anyway
back over here so what the map function
does is it allows me to to pass a
function that's applied to every element
of the array so for example if I were to
write a function and call it doubler and
it gets in x and i say return x times
two then I should be able to say Val's
dot map doubler and then console dot log
valves now I'm going to leave all this
here so let's look at what's going on
here I have the array I'm gonna look at
it then I'm gonna define a function
called doubler then I'm going to pass
doubler via the map function to valves
so I should see the array have eight 16
- 4 18 no it's not going to do that
that's it because I've made a little
mistake here but let's take a look so
now I'm gonna come up here it's the same
gonna come here hit refresh we'd say
look why I got the same values both
times how come it didn't change well one
of the things that's important to note
is that these functions they all behave
differently but these functions return a
new
arrey so it doesn't actually change the
values in the original array it creates
a new array and then puts all the double
values in it are the new values that are
applied from that function
oh my god they just break my classes now
you can leave it that's good these are
new too I really don't want to break
them those lenses are old but I broke my
glasses so I popped the same frames
again okay sorry there's gonna be more
ads you're gonna see on the YouTube
videos I broke my glasses after classes
are expensive okay what was I talking
about
alright I'm gonna do array so let's look
at what am I gonna do so I could say
something like let doubled equal valve a
blur and now I could console.log look at
doubled and let's take a look at what
that does Oh see now there we go I've
got all the elements of the mouse's in
the way all the elements doubled and if
I wanted to use the same variable you'll
see this very commonly I could say Val's
equals Val's dot map doubler so let's
look at that and now I'm gonna say
console.log Val's whoops and I got a cup
here and there we go
so this is now let me give myself a
little bit more space here for the code
this is now every now everything I need
right I have an array I have a function
that does something to a number and then
I can say take that function and apply
it to every element of the array and
give me a new array and overwrite the
previous variable with that new array so
here's the thing this is great to learn
it's really it's useful it allows you to
write code kind of simplified but it's
simplify this really down by using the
arrow function in a second but I should
note that from what I understand this is
not necessarily high performance so if
you have super large arrays you can
imagine like recreating a whole new
array passing a function as opposed to
just using a for loop using a for loop
might actually
run faster most of the stuff that I'm
doing this doesn't really matter you're
working with small arrays and software
web projects you know these higher-order
functions are gonna make your code nice
and also here's the thing this is one of
the reasons why I'm covering this it's
like you think what were just me living
my life I would just be using for loops
never bother with any of this because
that's wrong I'm wrong I know I'm wrong
but that's some of them I'm sort of
stuck in my ways but you you won't be
going to tutorials you will be going to
open-source projects this is what people
are doing now they're using these
higher-order functions and they're using
the arrow syntax so you want to get some
facility with it so as you read other
people's code and you contribute to open
source projects you can participate with
this new stuff all right now let me do
one more thing to this let's get the
arrow of syntax in there so first of all
we know that I could improve not improve
this but I could make this an anonymous
function so I could put this in here so
now this should be the same exact code
I'm gonna refresh here still works but
now it's an arrow function so I don't
have to say I don't think it's a
function I put the arrow it's just one
argument so I can get rid of that it's
just one line of code so I can get rid
of that it's just one line of code so I
can assume the return statement and oh
look at this now look at this oh so I
have to admit I really do like this
something lovely about it right I have
my array and I said hey just double
everything you know take X and arrow it
over there two x times two so now if I
save this here and hit refresh ah I made
a mistake oh I have this extra this
semicolon here is actually kind of
unnecessary and I guess it caused a
problem and there we go so look if it is
even nicer that time I call it made it
kind of blue so this is wonderful map X
goes to x times two
while we're here let's look at fill
really quickly fill will take an array
and fill it with values so I'm gonna
comment this out what if I were to say
Val fill and
zero console.log bells and let's see
let's see what happens ooh oh that
actually so interestingly this acts on
the current array so the fill function
does not create a new array in return
but acts on the kernel right what if I
were to say fill random 10 am I gonna
fill this whoa yeah am I gonna fill this
with a random values oops gotta come up
here random is not defined because oh
yeah I'm just to say math dot random I'm
not in p5 world in this video it'll say
math dot random am I gonna get a new
random value for every element of the
array oops shoot no look at this point
one four point one four I mean you'll
have to trust me point one four point
one four those are all the same values
because note I'm executing that random
function and and picking a random number
and then filling it with that same
random number but this fill is a higher
order function I wasn't actually using
it as a higher-order function I was just
giving it a number so I wasn't passing
in a function if I wanted to pass in a
function
I don't even I'm not I'm just gonna go
straight for the arrow syntax here X and
I'm gonna say math dot random times 10
and I'm gonna say math dot floor in here
because I want to just see some integers
right look at this ooh did I get this
right so this is now an arrow function
fill each value X by executing math dot
random x 10 and then floor let's go up
here Oh what happened there okay there
might have been a weird edit point there
because I went off I kept going like in
this like magical thinking I was like
making up features of JavaScript and I
started trying to explain how this is
not using fill as a higher-order
function I'm just giving it a number but
what if I gave it a function fill
doesn't work that way so this is where
map does actually come in if I wanted to
fill all of these with an individual
random number I could do that by saying
map X yes so
this would give me map this function of
returning a random number if I hit save
here and hit refresh
whoa-ohh and then of course I forgot
that I do need to return the new array
and there we go now you can see they
each have a different number now I
should say there's a little bit weird
like if I wanted to create an array of
random numbers I wouldn't I wouldn't
like start with like a fixed array like
what if I want to have an array of a
hundred numbers that are random well one
thing I could do is I think I could just
say new array 100 and then hit refresh
here no it's empty so this didn't work
right it's just empty times 100 so this
is unfortunate like even though I made a
new array with a hundred spots because
there's nothing actually there I can't
start to process it this way so I
actually need to use fill first so I can
I can chain these so I could say let me
fill the array with zeros and then map
it now I'm gonna so this should work now
and this is getting a little convoluted
why do I care about doing this I don't
know you can determine you just go to
the next video I'm gonna keep going with
this just for a little bit longer so now
I'm hit refresh now I have an array with
100 random numbers but look at this you
know it's interesting about this I
created a function and I think this also
doesn't really matter right I could just
do this and it works right because I
don't need that I'm not basing it on X
but incidentally what is this a function
this is a function that returns math dot
random well what is math not random it's
a function that returns a random number
so I could actually do this just right
math dot random right I could name
that's a named function don't execute it
just pass it the name function so this
is a way of creating an array with a
hundred elements in it that are all
random I think this is gonna work all
right yay aha
sound effect that doesn't work right now
okay there was a weird edit point there
because the chat and live chat that's
going on while I'm recording this gave
me some helpful tips here so a couple
things number one is if I you know I'm
kind of like the kind of person who
wants to just write everything the thing
you could do in one line of code in 15
lines of code
but if I wanted to keep going with this
I could in fact I don't need to have
valves create a new array and then have
it used here I can just put new array
directly right here and in fact I don't
even need the new keyword I could just
actually say array 100 and in fact
because ultimately I'm going to fill it
with random numbers this zero is totally
irrelevant I could just fill it with
undefined I just got to fill it with
something
map doesn't work unless the array has
filled with something even that
something is undefined so this should
actually work here's an array with a
hundred spots random numbers yeah okay
so now what I'm going to do is I think
this videos going to end I've talked
about fill and I've talked about map I
think I'm going to reduce as a kind of
complicated one so I'm gonna do that in
the next video and I'll start it with a
I'll reduce myself I don't know if
that's worthwhile in the next video as
well I think it's sort and filter I'll
get to at some point as well look let's
look at reduce next thanks for watching
[Music]
you