Class keyword - Object Creation in JavaScript P7 - Fun Fun Function

Key Takeaways

good Monday morning today we're going to look at the class keyword in JavaScript this video contains three segments the first one is how does class work in JavaScript this video talks about how a class works specifically in Java script so I'm going to assume that you know what a class is in the general sense the second part of the video deals with the fact that JavaScript does not have classes I'm going to demonstrate how the class keyword is just simp tactic sugar on top of the prototypal inheritance model the third and final part of this video is called When in Rome learn JavaScript in this segment I'm going to try to convince you if you are new to JavaScript and you're coming from another programming language such as Java or or uh C or whatever to learn JavaScript properly and not try to force your existing mental model into JavaScript because that will just cause you pain that is what we are going to talk about today I am mpj and you are watching fun fun function before we begin I I would like to stress that this episode is part of a series the purpose of this series is to really get into and understand how object Creation in JavaScript works like learn it properly because we're programming in this language now we should really learn its nooks and crannies if you if you found this video by Googling JavaScript classes uh it's very tempting to just watch this video and try to get on with it but please uh look at the series from the start instead you can find it by clicking in the upper right corner or the link in the episode description uh this will make you feel a lot less confused and by having the fundamentals down it will make you a calmer person and a better person and you will thank me for it I promise if you're not a new viewer however uh you might be confused as to why I'm doing an object creation series because I started this channel by doing uh a a series on how to do functional programming in JavaScript and I I'm often vocal against doing too much object orientation I don't think that you you should not necessarily view this series as an endorsement of object orientation but instead view it as a way of getting to know JavaScript intimately because dismissing something uh because you know it and you're well familiar with it and you choose not to use it that's wisdom but if you don't know about something you don't know it fully and don't know how to use it and you avoid it then that is not wisdom that is just ignorance all right let's get into it um so classes in in JavaScript they work very much like you would expect let's create a class called Mammal Mammal uh there yeah uh and then we are going to create a new memo uh call it with nothing and yes call it fluffy kins hello there and let's Echo out what fluffykins is let's check what it is oh it's an empty object if you're interested the plugin that I'm using for inline evaluation here is called quaka you can find a link in the episode description classes in JavaScript can have Constructors as you would expect them to have let's say Constructor uh and you can also assign properties to objects like this dot let's call this uh property sound you can assign it and uh H let's see uh I want this to use a a yeah an argument so Constructors can have arguments so let's say they call this sound and then we also need to pass it down here I'm going to call this woof there so the property sound of fluffy kins is now woof nothing strange here you can also do methods so you perhaps call this talk uh and it will just return whatever is inside this do sound so if I do fluffikins do uh talk uh uh nothing happens um I need to uh return this do sound and this does not work either because I need to assign it to a variable or qua won't uh evaluate it woof w w w w w I really should think of better examples than animals but I like animals they are cute nice and of course classes in JavaScript can do inheritance so let's do class do uh dog extends uh mammal and and we're going to give it a con structor uh it will take no arguments and it's going to call super which is basically calling the Constructor of the inherited class so super here is actually going to call the Constructor of of mammal here uh because we are inheriting mammal so we're going to going to pass in sound here uh let's call this uh uh woof wof and let's change fluff uins to be a dog and remove this and see if this works did it work why doesn't it work let's open the terminal super keyword unexpected here what is happening ah oh it's because I'm typing contractor ah Constructor there now it works W wof I am the best at programming I would like to make a side warning here we're seeing some inheritance here be very careful about using inheritance it's very problematic it's a problematic pattern uh and you should prefer composition in almost all cases uh you might want to look at my video composition over inheritance by clicking in the upper right corner or in the episode description but that's a side note we're not passing judgment on that right now I am very very bright perhaps I should should like drop the um drop the thing let's drop the thing uh perhaps this is better yeah that's better so far the class keyword in JavaScript works like we'd expect if we are coming from Mund Java or C background or any other programming language mostly um that has classes but there are weird things that work not like you'd expect for example there is no way for us to make uh this this sound property here private PR private private uh so I there's no way for me to say something like private sound uh it's it's there's no such thing uh and there's no trick to do it either uh so I can always do um let me show you let uh y equals fluffy kins do sound uh and I can do why you see I can access it from outside and I can also change it so let's say I can call it fluffy kins uh equals uh uh one no sorry I can that will break fluffykins do sound and now it says one or I could just go meow you see since private members do not exist in JavaScript you often see people um doing uh underscore as a convention to uh uh to indicate that this is a private uh private uh member and that you should not mess with it if you're using the class but you know I can still just mess with it it's very brittle at this point you might be asking yourself why doesn't uh the class keyword in JavaScript have support for private m members it seems weird because the class keyword was added very recently to JavaScript it was added just a few years ago why didn't they add this it seems like a very basic type of functionality that's a great question and the answer is that JavaScript does not have classes it's all fake in the previous episode about the new keyword we uh we talked about how JavaScript fakes classes in the episode we looked at how the new keyword could be applied to a Constructor function and together with the Prototype that kind of faked something that behaved just like a class but it wasn't really a class it was just kind of sort of looking like a class and the class keyword in es6 is really just like that it's just a bit prettier uh syntactic sugar it's all smoking mirrors allow me to demonstrate I'm going to do this type of dog it's a function no it's a function because classes do not exist in JavaScript it's just a thin layer on top of the old prototype of inheritance it just looks a little bit prettier so let's see if I can just do um dog dopro type uh dot uh talk there we have our talk uh method it's this one here uh and if I just call this immediately we're going to get an error no not an error but undefined because uh it doesn't have a this. sound property let's see if we can uh I'm going to do something now if you understand it uh that will yield you a golden star because uh I'm going to be using all of the things that we've been learning in this series uh so far let's see here talk. bind and we're going to bind it to a new this the first uh argument to uh bind is redefining this and we're going to call it be an object with a property sound and we're going to call it uh uh uh uh I it's hard to invent sound uh let's call it Roar uh and then we call that function and then it goes Roar so what just happened there is that we called bind with this object here an object with the property underscore sound and uh that means that what bind does is that it creates a new version of Talk where we have bound this to be this object here so it creates a new function and returns it and then we call it here with this and also I think I can do this actually dog. prototype is prototype of fluffy kin yes true so you see class is just a very thin layer on top of the prototypal inheritance there is no class-based inheritance in JavaScript it's all just smoking mirrors so the class keyword has basically been welded onto JavaScript because there was a lot of pressure to do it and the reason there was a lot of pressure to do it is that there's a lot of new programmers coming into JavaScript not new programmers as in newes but new programmers from other backgrounds C uh C++ uh and Java programmers are coming in that are used to languages that are a heavily objectoriented and B uh they have a classical inheritance model they are class-based so they they're very used to this uh and they don't want to learn uh The prototypal Inheritance model that JavaScript has and they don't want to learn the functional programming model that JavaScript has they they want JavaScript to be like the programming language that they already know and I don't want to fault people for that too much because uh looking at how to do a class was one of the first things I did when I started learning JavaScript in my mind uh adding uh the class keyword to JavaScript was a little bit like uh I might get in trouble for this giving uh clean needles to meth addicts it is a distinct Improvement of over using dirty needles to do math but if we can we should try to get people off meth which brings me to the third segment When in Rome write JavaScript trying to embrace uh JavaScript and its strengths H and learn to write JavaScript in a way that is natural to JavaScript do not try to force the existing models that you have from whatever language Java or C uh into JavaScript and the reason you want to do that is that if you don't is that you you will always have this sense of unease and uncertainty about what is happening when you're looking in the Chrome inspector and you see these prototype things of your with underscores on your classes uh you you will just feel what is this oh I don't oh I you will just feel not at ease because you don't understand what it is that you're doing because you're using this thing that is kind of looks like a class but it really it's trying to hide some internal implementation from you but it does a bad job of it so it's just gives you this uh weird sense of I don't have control and if you don't understand the prototypal inheritance model and that classes is just a thin layer on top of it you will not understand its limitations you won't understand why there is no such thing as private members and you you will just be angry about that limitation you but you won't understand the context about the thing that you're angry about and that will give you a and just a sense of not being in in control and the world is against you and this is not just about learning uh about the prototypal inheritance model of JavaScript it's also about learning about the functional nature of JavaScript because that ties into object Creation in JavaScript a lot because there's a lot of weirdness with bind and this that you won't really understand without understanding the functional nature of JavaScript so if you want to feel comfortable writing JavaScript and know really what you're doing you should check out this series from the start if you haven't already uh and you should also check out the uh my functional programming in JavaScript series because that will that ties into object creation a lot that is it for today we talked a little bit about how a class Works in JavaScript then we explored how JavaScript doesn't have classes and finally I ranted a little bit about how when in Rome write JavaScript if anything was unclear or if you would like an elaboration please write a comment down below and I will try to answer it you have just watched an episode of fun fun function I release these every Monday morning 0800 GMT if you don't want to wait until next Monday you can check out this episode that Google's machine learning thing Bob has selected for your viewing pleasure I am mpj until next Monday morning stay curious