How good are class arrow functions in JavaScript?

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 running coca it has yeah it says it has an invalid syntax where did we waited I'd invalid farlow good or yes Excel Joe has invalid syntax it just says it has invalid syntax gee thanks 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 check one thing all right 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 [ __ ] 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 in the episode description 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 functions yeah 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 rejoin yet fantastic technical problems live yeah 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 breathe property to a normal function 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 gonna have its fix the element thing yeah like that yep perfect and then the greens function yep I will just write it like this yeah 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 dragon instead to create fluffykins 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 yeah let's actually do that so I could make it to update its syntax yeah I say I could just do I could just do this 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