Javascript Classes Explained | Javascript Factory Functions | es6 private variables properties

hello and welcome today we are learning about classes and factory functions in javascript let's get started let's get started with javascript classes the javascript class syntax really didn't come about until es6 in 2015. we'll start a pizza class and i'll explain this the the javascript class syntax is really syntactic sugar and that means it's not changing what happens under the hood or what was already happening in javascript this is just a different way for us to lay out our features it's a new syntax but it doesn't change any of the actual functionality of javascript we'll start with a constructor and put our properties in here and we have to use the keyword this so we'll have a size for the pizza and we'll put medium and then we want a crust for the pizza and we'll put original and now we'll put in a method let's have a bake method notice we don't have to use the function keyword we just name the method and in this method we're going to log to the console a template literal and we'll say baking a now we'll put our this dot size and then we'll put this dot crust crust pizza that looks good to me and we'll save our class again this is a blueprint for creating an object now when we create the object and we'll call this my pizza we use the new keyword and we're creating a new pizza and then after we create the pizza object and go my pizza dot bake and we'll see what we get in the console and we have baking a medium original crust pizza well that worked out great but what if we wanted to pass in some values as we create the object let's do that with a pizza type value what type of pizza do we want to make and we'll start out here with this dot type equals pizza type in the constructor so you can see we ooh and typo there you can see we pass in the pizza type to the constructor when the object is created and then it is set setting type to the pizza type and so now we can say baking a medium original and now we can refer to our type and we'll save that and now oh undefined because we didn't pass in the parameter actually when we created the object yet so let's put in a lowercase pepperoni i like pepperoni hope you do too there we go baking a medium original pepperoni crust pizza and that is how you pass in a parameter and actually build your javascript class to accept a perimeter and of course it can accept more than one as well so let's do that let's say we're going to not set a medium pizza we're going to go pizza size and then we'll need to pass that in as well so pizza size and now when we call that we'll say small and now we're baking a small original pepperoni crust pepperoni crust we should say small pepperoni original crust pizza i just caught that and that's not so much a coating error as it just doesn't read correctly fix the order of that baking a small pepperoni original crust pizza and there you have a class structure a blueprint or template for an object and now you know how to pass parameters in when you create the new object and use the new keyword to do that and then you can call methods as usual i guess the one thing we didn't do is log a specific property if we wanted to do that but we could also do that like my pizza dot type and log that to the console and there we get pepperoni as expected with javascript we can change the values of a property just through dot notation so for example we'll use my pizza and we'll set the type once again and this time we'll go supreme save that and now in the console we get baking a small supreme original crust pizza and then log supreme to the console as well after that however this is not desirable we don't really want to access those properties directly like that and so to prevent that from happening or really javascript doesn't prevent it from happening just more of a naming well not a naming conventional get to that it's just a a keyword and a concept to understand and that is the getter and setter so we can use the keyword get now we can't refer directly to the name we don't want to use the exact name again so instead of just saying crust for example i'm going to say get pizza crust and it'll look like a method when we set this and here we'll just say return this dot crust and now we also want a setter so we'll say set pizza crust and now here we'll put a perimeter of pizza crust inside and we'll set this dot crust equals pizza crust now we can use dot notation with pizza crust to set the value so we'll go my pizza dot pizza crust equals and let's make a sausage pizza and now if we want to return that we'll just use dot notation again and we'll say pizza crust now when i save the file oh sausage is not defined i needed to put that in quotes there we go and baking a small pepperoni sausage crust pizza oh i'm not thinking this morning here we go let's make a thin crust pizza baking a small pepperoni thin crust pizza thin very nice so that's how a getter and setter works however this is not usually what i do i do like to refer to the name directly and there is an easy workaround for this instead of using the get and the set keyword and i know i'm not the only one that does this i just create a method called get crust and then i create a method called setcrust and of course that does not interfere by having the same name as crust so it causes no problem there and at the same time it's a method that is read easily when i read the code so this changes how we interact just a little bit though so instead of my pizza dot crust this is my pizza dot set crust and we call it like a method so we use the operators at this point and we have my pizza set crust and i'm setting it to a thin value and then when i get the crust say my pizza dot get crust and again i have to put the operator parentheses after that to actually get the value return so i'm calling these as methods because that's what they are but they do the same thing and they are more readable inside my code there we go baking a small pepperoni thin crust pizza let's go ahead and add one more getter and setter for practice and this time we're going to add a new property as well pizza always has toppings so let's go this toppings equals and set it equal to an empty array so when the pizza object is first created my pizza it has no toppings there are no elements in the array so let's go ahead and add a getter and a setter for those and i'll use the method i described which is actually creating methods so i'll say git toppings and at this point i will say return this dot dot toppings and for set toppings this is where we have to consider that arrays are different and here we'll include a topping and at this point we'll say this dot toppings dot push and we're going to push the new topping into our array save that much and then down here instead of getting the crust we'll go ahead and well let's we need to set the topping first right so we'll say my pizza dot set toppings and now since i was so set on having sausage on the pizza earlier i'll add sausage as a topping and then we can do that again and you set toppings and i'll add hollets and now instead of get crust we'll use get toppings and we'll save this and we look at the console and our get toppings returns our array with sausage and olives that will now be on our pizza all right let's remove a lot of things and simplify our class because we're going to use it as a parent class or we could call it a super class we'll keep the size constructor so we'll still pass in the pizza size parameter i mean inside the constructor and we'll get rid of this dot type we'll get rid of the toppings and we'll keep the get crust and set crust we'll remove the get toppings and set toppings we can keep bake well we don't really need to we don't need a method for this example so let's just create a little extra room here so here is a basic pizza class we have our constructor that accepts a parameter of pizza size and then we also have a value set for the crust property and we have a get crust and a set crust method for the pizza class and this would be the parent class or we could also refer to it as the super class now if we want to create a child class we use the class syntax and we'll say specialty pizza and then use the keyword extends pizza now in the constructor before we can use the keyword this in a child class we have to call with the keyword super we essentially are calling the constructor of the parent class or the super class if you will and now we should pass in what the super class needs at this point and this would be pizza size and now to have pizza size available our constructor here should also accept a pizza size and i should put that in lower case to match up there we go pizza size in the constructor of the child class and now we could have something else here like let's set the type for this specialty pizza because we don't have type in the superclass anymore and we'll call this the works this is a specialty pizza and now we'll give this a method called slice and we'll log to the console inside of our method template literal and we'll say our this dot type pizza oh we should go ahead and use our uh inherited size as well or the size that comes from the constructor of the parent the super as we say here and we're calling this constructor method by using the super keyword in the constructor and again this super keyword has to be used in the constructor before we can ever use the keyword this and so we'll go this dot size as that comes from the parent are the works pizza would be are the works and whatever we call in whatever we pass in as the size so say medium are the works medium pizza has 12 slices a medium should have more like eight let's do that medium has eight slices and we'll save that and now something we can do we don't have to create the parent object we don't have to use this super class to create an object we're just using this blueprint so the parent is a blueprint so we can instantiate an object just based on the child class so we'll call this my specialty we'll just call it my specialty for short and then we'll set that to a new specialty pizza and we better pass in what size right so i think we were going to pass in medium and now we could say my specialty dot slice which is the method we gave the child class the specialty pizza class right here we'll go ahead and save all of that and now we see in the console are the works medium pizza has eight slices so just to recap what we did we created a parent class just a generic pizza class and used that as a blueprint we did not ever instantiate just a pizza object we just used this as a blueprint and then we used class to find a new class and the keyword extends to create a child class based on the parent or you could say super class and once we're inside the constructor of the child class we need to use the keyword super and that keyword calls the constructor of the parent and we needed to pass in pizza size not only in our constructor for the child but we needed to pass it in when we called super because the constructor up here expects pizza size and then we gave it a type property and then we called all of those properties we used all of those properties as we called the method slice and now we defined a new specialty pizza object called my specialty and we called the slice method and we get that in the console now that we've covered child classes let's go ahead and remove this extra sub class and come back to our basic pizza class here we have the constructor that accepts a pizza size we have a crust set and we have a get crust insect crust method just a simple blueprint for an object here and now let's talk about the naming conventions because we had previously discussed at least just a little bit about not accessing the properties or setting their values directly that's why we have say the get crust and setcrust methods here but javascript does allow this so we needed to indicate to other developers we're working with anybody else that may see our code that we intend these properties to be private that means they should not be modified outside of the class they should only be modified within the class using the setcrust method for example would then modify this so of course we need to update this as well and we should update it in our get method also so this underscore essentially indicates to others that these are intended to be private and there is another way to create objects in javascript that solves this problem because even though the intentions are good here we could still access these properties with the underscore and change the values and we could still get the property value as well just using dot notation so these are good intentions and a naming convention but it didn't really solve the problem so there is another way that we have fixed this problem in javascript to demonstrate how this has been solved in javascript i'm just going to go ahead and comment out this class for now we don't want to get rid of it because we'll use it again in the near future but just above what we've been doing i'm going to go ahead and put in a factory function and a factory function is another way to create an object in javascript and as you might have guessed it simply is used as a factory for object creation based on the name so let's just call this pizza factory and then this will accept a pizza size as well let's model it after our class and now we in here we can define a couple of variables inside the function and we'll say pizza well not type let's go with crust again and we'll put original we'll just model it after our other class and then we can say size and of course we'll set that to our pizza size parameter and now we can also return a method inside and this method we're going to go with bake like we had previously had in our class and this will look a little different but this is truly a method of course which is a function as well so this is returning a bake function from our factory function and here we'll say console.log and we'll use a template literal and we'll say baking a let's say size notice i'm not using the keyword this baking a medium and now we can say crust and then we'll say crust pizza and that looks pretty good let's save that oh i've got a syntax error just because it didn't like that semicolon in there there we go save that and now we can define once again say my pizza and we'll set it equal to a pizza factory and now our pizza factory wants a pizza size so let's say small and now we can go my pizza dot bake call that method and we look in the console and we've got baking a small original crust pizza now let's talk about the difference in using a factory function and these are supported this is nothing new this was used long before es6 as well this was a solution to a problem of not being able to create objects that had private uh fields in them you know properties that were not accessible uh outside of the object and and sometimes that is desirable that that is actually what we want and what we are trying to imitate by using naming conventions and getters and setters inside of our class object but this actually does what we want because you cannot access the size variable outside of this code block that's why we learned about scope and you cannot access the crest variable outside of this code block so it is contained it's inside of the pizzafactory function and that's the only way it can be accessed so we have to return a function that uses those variables that we set inside this code block and that's what we did with our bake method essentially right here and then you can see when we set my pizza equal to the pizza factory function and feed at the perimeter it needs we can use dot notation and call the bake method that we have set on my pizza it all works as intended and we get the benefit of truly having these private variables or we could say private properties private fields that are not accessible through dot notation as they would be if we just create a class so this is the workaround that's been going on in javascript for a long time and now i'm going to show you an update from javascript itself that it's fairly new within the last year so it's not it does not have the support that factory functions do now we've said the class syntax has been supported since es6 in 2015 but javascript continues to advance and what i'm about to show you has just been added within about the last year and it does not yet have 100 support through all browsers i'll start by removing our factory function and now i'll uncomment our javascript class save that just so we're back to our basic class and now what i'm about to show you is that classes now support public and private fields in javascript so instead of a value that is static in other words i'm not sending in a parameter when we call the constructor for the pizza class we're just setting it to original to start out with and let's go ahead and get rid of these naming conventions as well again those were to indicate it was supposed to be private but now we support a private field so we do not need to do that we'll start out with a public field and that is anything that is static that we're not feeding in we could go ahead and declare a public field above the constructor and say crust equals original now we'll remove this from the constructor any property that we're going to go ahead and set with a parameter will leave inside of the constructor let's go ahead and set a private field as well a private field is indicated with the hash and we'll say let's go with sauce and we'll just call it traditional sauce probably red tomato sauce but we'll just call that traditional now that is the indication of a private field and so we've set that on our class and we have a public field of crust and now we also have size and we're leaving size as a property that we're setting with the parameter right now we could also make this private if we want to and if we wanted to do that we need to declare it at the top first as a private field if we were to do that and then we would refer to it inside the class with the hash like this well let's go ahead and do that just so we get the example of that now we don't have this dot crust referred to well we should actually and be able to change that with our get and set and let's just leave it at that and oh let's go ahead and add something that uses the size and the sauce so let's let's go ahead and add a declaration we'll just call this a method named here you go and now inside of the here you go method we'll put a console log and we'll go ahead and use a template literal and we'll say here's your [Music] crust like spell crust here's your original now we'll say this sauce oh you know what we probably need this with the crust as well there we go this crust this sauce sauce and now we'll go ahead and use size this size and now pizza that looks good save that no errors that's great so now we'll go ahead and define my pizza again and we'll say that equals a new pizza object now we need to put in a size here we'll put in a large this time and now we can call the here you go method on my pizza save that and we go here's your original traditional sauce large pizza now a couple of things about these private fields the public field we could probably still access let's go ahead and try this i haven't used these as much because they're not supported as well but i wanted to give you a look as i'm sure the support will increase so console.log my pizza dot crust since it's a public field it should still allow us to access that through dot notation yes it does so we got the original value again that's not how we want to do that we would want to use the get crust method i created and that still returns original that's great so that is a public field it's still available to everybody through dot notation but the private field let's go ahead and try to access sauce now we would do that without the hash to access the sauce property we save that and it shows undefined now to just show you what you would get if you tried to access it with the hash here it thinks you're going to define it and it says private field sauce must be declared in an enclosing class now an enclosing class is like what you see here with our pizza class and since i have the bracket pair colorizer extension you can see it draws the line all the way down to the closing curly brace for our class that's what it means by declared in an enclosing class because it thinks we're trying to declare it right there so we would still just be accessing it outside of the class with dot notation and you can see it does not allow that because it's undefined however our public field crust no problem accessing that it delivers original there as you expect so private and public fields are now supported and they must be declared above the constructor and then you can still use them in the constructor as i am here with the pizza size and then you can access both public like crust and private within the class but you can only access the public field outside of the class here's canius.com and this is a great site to check how much support you have for features that are new that have not been around that long you can actually check for features that have been around for a long time as far as that goes but let's check these private and public fields in classes so we'll say public field class see what we get there we go javascript classes public class fields in the usa we've got 44 almost 45 percent coverage global 72 you can see the main browsers safari the latest version of safari just released september 15 2020 supports the public fields and chrome has supported it for a while edge is now based on chrome so you've got about the same support there let's see when that kicked in the latest or i guess the earliest release january 14th of 2020. we've got firefox september 2019 firefox of course the mozilla developers behind that uh that's usually pretty good with features chrome adapts pretty quickly safari is always usually a little late to the party then we've got some support and then we show mobile support over here but you can see we don't have the full support we want at only 44 percent let's go ahead and look at private which i'm sure is very similar private's just a little less almost 43 percent and you can see firefox isn't supporting private at all so that contradicts what i just said about them adapting this past the edge is holding paste there with chrome because they're based on the same engine behind the browser safari is about the same point there for private and public and we're seeing about the rest there's the android browser chrome for android uh where here's ios it's about the same point safari was so again in the low 40s for percent in the us and high 60s to low 70s globally so you do not have full support for these features yet but i am sure they will continue to expand and be supported by more and more browsers hi i'm dave and i hope you enjoyed this tutorial remember to keep striving for daily progress instead of perfection subscribe to my channel and ring the bell to be alerted when i post new tutorials i'll see you next time you

Channel: Dave Gray

Views: 1,496

Rating: 4.8596492 out of 5

Keywords: javascript classes, javascript classes explained, javascript classes tutorial, javascript classes es6, javascript classes private variables, javascript classes private properties, javascript classes private fields, javascript factory functions, javascript factory functions explained, factory functions, factory functions explained

Id: 5fmifZZeJJ4

Length: 31min 18sec (1878 seconds)

Published: Mon Sep 28 2020

Reddit Comments

[u/DaveOnEleven]

In this video we explore the Javascript Class syntax introduced in ES6. We look at adding parameters, getters, setters, child classes with extends, the super keyword, public properties and private fields. We also look at how Factory Functions help us create private variables when we create objects.

✅ Quick Concepts outline:

Javascript Classes:

(0:11) Classes are "syntactic sugar" in JS

(0:45) Creating a simple class with a constructor

(0:50) Using the keyword this

(1:05) Adding a method to the class

(1:35) Classes are templates / blueprints for objects

(1:40) Using the new keyword to create the object

(1:55) Calling the object's method

(2:00) Adding parameters to the constructor

(3:20) Passing multiple parameters to the constructor

(4:35) Accessing properties with dot notation

(5:15) getters and setters

(6:52) A more readable getter and setter method

(8:15) An array property with a getter and setter

(10:20) A parent "super" class

(11:15) Creating a child class with extends

(11:35) The super keyword

(13:45) No need to create a parent object in order to create a child object from the classes

(16:15) A naming convention for private properties

(17:15) Good intentions but not enforced by the code

(17:45) Factory Functions

(19:50) Instantiating a pizza factory object

(20:20) Factory Functions solve the private properties problem

(22:00) New additions to JS allow public and private class fields

(28:40) How much support for public and private class fields?

If you enjoy this video, check out the ones that follow it in the playlist. I’ll continue to add more. Glad to answer your questions, too.

Javascript Classes Explained | Javascript Factory Functions: https://youtu.be/5fmifZZeJJ4