watching phantom house a lot of people
comment that I use arrow functions a lot
in my videos so I thought I’d make a
video on just that today you have
probably seen them around they look like
this kind of and they are basically a
shorter function syntax hmm kind of what
I mean by that kind of is that this that
this keyword behaves differently we’re
not going to talk about that this aspect
of arrow functions at all in this video
because I think that the most exciting
and most important aspect of arrow
functions is that they are so much
shorter that’s the important part and
that is what we are going to talk about
today I’m going to show you how to use
arrow functions in just a minute but
before I do that I want to talk about
the why of them arrow functions are
shorter but do we do we need a shorter
function syntax I mean another episode
of fun fun function has been suggesting
that you should be restrictive about how
many functions you create so why do I
like these what what value does having a
short function syntax give us I think
that the big thing with at the arrow
function syntax is that it is so much
shorter than the normal function syntax
it is extremely success it’s just the
bare minimum of syntax that is required
to express that this is a function the
fact that arrow functions are so terse
allows us to use functions in a new way
that we could not do before we can now
do functions that are small inline and
single purpose these aspects are of
course not unique to arrow functions you
can make small in line and single
purpose functions with the normal
and syntax but the fact that there is so
little extra boilerplate code for every
function makes you do this a lot more
and to a much larger or smaller degree
and this combined that that creates at
least for me a completely new way of
programming and that is what I am going
to show you today all right let’s look
at some code let’s look at this dragon
events variable here it’s an array as
you see mm-hmm objects you can envision
this as something that is part of a game
so these are events from Dragon so the
dragon can attack it can go on for some
reason with a value I don’t know exactly
what that is might be the size of the
yo-yo or uh and it can eat and it can
eat it or it such as a horse because
dragons are large and it can also attack
and this is the event that I want to
draw your attention to it the the attack
has a value and it has a target and so
you can attack the player fluffykins or
it can attack the player dork man here
our objective is to figure out what the
total damage is from all these attacks
on player dork math so this what will
this be first of all let’s start by
filtering out all the attacks I think so
yes do dragon events don’t filter and we
are going to do this using normal
functions at first I’m gonna call this
variable event and I’m going to return
ah vent dot type equals attack and I’m
going to just console log out at the end
of the script the total damage from dork
man
I’m going to echo that variable out and
we are going to run the script so you
see that ah yes
let me add ah I won’t want a line break
there make it easy to read alright so it
will echo out an array here weep and it
will have only the attack objects and
you see that it has filter out you only
need because those are not of event type
if filter confuses you you should stop
watching this episode now and instead
check out this episode over here where I
explain how filter works so we have the
attack values but we also have the
attack on the on the fluffykins player
and we don’t want that player we want to
filter that player out as well so we add
another filter and we add an event there
and we’re going to return where the
event dot target
equals a player duart man we run that
again so now we only have the dork man
attacks here you see that it has
filtered out this one player fluffykins
next up we’re interested in getting
these values out here these these
twelves we’ll do that using Mac nap hmm
and we’ll return event dot value right
and we run it cool now we have an array
of just the values here and you know
what if map confuses you there’s an
episode for that okay so now finally we
just want to add these two together
and we can do that using reduce so yes
go function uh-oh
previous value
you and the value here and we just go
reduce I think we’re gonna do like prep
I’m gonna call that ah zero and add
value here ah and we’re going to run
this ooh
reduce is not the final because I am
being dumb edge have to return of course
note function yes 24 by the way if
reduced confused you yah we now have
this pretty pretty cool functional chain
here of work that is being done we’re
filtering out the attacks and then we
are filtering out the right players and
then we are filtering out just the event
values the damage here and then we are
summing it together in the reduce here
it’s nice that it’s cleanly separated
but you know there is so much
boilerplate here the logic is just this
and this and this and this so this here
this is just boilerplate for every
function and that is a bit annoying
because the boilerplate is you know it’s
almost as big as the logic of the
functions themselves before arrow
functions existed this here these two
duplicates I would be I would be kind of
tempted to combine these combine these
two functions into one and just pull
this thing in here and paste it in here
and go do something do something like
this and and delete this function let’s
do that there so now I’ve saved one of
these these boilerplates functions
syntax things and made the whole thing a
bit shorter but you know I have this
function here this is this is now doing
two
things in one and I can’t really before
I could describe these two things with
words like if I go back I could have
called this is this function is dort man
and I call have called this is attack
and they would have been reusable in in
other parts of the code well not this
because this not Dortmund because this
is a silly example but this is a valid
case I think you know this attack is
theoretically reusable and even if it’s
not reusable it’s nice that it does one
just one simple thing
let’s try refactoring this with arrow
functions and see what it feels like so
I will start by removing this and
instead I will add an arrow I will
remove this and I will add an arrow and
I will remove that as well because one
unfortunate side effect of arrow
functions is that they cannot be named
and that is okay I think because when
you’re using functions in line you
normally don’t need the functions to be
named and I will go here remove that
function and replace it with an arrow
move that function replace it with an
arrow let’s run it and see that it still
works it does now remember that I said
that arrow functions are often small and
single purpose and when when something
is small and single purpose it tends to
be on just one line and this brings us
to an awesome feature of arrow functions
in my opinion probably the most
important one and that is that if your
code is one statement like like like
this one here we can make it return that
statement implicitly let me show you if
I remove the brackets here BAM and
I remove the returned aim and then see I
just remove the brackets we’ll do that
in this function as well remove the
return boom boom boom
right I will also remove it here again
we do the same thing we move the angle
or they I don’t know what the name of
the of these things are I’ve never
learned in Swedish just call them for
giving Airy bird swings either way I’ll
remove them here as well BAM
remove this return here boom boom boom
and let’s run it it’s still 24 it still
works so because these are just single
statements they’re not an entire piece
of code where multiple variables are
being assigned it’s just one statement
we can do them like this in just one
line and have the return statement being
completely implicit in the case of the
reduced statement we have multiple
arguments and in that case it makes
perfect sense to have the parentheses it
would look it would look really weird if
it looked like this however in the case
of the other functions these ones they
only have one one argument to them so
can’t that work why yes it does so if
you have just one parameter to your
function you can completely omit the the
parentheses which is pretty cool so now
this is really small let me just paste
in the old code uh next to it yes so you
see like how big the difference is here
I think this is kind of huge do you see
now how this thing here that I talked
about earlier with these two events it
felt annoying that there was
much of this boilerplate between the two
so you were tempted to add these two two
together uh well in the in this case
here this is not at all disturbing
because there isn’t much boilerplate for
the function it’s it’s just this thing
the next thing I’m going to show you is
a bit more controversial and mattering
on taste I like to do it not everybody
does but since this piece of code here
it’s so contained right I scan I can see
all this in in one glance I know that
this is like this is about Dragon events
I can see this here so this event here
like I find it to be almost over
descriptive I think that for me it works
a lot better with just something like II
like this because I I know that we are
iterating dragon events in this in this
code I see that here I might keep this
value here as a full text because we are
changing the context of water is being
iterated with the map here but you know
other people might go the full length
and do just X for it because that means
that this function is now completely
generic so we can call it like a commis
Toto reducer and just paste it in total
reducer reduce to total like because
when I when I break functions out name
them I tend to want them to be a verb
does it still work
no oh yeah I can’t declare total damage
or dortmund twice I’ll comment this out
so that we can keep it around for
reference help note alright still works
in the same way all of these are pretty
reusable this
is pretty specific it doesn’t feel
reusable but this one is probably
something as I add more things in my
game here in the future this would
probably be something that I reduced to
is his attack and or maybe not not sure
but you can you get in summary arrow
functions is a shorter function syntax
kind of there is more to them but this
is what we have been focusing on today
my arrow functions because they allow us
to use functions in a new way because
arrow functions allow us or at least
incentivizes us to make a small inline
and single purpose functions to much
larger degree than we did before
links to the code and other UC nuggets
of information is in the description you
have watched an episode of fun fun
function
I am mpj I post new episodes every
Monday morning Oh 800 gmv you will not
remember that that is why a lot of
viewers choose to subscribe to fun fun
function so that you don’t miss out on
the next episode you should check out
the channel bottom click touch the
channel down below and see if this is a
channel that you want to subscribe to until next Monday morning stay curious