to do functional programming in
JavaScript you can find the full series
by clicking there in the last episode we
learned about higher order functions
since functions are just values like any
other value in JavaScript we can exploit
that by making functions that take other
functions as their arguments and that is
called a higher-order function we also
learn to use a higher order function
filter we learn that filter is a method
on the array object that takes another
function as its argument and uses that
function to filter the array in this
episode we’re gonna learn about
something new and also called map just
like filter map is another higher-order
function also like filter it goes
through an array but unlike filter it
doesn’t throw the objects away instead
it transforms them why what does it mean
let me show you take a look at this
array you might notice that I’m reusing
the array from the previous video but
that is simply because a race of animals
is very very common in enterprise-grade
programming but the problem is different
this time around we want to get an array
of all the names of all the animals this
is super simple to solve with map but
before I do I want to show you how we
would solve this using a for loop so
let’s check out what this does just so
you see that this just logs out the
names the code is super straightforward
it just loops the animals array and for
each animal it just picks the name
property and its pushes it into the
names array that we create on line 10
now let’s do the exact same thing but
using map instead I’ll comment out the
for loop here and keep it around for
right let’s do this remember that I told
you that map is a function on the array
object just like filter is map will take
a callback function just like filter
does the callback function will be
but here is where map gets different
from filter filter expect that the its
callback function to return a true or
false value that determine whether or
not the item should be included in the
array or not nap will include all items
in the array but instead it expects the
callback function to return a
transformed object that it will put into
the new array instead of the the
original animal in this case that will
be the name like that now let’s save and
run it and see if it produces the same
output as the for loop BAM exactly the
same using map to return a subset of an
object like this where we return just
the the the the name property is a very
common usage pattern however since map
just expects the callback to return any
object we can use it to create
let’s run that Tara fluffykins is a
rabbit Caro is a dog hamiltonicity yeah
they’re getting it don’t but do you see
how little code this is it is amazing
I’m gonna put the for loop example next
to the map example so that you can
compare and I’m gonna remove the extra
code that we added to the map so that
they are doing the same thing now check
HERE when I’m selecting the the the map
example and here in the lower left
corner you see that this it’s 66
characters and when I select the for
loop example you see that it’s 89
characters that it’s like 30% more let
me put it put it like in one line as to
got pull this out a bit then it’s a lot
shorter short code is good because less
code almost always means less bugs but
it gets even better in ECMO script 6
we’re getting arrow functions I’m going
to rewrite this using arrow functions
arrow functions is a new shorter and
better syntax for functions in ECMO
script 6 it looks like this so it’s a
bit shorter but it gets better if your
function logic fits on one line like in
this example you can just get rid of the
return statement and the curly brackets
and this will whatever statement is
after the arrow function will be
implicitly
turned so let me comment out the stuff
that we keep around for comparison and
go back to with the console and run this
whoops this won’t work right off the bat
because as I said arrow functions are a
part of the ACMA script sixth standard
and that is not fully implemented into
browsers or node yet however if you’re
running the latest version of IOT is you
can just use the harmony arrow functions
flag and it works if you’re watching
this video from the future you don’t
have to do this in functional
programming it’s common to go even
shorter and just shorten the variable
names to X like this BAM let me put this
next to the original for loop just to
if you don’t think this is absolutely
beautiful you I just have no soul there
is you can’t see beauty in the world
just check this this is 38 characters
and this is 90 ah and that concludes
this informational computer science
video about the higher-order function
map which is which is part of this the
series about functional programming in
JavaScript next time we will look at a
classic higher-order function called
reduce don’t miss it
please subscribe if you like this also
follow me on Twitter at MB Jaime stay curious see you next time