good Monday morning today we are going
to explore how good ok let’s say this is
long one how good are es6 class property
arrow functions yeah yeah so many people
are talking to me about how they are
magically good and stuff but they have
caveats and I’ve been wanting to make a
video about it for a long time we are
your hosts mmm PJ and I’m David and you
are watching fine fine function do a bit
of it up a bit of it but there all right
okay so we do there sponsor framer
doesn’t have a script oh really oh
that’s actually good I think you need
free flow a little bit because you are
kind of more from it actually more
familiar with the product than I am yes
today’s episode is sponsored by framer
and I’m really happy about the sponsor
actually because it’s a really good
product so a big problem that we used to
have while I was working as Spotify is
like the the collaboration between
designers and developers so they would
basically a dump like they would give us
these Photoshop files and we were like
really make them and for us like we
wanted to create like these shared
components but they couldn’t really use
them and their prototyping things and
that’s where framer is so nice because
the developer can build the components
and then the designer can just use your
component that you as a developer has
built because framer is completely react
based under the hood that is so fun it’s
it’s it’s amazing and also if you’re a
developer and just want to get something
pretty good looking pretty decent
working while you you are you’re
prototyping it will just look and I
think it’s easy it’s great yeah yeah
it’s a fun that like if you want to up
the game for like how well you
collaborate and with the designers in
your organization and tighten up the the
feedback loop between designers and
developers like really check out framer
like it’s just such a good product yeah
check it out yep
this episode is can be watched myself
but it’s also a follow-up episode on the
episode we did on dev tips about this
and bind so we’ll just have a super
brief recap what we did there sort of
adapted to this environment so you can
go and check out the video but what we
did there was that we had something a
dragon in this case yeah and it has some
property that is tied to this this
thought element so it has a breathe
function you know this from all the
trafficking stuff so the dragon is
breathing something so let’s make const
fluffykins it skins with s right yep
okay this is the more elite oh yeah
elite fluffykins of Kames because it’s a
new dragon that breathes fire but its
elite can it breathe memes alright so
the problem is this say that we have a
button somewhere in our thingy and the
button has an onclick handler right now
so we have a oh no like that so this is
like button in like this is this is our
simulation of what happens in the doll
right yeah so oops rama turned on click
and then we just add on the bottom when
we click the button we want fluffy kins
to breathe its fire but what happens
then if we click it do I run here it’s
it has yeah it says it has an invalid
farlow good or yes Excel Joe has invalid
syntax it just says it has invalid
yeah I just wrote this example did we
actually check it no no wait I see it I
see it it’s here oh sorry my bad my bad
your idiot like that thank you
coketown sort of well where I click here
button unclick it says I’m breathing
undefined and why is that that is
because the unclick is referencing the
dragons breathe function which is
basically something that lives by itself
it has nothing to do with the dragon
class so it returns I am breathing this
element but JavaScript needs to figure
out what this is and when it’s here on
the button it just thinks that the
button is this yeah doesn’t have an
element we’re assuming here that you
know this stuff like on the from the
phone profession audience is expected
note but if you don’t and this this
thing that we just explained confuses
you in any way like this video is just
gonna make you even more confused so if
the confuse you go and watch the video
that we made on dev tips because that is
like dives deep it’s explaining like
this yeah okay so now you know
everything now we can get to this
episode yes all right cool so a lot of
people off let me just I need a double
okay okay a little a little alright so
in order to fix this we do like this
bind thing we do fluffykins bond focus
and then I am breathing memes now it’s
fixed and the because of this you see
like a Haji lien kabillion bind
statements all over all apps in
JavaScript like this is gonna be when
segments are very common especially in
react apps but what pretty much anything
dealing with the dome and reassigning
event handlers and stuff the thing is
like there’s a lot of so that’s one way
of solving a problem but there is
actually there’s this thing in don’t
think it’s actually in JavaScript quite
yet it’s it’s a proposal or about very
close to being implemented but I think
you can do these as arrow functions not
exactly sure on the on syntax here
because this is something that I never
do that’s actually just I have to look
at this pa6
floss blah blah blah blah blah it’s
interesting that the first article is
arrow functions a class properties might
not be as great as we think yeah we’re
gonna talk about the problems and how do
they look how do they pop handle click
equals oh it’s you do this I think like
that
all right this whole thing with the
shorthand of writing things like it’s
now we I think it’s confusing yeah it is
that I expected that to work actually do
we have to do something in order for
this to work do we have to make
this do I have to do something to make
this work in quokka I think we have to
do that mm-hmm
yeah that’s it it’s a bit of a sigh
tough but I actually think it’s good
because people will run into this should
I do something should I run
yeah exactly you need to do it with the
figure out how to add bobble presets to
coca and add es 2017 and stage two I’m
gonna send that on the chat add this
need bobble presets so add this to our
document like we’re this this document
that you’re seeing here this is a notion
document that we’re going to be linking
it’s running oh it wasn’t installed no I
think it was we installed some other
thing like they probably changed it
because yeah bobble is like Oh worst
moving target ever okay that took like
25 minutes to get the claws are
functions working oh god that was so
annoying
okay let’s actually just add that to our
to our notion document so that people
don’t have to suffer through our pain
I’m gonna add that here I’m gonna like
so the quad cut in order to get that
working
we did we did this and then to get the
bubble or C working we did are you
getting it awesome at a code book
alright that was annoying but now we
finally have it’s all but I mean it’s
it’s good like this is and also like
just a note you have to install this
plugin in the node modules directory so
what did you do here with breathe is a
property arrow function yes this is what
I suppose we call it it’s a class
property arrow function because it will
be weird to call it ESS property arrow
function yeah it’s a little bit weird to
call it es6 actually because i think
you’re just gonna do that because es6
doesn’t really exist anymore i did that
namings that term was i would rename the
file how good our class property arrow
like that okay there we go so it’s
quicker running out because I’m not
getting like any evaluation here
all right restart when I rename the
finance oh so now this is actually
working right I’m breathing memes yeah
so let’s if I uncomment the problem
could the problematic code down here yes
yeah I think that this should
hypothetically work I don’t think you’re
in my share any longer right
maybe did you change anything in how
good or class property arrow functions
yes I did well I uncommented the code I
don’t see you now get cool new you we
have the same I’m leaving that and I’m
now you’re here hi
brilliant do you see what I see in the
how are I do I can see you live do you
see me writing here I do okay
so now go ahead and uncomment this the
problematic code that we have before and
see if button on click and then we tie
that to breathe and the button on cake
says I’m breathing me so it seems to be
working now as I expected we didn’t need
the bind part yes exactly so just to
like show it again let’s convert the
like that no I mean just not not use the
arrow function syntax okay you know you
may show the problem again yeah exactly
like this yeah precisely yeah
and now it says I’m breathing undefined
instead yeah okay so this way of writing
breathe as a property function in the
normal property function and then we
would have to use vine here to tell the
breathe function that it should that
this should be fluffykins yes to make it
work trafficking to make it work yeah
but removing this and then making this
special class prop the arrow function
make it work anyways without find what
so at first glance here this seems to be
pretty cool right because it just
it just fixes the problem magically just
use arrow function properties all the
time everywhere right yeah well the
thing is like this syntax is not
actually like the JavaScript object
model just works a certain way at its
core right prototypes we kind of like
change how the prototype whole object
model works this is what it does this
dot elements no that’s right this dot
breathe this is what what is happening
under the hood equals this don’t breathe
don’t bind and it’s gonna bind it in
this okay that just very many the this
in that line this this is this is this
now I think that we can actually do this
as a normal function method instead and
yeah now it works so here this is also
like a common problem of so in a common
way of solving the double this shall of
Obama mess is to simply just whatever
we’re just gonna bind and create new
functions scoped to this at construction
ton and well you can’t do this the
problem is that you are creating a new
function every single time you are
instantiating fluffykins so it’s not a
reference nope you’re actually making
new ones yes and I mean so if you’re
creating like a whole Gillian Couvillion
fluffykins here you’re you’re creating a
Hegelian like for every method you’re
also creating like a new function and
this kind of destroys the entire point
of having a class in the first place
like it’s
like the point of the class is to save
that that memory space and in my mind if
you start doing start using class arrow
functions and especially if you start
using them everywhere I think personally
and this is something that I also like
Crockford likes a lot is to simply use
just throw away the the classes like
there are just a mess and use a factory
function instead
yeah because classes is doesn’t feel
like JavaScript really yeah it’s like
you see like this is so messy and like
we use this arrow function and think
that oh yeah it has solved something but
under the hood like it has these weird
performance implications that you
completely like just ah so okay so let’s
rewrite this is a factory function has
never done that in my life
all right so yeah let’s actually I’m
gonna instruct you yes so create a
function called create Dragon okay
create Dragon yeah an arrow function or
another ordinary function doesn’t really
matter let’s just use a normal function
tree and I’ll make it a Const otherwise
the OCD people will die like that yep
and now but this is gonna be like very
similar to how you did it in on the dev
tips episode it’s basically just gonna
create an object okay like that
yeah sure let’s start with that and it’s
yeah like that yep perfect
great and then return this object yeah
like that
yep and now you can yeah comment I’ll
take the dragon class and don’t delete
it so that we can keep it next to you
can also comment out the instantiation
as well cool and now we use create
like that cool right
we still have not yet there undefined
arrow down here exactly yeah
so because we still have them I will
just move this the class thing in here
yeah sure
so that makes sense because we like we
are still using this in the create
dragon right now but in factory
functions this does not exist like that
is the we we don’t care about that that
is not a concept for them at all like we
we simply don’t use this because this is
insanely confusing and ambiguous and
problematic okay so because we don’t
know what might happen yeah so what you
do instead is that you just declare like
let’s instead of using like it has a
property on the object you just declare
a constant inside of exactly like that
yep and then you just refer to element
so do you don’t use this you just use a
line and as you see like since the we
don’t actually have to do that
reassignment there either on line two
this is actually unnecessary because we
can use it yep here’s the function
argument actually and there you have it
okay and how everything works and this
part here down here works as well yeah
as expected
sure and you see how simple this is hmm
you like it it’s like because again
there is no property arrow function
magic here no it’s it’s completely like
it’s completely transparent what the
hell is happening
I mean we have a performance problem
here our memory problem or whatever you
want to call it like because we are now
creating like a new function every
single time but that happens in the
class our real functions case – it’s
just that it’s invisible – it’s it’s
hidden
because they bobbled us transpiling or
the the javascript engine does like
performance implications like but here
like it’s very clear what the code is is
doing like there’s no basically when we
do the factory functions we’re sort of
removing the whole the whole purpose
with classes is that you have so like a
blueprint and then you build a new thing
out of it exactly and don’t and
everything is a reference so you just
like there’s like not a huge amount of
things recreated every time but down in
the class dragon when you reuse the
special property class arrow function
yeah just prop the elephant whatever
then we converted the class thingy so it
was basically just it had like memory
implication wise it became the same
thing as this factory function and
that’s why we might as well just write
it as a factory function yes yes what
did we learn no like I wanna I want to
say one more thing do not get something
with the error like with the factory
function that benefit that we have that
we don’t get with classes hint it’s
related to the elements if I can okay if
only between line 8 and line 9 mmm-hmm
try to access element from the outside
impossible
exactly oh you can create we get so like
the private thingy you get problem lass
from like if you’re so like in Java you
you always write like private blah blah
private means private blah blah blah
private public whatever which we don’t
have in JavaScript but now we don’t get
it implicitly yes oh it’s pretty cool
yeah so you get that for free like and
this is like if you understand closures
and you kind of doesn’t even have to
understand the concept of closure it’s
just so simple what is happening here
like there’s no mess with this like this
like this whatever are you gonna if you
reassign it to own click handlers or
whatever you do it’s always gonna work
and yeah so what is that
I’m sorry so I I just feel like when you
start like falling it like using like
these class arrow functions and stuff
like then you have well your sense entry
into such a mess with classes like you
have like a solution on top of a
solution to solve a problem created like
that just created by classes and God
just throw that away in my opinion and
just use factory functions they are so
simple and so elegant and like this
memory here that this waste it’s so
inconsequential I ran like like an
object creation performance test on my
phone and it can like create 2 million
objects per second but why was this
class property error function suggested
in the first place like is it because of
that people are using react or angular
wise why is someone suggesting it
whenever I one of the big benefits of
factory functions so when I argue for
factory function is that we don’t have
the mess with this and bind and stuff
like element here is always gonna be
element and then people that are
proponents for clauses go and say like
hey this is not a problem in classes you
can nowadays you can just use class
class property arrow functions and that
is like when I want to argue this point
that yeah but if you’re doing that you
get the same performance problems that
factory functions have and then you
might as well just use factory functions
because they are much more elegant cool
you get it yeah I get it
and of course we can rewrite this so it
cooks way nicer with new syntax and
everything but oh whatever
so I could make it to update its syntax
yeah I say I could just do I could just
and the can we do the breathe like this
yep so you can’t oh I didn’t even think
about that yeah so now it looks way
nicer yeah yeah okay Isis amazing I sort
of I had never heard of the class
property error function so for me it
wasn’t really a problem that we solved
here but well pairing but comparing
because I liked classes I started with
Java that was sort of like actually I
started with PHP but proper programming
I’ve hunted through Java and then I
started with class and object-oriented
and then I sort of fell in love with
JavaScript and for me this just feels
more JavaScript cozy the JavaScript I
like yeah that’s why I like it I mean
Jesus just compared this even if I do
that remove this line and go and do the
class error function here I keep
forgetting how it looks
well sequel or emphasis send them there
yeah like Jesus this is like look at
this it’s so much cleaner so much
smaller I wonder how many times you use
that this is fewer lines of code
argument versus that this is a more
optimum performance argument you can at
any time you have an argument for the
functional programming JavaScript
methodology yeah sure but I mean this is
not even the this is not it’s just less
code like it’s not it’s it’s not more
terse it’s actually genuinely less less
stuff we’re doing we don’t have to do
like there’s no equivalent to this dot
element because we can just use element
immediately and there is also like there
is no performance difference between
these two they are equally ineffective
yeah yeah that’s what I wanted to say
yeah so that’s so if can you do that too
long didn’t read what did we learn
yes
arrow functions size class property
arrow function I hate the name yeah i
okay it’s a good name because it is
class and then you have a property and
then your arrow function it but Coonan
someone suggested a better name yeah
it’s I mean it says exactly what it is
but I find I mean the name is bad
because the thing is bad it’s a
complicated thing that it’s I think that
the name is correct it’s it’s the thing
that is bad yeah shouldn’t okay so for
me the too long didn’t we is you don’t
have to use bind if you just use factory
functions exactly just just use the
goddamn factory functions really they
are nice so in the example from the last
video that we did on dev tips like in
the end we sort of discussed the onclick
handler and like the use case was that
when we’re looping through a list of
dragons yeah and we want to tie on click
handlers for each dragon yep that was
when we had to bind to ensure everything
how would that work here like it would
just work you wouldn’t use need to use
mind yeah
because right yeah it solves the problem
yeah it solves a problem it should be
said again that this is not memory
efficient we’re used to be creating a
new function enclosure on work for on on
every dragon but you will like but if
you do a lot of binds you have that
problem anyway so you might as well use
a factory function and let’s and and
like always don’t optimize if you don’t
have a problem yes
good god yes always wait like wait for
the problem to arise don’t try to think
that you can premature optimization is
the root of all evil if you haven’t
checked out frame or X and if you’re a
developer that work with designers check
out frame rates do it do now all right
this
Ben if you’re new this has been an
episode of fun fun function we release
these every Monday morning
oh wait hundred GMT you will forget that
so you can click here to in order to
subscribe or you can click here if you
want to watch another episode right now
I am mpj and I’m David until next Monday morning stay curious
to explore how good ok let’s say this is
long one how good are es6 class property
arrow functions yeah yeah so many people
are talking to me about how they are
magically good and stuff but they have
caveats and I’ve been wanting to make a
video about it for a long time we are
your hosts mmm PJ and I’m David and you
are watching fine fine function do a bit
of it up a bit of it but there all right
okay so we do there sponsor framer
doesn’t have a script oh really oh
that’s actually good I think you need
free flow a little bit because you are
kind of more from it actually more
familiar with the product than I am yes
today’s episode is sponsored by framer
and I’m really happy about the sponsor
actually because it’s a really good
product so a big problem that we used to
have while I was working as Spotify is
like the the collaboration between
designers and developers so they would
basically a dump like they would give us
these Photoshop files and we were like
really make them and for us like we
wanted to create like these shared
components but they couldn’t really use
them and their prototyping things and
that’s where framer is so nice because
the developer can build the components
and then the designer can just use your
component that you as a developer has
built because framer is completely react
based under the hood that is so fun it’s
it’s it’s amazing and also if you’re a
developer and just want to get something
pretty good looking pretty decent
working while you you are you’re
prototyping it will just look and I
think it’s easy it’s great yeah yeah
it’s a fun that like if you want to up
the game for like how well you
collaborate and with the designers in
your organization and tighten up the the
feedback loop between designers and
developers like really check out framer
like it’s just such a good product yeah
check it out yep
this episode is can be watched myself
but it’s also a follow-up episode on the
episode we did on dev tips about this
and bind so we’ll just have a super
brief recap what we did there sort of
adapted to this environment so you can
go and check out the video but what we
did there was that we had something a
dragon in this case yeah and it has some
property that is tied to this this
thought element so it has a breathe
function you know this from all the
trafficking stuff so the dragon is
breathing something so let’s make const
fluffykins it skins with s right yep
okay this is the more elite oh yeah
elite fluffykins of Kames because it’s a
new dragon that breathes fire but its
elite can it breathe memes alright so
the problem is this say that we have a
button somewhere in our thingy and the
button has an onclick handler right now
so we have a oh no like that so this is
like button in like this is this is our
simulation of what happens in the doll
right yeah so oops rama turned on click
and then we just add on the bottom when
we click the button we want fluffy kins
to breathe its fire but what happens
then if we click it do I run here it’s
it has yeah it says it has an invalid
farlow good or yes Excel Joe has invalid
syntax it just says it has invalid
yeah I just wrote this example did we
actually check it no no wait I see it I
see it it’s here oh sorry my bad my bad
your idiot like that thank you
coketown sort of well where I click here
button unclick it says I’m breathing
undefined and why is that that is
because the unclick is referencing the
dragons breathe function which is
basically something that lives by itself
it has nothing to do with the dragon
class so it returns I am breathing this
element but JavaScript needs to figure
out what this is and when it’s here on
the button it just thinks that the
button is this yeah doesn’t have an
element we’re assuming here that you
know this stuff like on the from the
phone profession audience is expected
note but if you don’t and this this
thing that we just explained confuses
you in any way like this video is just
gonna make you even more confused so if
the confuse you go and watch the video
that we made on dev tips because that is
like dives deep it’s explaining like
this yeah okay so now you know
everything now we can get to this
episode yes all right cool so a lot of
people off let me just I need a double
okay okay a little a little alright so
in order to fix this we do like this
bind thing we do fluffykins bond focus
and then I am breathing memes now it’s
fixed and the because of this you see
like a Haji lien kabillion bind
statements all over all apps in
JavaScript like this is gonna be when
segments are very common especially in
react apps but what pretty much anything
dealing with the dome and reassigning
event handlers and stuff the thing is
like there’s a lot of so that’s one way
of solving a problem but there is
actually there’s this thing in don’t
think it’s actually in JavaScript quite
yet it’s it’s a proposal or about very
close to being implemented but I think
you can do these as arrow functions not
exactly sure on the on syntax here
because this is something that I never
do that’s actually just I have to look
at this pa6
floss blah blah blah blah blah it’s
interesting that the first article is
arrow functions a class properties might
not be as great as we think yeah we’re
gonna talk about the problems and how do
they look how do they pop handle click
equals oh it’s you do this I think like
that
all right this whole thing with the
shorthand of writing things like it’s
now we I think it’s confusing yeah it is
that I expected that to work actually do
we have to do something in order for
this to work do we have to make
this do I have to do something to make
this work in quokka I think we have to
do that mm-hmm
yeah that’s it it’s a bit of a sigh
tough but I actually think it’s good
because people will run into this should
I do something should I run
yeah exactly you need to do it with the
figure out how to add bobble presets to
coca and add es 2017 and stage two I’m
gonna send that on the chat add this
need bobble presets so add this to our
document like we’re this this document
that you’re seeing here this is a notion
document that we’re going to be linking
it’s running oh it wasn’t installed no I
think it was we installed some other
thing like they probably changed it
because yeah bobble is like Oh worst
moving target ever okay that took like
25 minutes to get the claws are
functions working oh god that was so
annoying
okay let’s actually just add that to our
to our notion document so that people
don’t have to suffer through our pain
I’m gonna add that here I’m gonna like
so the quad cut in order to get that
working
we did we did this and then to get the
bubble or C working we did are you
getting it awesome at a code book
alright that was annoying but now we
finally have it’s all but I mean it’s
it’s good like this is and also like
just a note you have to install this
plugin in the node modules directory so
what did you do here with breathe is a
property arrow function yes this is what
I suppose we call it it’s a class
property arrow function because it will
be weird to call it ESS property arrow
function yeah it’s a little bit weird to
call it es6 actually because i think
you’re just gonna do that because es6
doesn’t really exist anymore i did that
namings that term was i would rename the
file how good our class property arrow
like that okay there we go so it’s
quicker running out because I’m not
getting like any evaluation here
all right restart when I rename the
finance oh so now this is actually
working right I’m breathing memes yeah
so let’s if I uncomment the problem
could the problematic code down here yes
yeah I think that this should
hypothetically work I don’t think you’re
in my share any longer right
maybe did you change anything in how
good or class property arrow functions
yes I did well I uncommented the code I
don’t see you now get cool new you we
have the same I’m leaving that and I’m
now you’re here hi
brilliant do you see what I see in the
how are I do I can see you live do you
see me writing here I do okay
so now go ahead and uncomment this the
problematic code that we have before and
see if button on click and then we tie
that to breathe and the button on cake
says I’m breathing me so it seems to be
working now as I expected we didn’t need
the bind part yes exactly so just to
like show it again let’s convert the
like that no I mean just not not use the
arrow function syntax okay you know you
may show the problem again yeah exactly
like this yeah precisely yeah
and now it says I’m breathing undefined
instead yeah okay so this way of writing
breathe as a property function in the
normal property function and then we
would have to use vine here to tell the
breathe function that it should that
this should be fluffykins yes to make it
work trafficking to make it work yeah
but removing this and then making this
special class prop the arrow function
make it work anyways without find what
so at first glance here this seems to be
pretty cool right because it just
it just fixes the problem magically just
use arrow function properties all the
time everywhere right yeah well the
thing is like this syntax is not
actually like the JavaScript object
model just works a certain way at its
core right prototypes we kind of like
change how the prototype whole object
model works this is what it does this
dot elements no that’s right this dot
breathe this is what what is happening
under the hood equals this don’t breathe
don’t bind and it’s gonna bind it in
this okay that just very many the this
in that line this this is this is this
now I think that we can actually do this
as a normal function method instead and
yeah now it works so here this is also
like a common problem of so in a common
way of solving the double this shall of
Obama mess is to simply just whatever
we’re just gonna bind and create new
functions scoped to this at construction
ton and well you can’t do this the
problem is that you are creating a new
function every single time you are
instantiating fluffykins so it’s not a
reference nope you’re actually making
new ones yes and I mean so if you’re
creating like a whole Gillian Couvillion
fluffykins here you’re you’re creating a
Hegelian like for every method you’re
also creating like a new function and
this kind of destroys the entire point
of having a class in the first place
like it’s
like the point of the class is to save
that that memory space and in my mind if
you start doing start using class arrow
functions and especially if you start
using them everywhere I think personally
and this is something that I also like
Crockford likes a lot is to simply use
just throw away the the classes like
there are just a mess and use a factory
function instead
yeah because classes is doesn’t feel
like JavaScript really yeah it’s like
you see like this is so messy and like
we use this arrow function and think
that oh yeah it has solved something but
under the hood like it has these weird
performance implications that you
completely like just ah so okay so let’s
rewrite this is a factory function has
never done that in my life
all right so yeah let’s actually I’m
gonna instruct you yes so create a
function called create Dragon okay
create Dragon yeah an arrow function or
another ordinary function doesn’t really
matter let’s just use a normal function
tree and I’ll make it a Const otherwise
the OCD people will die like that yep
and now but this is gonna be like very
similar to how you did it in on the dev
tips episode it’s basically just gonna
create an object okay like that
yeah sure let’s start with that and it’s
yeah like that yep perfect
great and then return this object yeah
like that
yep and now you can yeah comment I’ll
take the dragon class and don’t delete
it so that we can keep it next to you
can also comment out the instantiation
as well cool and now we use create
like that cool right
we still have not yet there undefined
arrow down here exactly yeah
so because we still have them I will
just move this the class thing in here
yeah sure
so that makes sense because we like we
are still using this in the create
dragon right now but in factory
functions this does not exist like that
is the we we don’t care about that that
is not a concept for them at all like we
we simply don’t use this because this is
insanely confusing and ambiguous and
problematic okay so because we don’t
know what might happen yeah so what you
do instead is that you just declare like
let’s instead of using like it has a
property on the object you just declare
a constant inside of exactly like that
yep and then you just refer to element
so do you don’t use this you just use a
line and as you see like since the we
don’t actually have to do that
reassignment there either on line two
this is actually unnecessary because we
can use it yep here’s the function
argument actually and there you have it
okay and how everything works and this
part here down here works as well yeah
as expected
sure and you see how simple this is hmm
you like it it’s like because again
there is no property arrow function
magic here no it’s it’s completely like
it’s completely transparent what the
hell is happening
I mean we have a performance problem
here our memory problem or whatever you
want to call it like because we are now
creating like a new function every
single time but that happens in the
class our real functions case – it’s
just that it’s invisible – it’s it’s
hidden
because they bobbled us transpiling or
the the javascript engine does like
performance implications like but here
like it’s very clear what the code is is
doing like there’s no basically when we
do the factory functions we’re sort of
removing the whole the whole purpose
with classes is that you have so like a
blueprint and then you build a new thing
out of it exactly and don’t and
everything is a reference so you just
like there’s like not a huge amount of
things recreated every time but down in
the class dragon when you reuse the
special property class arrow function
yeah just prop the elephant whatever
then we converted the class thingy so it
was basically just it had like memory
implication wise it became the same
thing as this factory function and
that’s why we might as well just write
it as a factory function yes yes what
did we learn no like I wanna I want to
say one more thing do not get something
with the error like with the factory
function that benefit that we have that
we don’t get with classes hint it’s
related to the elements if I can okay if
only between line 8 and line 9 mmm-hmm
try to access element from the outside
impossible
exactly oh you can create we get so like
the private thingy you get problem lass
from like if you’re so like in Java you
you always write like private blah blah
private means private blah blah blah
private public whatever which we don’t
have in JavaScript but now we don’t get
it implicitly yes oh it’s pretty cool
yeah so you get that for free like and
this is like if you understand closures
and you kind of doesn’t even have to
understand the concept of closure it’s
just so simple what is happening here
like there’s no mess with this like this
like this whatever are you gonna if you
reassign it to own click handlers or
whatever you do it’s always gonna work
and yeah so what is that
I’m sorry so I I just feel like when you
start like falling it like using like
these class arrow functions and stuff
like then you have well your sense entry
into such a mess with classes like you
have like a solution on top of a
solution to solve a problem created like
that just created by classes and God
just throw that away in my opinion and
just use factory functions they are so
simple and so elegant and like this
memory here that this waste it’s so
inconsequential I ran like like an
object creation performance test on my
phone and it can like create 2 million
objects per second but why was this
class property error function suggested
in the first place like is it because of
that people are using react or angular
wise why is someone suggesting it
whenever I one of the big benefits of
factory functions so when I argue for
factory function is that we don’t have
the mess with this and bind and stuff
like element here is always gonna be
element and then people that are
proponents for clauses go and say like
hey this is not a problem in classes you
can nowadays you can just use class
class property arrow functions and that
is like when I want to argue this point
that yeah but if you’re doing that you
get the same performance problems that
factory functions have and then you
might as well just use factory functions
because they are much more elegant cool
you get it yeah I get it
and of course we can rewrite this so it
cooks way nicer with new syntax and
everything but oh whatever
so I could make it to update its syntax
yeah I say I could just do I could just
and the can we do the breathe like this
yep so you can’t oh I didn’t even think
about that yeah so now it looks way
nicer yeah yeah okay Isis amazing I sort
of I had never heard of the class
property error function so for me it
wasn’t really a problem that we solved
here but well pairing but comparing
because I liked classes I started with
Java that was sort of like actually I
started with PHP but proper programming
I’ve hunted through Java and then I
started with class and object-oriented
and then I sort of fell in love with
JavaScript and for me this just feels
more JavaScript cozy the JavaScript I
like yeah that’s why I like it I mean
Jesus just compared this even if I do
that remove this line and go and do the
class error function here I keep
forgetting how it looks
well sequel or emphasis send them there
yeah like Jesus this is like look at
this it’s so much cleaner so much
smaller I wonder how many times you use
that this is fewer lines of code
argument versus that this is a more
optimum performance argument you can at
any time you have an argument for the
functional programming JavaScript
methodology yeah sure but I mean this is
not even the this is not it’s just less
code like it’s not it’s it’s not more
terse it’s actually genuinely less less
stuff we’re doing we don’t have to do
like there’s no equivalent to this dot
element because we can just use element
immediately and there is also like there
is no performance difference between
these two they are equally ineffective
yeah yeah that’s what I wanted to say
yeah so that’s so if can you do that too
long didn’t read what did we learn
yes
arrow functions size class property
arrow function I hate the name yeah i
okay it’s a good name because it is
class and then you have a property and
then your arrow function it but Coonan
someone suggested a better name yeah
it’s I mean it says exactly what it is
but I find I mean the name is bad
because the thing is bad it’s a
complicated thing that it’s I think that
the name is correct it’s it’s the thing
that is bad yeah shouldn’t okay so for
me the too long didn’t we is you don’t
have to use bind if you just use factory
functions exactly just just use the
goddamn factory functions really they
are nice so in the example from the last
video that we did on dev tips like in
the end we sort of discussed the onclick
handler and like the use case was that
when we’re looping through a list of
dragons yeah and we want to tie on click
handlers for each dragon yep that was
when we had to bind to ensure everything
how would that work here like it would
just work you wouldn’t use need to use
mind yeah
because right yeah it solves the problem
yeah it solves a problem it should be
said again that this is not memory
efficient we’re used to be creating a
new function enclosure on work for on on
every dragon but you will like but if
you do a lot of binds you have that
problem anyway so you might as well use
a factory function and let’s and and
like always don’t optimize if you don’t
have a problem yes
good god yes always wait like wait for
the problem to arise don’t try to think
that you can premature optimization is
the root of all evil if you haven’t
checked out frame or X and if you’re a
developer that work with designers check
out frame rates do it do now all right
this
Ben if you’re new this has been an
episode of fun fun function we release
these every Monday morning
oh wait hundred GMT you will forget that
so you can click here to in order to
subscribe or you can click here if you
want to watch another episode right now
I am mpj and I’m David until next Monday morning stay curious
Please follow and like us: