hello welcome to another video that I'm
in I just leaked so many videos but this
is another one I'm actually really quite
excited about this I'm going to talk
about in this video something called a
higher-order function as if you followed
my tutorials and things over the years
I'm kind of like an old Java programmer
well probably the language they've
programmed the most in is Java and
specifically processing which is a
development environment built on top of
Java that I use and so I really was
taught and have learned and have
practiced like object-oriented
programming to programming I'm just
going to programming a burning program
but there is this thing called
functional programming which is very
popular and interesting and I want to
dip my toe a little bit and javascript
is a language where functions are the
sort of primary building block of the
language and there's lots of thing and
of course you can do this I know in Java
now with like Java 72 whatever version
is now one hundred and thousand 51 but I
want to look at this idea of a
higher-order function and kind of kind
of wade into this idea of functional
programming a bit more
now this video is appearing in my es6
playlist even though some of the stuff
that I'm gonna use is not es6 specific
but it's useful to have it here because
I'm going to use in these tutorials also
this particular syntax known as the
arrow syntax or the arrow function and
I'm going to use that not only available
in JavaScript es6 and if you are
confused about what the arrow function
is magical tutorial about that in a
separate video and I think I talked
about es6 for cs5 which are different
versions of JavaScript there okay so
what is I'm going to attempt to define
what a higher-order function is and I
would I like to think about it just like
well there's a function I could define a
function like this function hello and
then I could write console.log hello in
there and that's a function it's a named
block of code that I can execute by
calling the name of the function there's
lots of ways to declares functions in
JavaScript in but he has six syntax and
I could say var hello equals or let
Hello equals are constant
equals so many possibilities this is not
a higher-order function because it is
just a function on its own on the level
playing field of functions a
higher-order function is a function that
kind of has two levels of functions
through its are more than two in other
words what if this function expects as
its argument another function so you're
calling this function and sending it a
function that's a higher order function
or what if this function actually makes
it function or returns one back to you
somehow
that is also a higher order function so
any function that either takes a
function as input or sends a function
out as output that is known as a
higher-order function and you can do all
sorts of cookie interesting things that
can that look kind of fancy that could
be fun but also can make your code easy
to write so I the reason one of the
reasons why I'm doing this is there are
a lot of higher-order functions
available for JavaScript arrays and
those are really useful let me name a
few of them map sort reduce filter so in
the subsequent videos that are following
this one I'm going to start going
through these functions and it's my goal
to actually then tie these functions
into a particle system example because I
want to look at well you know I can look
at the how these stuff works and just
put numbers in it but what might be an
actual real life scenario in the sort of
creative coded graphics world that I
might use them in so this is the whole
landscape here I'm gonna start with just
basic higher-order functions I'm gonna
write a couple like goofy trivial
examples I'm gonna stop let me come back
and start going through higher-order
array functions and then try to like tie
that into a particle system that's my
plan sounds fine
I think it's okay alright so let's try
to look at this idea of passing a
function to a function or returning a
function from a function so let's I have
a sort of empty bit of code here I've
got the p5 library loaded I don't need
it for a minute demonstrate but it has a
nice set up function which is like the
window.onload function so i like to have
that available to me i don't actually
need to do this and set up a
going to anyway alright so let's say
we're to define a function and I'm going
to call it sing and in the function I'm
going to say la la la la and then when
I'm done okay let's just do that
okay this is my function sing oh I got
to making it I got to make it in the
global space so I can call it from the
console the set of functions totally
irrelevant at this point I know why I
talked about that so I have this
function called sing so now I'm gonna go
over here and I'm gonna say sing song so
I'm Bobo go sing ah I reload the page
I think la la la la la all right now
craziness what if I were to define what
if I were to say hey this function takes
as an argument another function and that
might be called like a callback and when
I finish singing I execute that function
so you can think this might this this is
might be code that you've never written
yourself but it's code that's happening
all the time in JavaScript libraries
that you use because a lot of times you
say hey load this JSON and here's a
callback or do this but apply it with
this function so this is the idea of if
you could send in a function right the
parentheses aren't here right because
this is actually the name of a variable
the name of the function it's a
parameter to sing is callback and if
that is a function I can execute that
function here so in other words I could
say now in setup I could say I could
make my own function sing what would be
so what something besides singing check
it - meow and I'm gonna say console dot
log meow meow and then I'm gonna say
sing meow
actually let's just let's do this all in
the car I'm gonna put this here and then
I'm in here write one thing now what
happens if I call sing it says callback
is not a function so I didn't pass that
parameter so I have to now say sing meow
then
I'm giving it the meow function so sing
lalala and then it executes that meow
function now I could be sort of
thoughtful about this and I could say
like oh only call the callback if it
exists what did I get wrong here whoops
so now I could do some error checking in
my function so I could do this and it's
okay for me to say sing it just does
lalala
or I could say sing and then act when
you're done execute meow and if I wanted
to be really really really careful about
this I think I could say as long as it's
an instance of a function who knows if
that's right so I could say sing meow
and then sing and it would still work so
this is this idea of being able to call
a function from a function okay I should
also mention that I'm kind of writing
this code in a very long-winded way
where I'm naming all of my functions and
this is not what you would typically see
as JavaScript programmers do and
eventually I'm gonna be like peeling
this away and having anonymous functions
and eventually getting to this arrow
function again so for example just to
make this case clear probably in another
way that I might do this is say oh I
want to call sing and then I just want
to add pass in another function to it so
you can see here this is me calling the
function sing and giving it an argument
which is all this code which is a
function definition with no name an
anonymous function and this might look
even more clear to you if I do this
right you can sort of see like this is
the whole argument being passed in
between those other sluggy those other
two parentheses so that's a whole
function definition just being passed
right in and you know spoiler alert I
could kind of write it like this with
arrow but we're gonna get back to that
later
we're gonna come to come back to the
arrow function later okay so one more
thing let's try so this is a function
that you're passing a function another
thing you could do is I could have a
function return a function some might
even call that like a function factory
or something you love factories okay so
let's get rid of this and I'm gonna use
a pretty standard exam
it's probably one that you would find in
countless other tutorials and I'm gonna
write a function called multiplier I'll
show you why this is useful and what
this function well first of all let me
just quote write a function called
multiplier and give it an argument
called factor given an argument called X
and an argument comes factor and I'm
gonna return x times factor so this is a
general function that's just going to
take two numbers and multiply them
together so if I load the page here I'm
gonna say multiplier X 5/2 and what
should I get nothing
oh I spelled it wrong multiplier 10 if I
say multiplier 3 comma 927 make a little
calculator here okay but what if I want
to actually create different functions
that multiply by different factors so
instead of instead of having X here what
if I just said return a function that
receives X and multiplies it by some
factor look at this the multiplier
returns a new function that uses the
factor that was passed in whoa so in
other words what do I mean by this I can
now say whoops and I'm just using the
console here so let me get more space
here let me make this a little bigger I
can now say let let doubler equal
multiplier - whoa what is doubler now
right I didn't get it is it a number
dime multiply something No
I created a function I created a
function that uses the number that
returns x times two so if I were to say
let Tripler equal multiplier three now
I've created a function right we can
actually just double check let me just
say whatwhat's doubler is look this is
what doubler is now it's still showing
the factor here but really inside that
function it's holding on to that number
two that was passed in so in other words
if I were to say doubler four what am I
going to get
no I messed something up what did I do
wrong
oh it doesn't say oh this has to say ah
oh oh I have a mistake look at this I
wasn't paying attention to what I was
doing this is a fine mistake for me to
have right it didn't return anything
undefined
I forgot to also have the return here so
this is kind of weird looking but this
multiplier function makes a function
that returns X x factor so now if I
start over here and I say let doubler be
a multiplier create a function with a
factor of two and let Tripler be a
create a function with a factor of three
now I can say doubler four and I get
eight or I can say Tripler four and I
get twelve okay so this is this idea of
higher-order functions Oh all right
actually two things that I forgot number
one is this can also be this is also an
example of a closure meaning that when
you create this function by passing in
factor this like kind of close your
bubble lives on and the value of factor
is retained even though it's sort of
technically a local variable just to
this function multiplier so this is a I
have another video all about JavaScript
closures and this is an example of that
as well and then I forgot this is a case
where I can use the arrow function to
make this look you know nice and clean
and simple and I'm very torn about this
because on the one hand the arrow
function can make code look very cryptic
and confusing on the other hand it can
really simplify things so let's let's
talk about that for a second so what
what does the arrow function do so this
is actually if I just rewrite this
function down here this is what I've
written so the arrow function you can
watch my arrow function tutorial allows
me to first of all instead of saying the
word function I can delete the word
function and I can put the arrow here so
this is a function definition with one
argument X and this is the code that the
function executes now interestingly
enough if there's only one argument X I
don't need the parentheses so if there
were two if this were a function that's
like multiplying two things I have to
keep those parentheses but if there's
only one I don't need
so now I've simplified it like this it
also so happens that if there's only one
line of code in that function you don't
need the curly brackets the curly
brackets can be assumed and I can now
write it like this and guess what if
there's only one line of code the return
is assumed so I can actually get rid of
this return so actually this is a
completely identical way to write the
function up here so what this can
actually be now is this so this is what
I mean this you might look at this to be
like what in the world is it doing but
after you use and I can speak from
experience because arrow functions were
brand new to me like less than a year
ago but after you used them more and
more it starts to seep into your brain a
little bit like whether you're doing
list of mental gymnastics translate it
back or it's just kind of intuitive but
there is a nice quality to saying like
almost like X transforms into X x factor
and it's it's confusing is that that
return is returning a function but that
function is returning X x factor so
let's take a look hopefully I got this
right let's take a look at this and I'm
in a refresh here and I'm gonna did I
save I'm gonna save and refresh and and
what I'm actually gonna do is let's just
put this in the code let's just say let
multiplier equal oh sorry let doubler
equal and let's get rid of this should
not be here let double or equal and I
can I don't need the setup function
being so silly
let double or equal a multiplier to let
Tripler equal multiplier 3 oh and I
gotta have the eye there okay so now I
made those two multiplier functions
refresh okay double or four I get eight
and Tripler four I get twelve so
wonderful look at that lovely use of the
arrow functions and higher-order
functions so what I'm done now with this
video what I've really just discovered
here basically is that a higher-order
function is a function that either we
see
function as a callback and if you're
writing a JavaScript library and you're
asking people to call functions that
happen asynchronously this might be
something you provide as an option okay
if you send me a function I'm the
librarian I will execute that function
for you to let you know when I'm done so
that's a very useful technique that
you'll see in p5 and all sorts of
JavaScript libraries so receiving a
function as input or returning a new
function just like I demonstrated with
that multiplier function so that's the
basic idea now I am NOT going to write
my own higher-order functions right in
the next videos I'm just gonna make use
of some useful ones that happen to live
in the JavaScript array object so I
don't know which one I'll start with
tune in to the next video to find out
wound suspense and I'll see you then
thanks for watching
[Music]