How good are class arrow functions in JavaScript?

🔗Framer X - better collaboration between designers and React developers

[ Forum Patrons ($2/month) only ]
🔗 Fun Fun Forum topic dedicated to this episode

[ Super Patrons ($9/month) only ]
🔗 Behind-the-scenes retrospective of this episode

🔗 Code from the episode

Editor and plugins
- VS Code

🔗 mpj on Twitter

🔗 Help translate the show to your language

We explore class property arrow functions in JavaScript, what is the problems that they solve, and how you can use factory functions as an alternative.

[funfunfunction]

BONUS video for Super Patrons ($9 / month):

Behind the scenes retrospective of this episode

[andrewlamansky]

I appreciate the style of these episodes because they embrace an inevitable part of the development process; encountering unforeseen problems and learning on the job. To be honest, I'm impressed by the hosts' ability to solve problems in a matter of minutes, when I've spent entire days troubleshooting my own tooling. Maybe for the benefit of those who exclusively prefer concise, tightly edited videos (like those in the excellent series on functional programming and object creation), you could indicate in the title which format the episode will take, but otherwise keep up the awesome work. I love me some FFF.

[willb.]

Im glad you kept in the "19 minutes later" bit. Shows me I'm not the only one that sometimes gets caught up in small things for WAY longer than one would think they should/will take!

[tonilaukka]

You could could make the example even more terse by writing the breathe function as an arrow function as well:
const createDragon = element => ({
breathe: () => `I am breathing ${element}`
})

[SeanClarkeMusic]

Wow, it's great you left in all the messy "figuring out build tool stuff", much more like real world dev scenarios :) Thanks for keepin' things raw and honest!

[eg]

Excellent content. 2nd Video of yours, coming from 20 years of OOP, and getting into Javascript, this video groks a lot for me.

[MrRiesable]

To work around the memory problem you could use dependency injection and inject the "breath" method. This would also be a good idea for composition.

[jeremyscheatday]

Hey, long time fan here, and I have some negative criticism about the new format with the videos. The switch over with the new host, is an extremely annoying addition. Not to say that the other guy is a problem, but what you guys are doing together, is an extremely drop in quality from what we are used to. Like, when you were writing code, you'd turn up the music, and not subject us to just long form rambling, before getting to the point, making the video concise, and I actually got something out of watching your videos. Also, it didn't matter the content, alot of times you'd be going on about how developers feel, and conversations with the audience, and other developers were extemely concise, and easy to understand.

I didn't want to say anything because I figure this is making videos easier for the both of you, and I understand that when projects get to certain size, to expect collaboration to help mitigate the task but these videos honestly are just too much, and I just don't want to unsubscribe because honestly this is still one of the most unique developer channels around. But this is crazy, I can't get anything from your new videos, just hearing you two fumble and fumble and fumble, and at the end, may or may not even get anything out of the videos. I hope that this feedback reaches you, I hope that other fans, chime in and really give their honest opinions. I know that I could be wrong or overly critical but, this is my comment.

[TomHacks]

Don't take it the wrong way, I still enjoyed the episode but there are many things wrong in this episode unfortunately.

1. Classes are not meant to solve any memory limitations. Classes are JUST! syntactic sugar. You can pretty much rewrite all your classes into functions with inner functions. Just like you did with the factory function.
2. 15:46 - yes exactly this is why property functions are good for (contrary to the classical way with bind, which you were showing)
3. 15:14 - no this is not what happens under the hood. Its a variable/property scoped to the upmost layer of the Dragon function (class). There is no bind that needs to happen as you are not reassigning function when constructing.
4. 14:08 - there is no such thing as a 'normal' property function. It's a function within a function (a class is a function with it's own scoped variables/properties)
5. 27:55 - this looks 'almost' the same to me (just make breath an arrow function and ignore the constructor for initial assignment), the class above has 1 more benefit now: easier inheritance.

This all comes down to scope. A class property is scoped to the layer of the function (Dragon). Contrary, when you assign a function to another object (fluffykinz) the this keyword will search for the scope of element in the newly assigned object first (undefined). The new keyword is the culprit, this will call constructor, this will reassign all values to the newly bound object and this is where 'this' happens. When using class properties they are already preassigned to certain values/functions which were already associated with the correct 'this' pre construction. In short, class properties are used for what you pretty much did with a factory function. And yeah, don't use classes when you don't need to. When using react and when you need it's lifecycle functions, get used to class properties as they clean up the mess (a little bit anyhow).

Man i'm bad at explaining, hope this helps to clarify what I mean.

[maeer]

I LOVE the format of the videos!!! I love that we can see the errors and the struggles live!

[QwertyNPC]

I'm not sure if you guys mention it and not that the world depends on it, but factory functions return an object of type object whereas classes or constructor functions return a new data type.

[Ashotofcode]

Excellent video as always guys :-) in case anyone following along like I did and wants to avoid the Babel setup pain we can rename our file as .ts and this enables arrow functions in Quokka - checking the Quokka website they support Typescript out of the box (no need to install typescript I think.. although not 100% as its on my PC already)

[davejs]

I think the main reason, as David alluded to, is people trying to use methods with React components. So it becomes more complicated when you have to extend React.Component. It pretty much forces you to use classes and then we're back at the same issue. In this case, knowing that factory functions and using class property arrow functions are equivalent in terms of performance, the latter option is more appealing. Especially considering factory functions would not be viable with React components. 
These class property arrow functions will likely go away though once Hooks are officially released and we're not forced to use classes when we need state or lifecycle methods. So the future is bright! :)

[lindlof_io]

Something that David tried to bring up: React. In React components are classes and it's so nice that "this" works nicely inside components. Despite the performance implication I want to use this in all functions in my React components. I don't think getting crazy this-reference errors is worth the performance boost (having gazillion components is expensive anyway). Maybe this can be optimized in interpreter: no binding necessary if "this" is not actually referenced inside a function.


Good point point against using class property arrow functions on plain objects though.

[hatrick]

I like how the first part is on devtips and the second one on fun fun function because it's monday

[viclick]

15:16 - No this is *NOT* what it does...
See babel playground. It actually creates a "_this = this" variable in the closure and uses it in all the scopes subordinate to the arrow function scope instead of "this". No binds...

[NetoSilvaPA]

Hey @MPJ, what plugin you r using to show inline results in vscode?

[isaacbaptista]

Would you be able rewrite the factory function so that u can change element without calling createDragon again

[ociemitchell]

Great video. It deserves a hojillion thumbs up, but I can only give one.

[keris]

I hardly use JS/functional programming in general. But I love this channel for giving me a perspective outside of the OOP world; even within the OOP world, many of the videos/lessons still apply.