Let's Learn The New Javascript ES6 Class Syntax

hi guys welcome to new video from pipe in list today we're gonna dive right into the ESX class syntax so if you have been wondering a lot for a really long time about es6 thing you really want to learn about es6 or if you haven't or you have actually still want to learn a 6 but you haven't got the opportunity yet there is the opportunity to learn it's not the whole ESX in this video tutorial but if you really like to learn more about es6 topics and grabbed in the morning java scripts into your knowledge bucket thing and try to your master things up with the new features of the SX so today I'm just gonna cover the class syntax of the SX so if you don't know the JavaScript doesn't have actually like classes at all on the basic JavaScript ESX comes up and brought brought to us actually the class syntax or the initialization and has brought a brand new word not only classes a lot of other features but change the JavaScript completely from a small programming language you a big scaled programming language that everyone pretty much right right nowadays he uses for web development so classes are very important and very very necessary for you to know if you wouldn't want to develop modern web applications also if you really want to like be a modern web developer classes are very very important as well as the es6 so for this video I'm just gonna cover the classes and start just divert into about these syntax of the classes and how they actually work and why they are very important and very very powerful as a JavaScript developer so start why I'm having here to cover this year so you can use your favorite cut it so I'm using Visual Studio code or you can use an online code if you like code pen or code past or something like that but this is gonna do the job for us and also I'm gonna use node.js so make sure to go ahead and install node.js I have a full crew shoes about nodejs and my website in here just scroll and let's just show you from the website you're gonna find ojz they make sure to learn more about that nature yes also here and this part you're gonna use node.js for compiling this if you really want to make your project compiled to the web so you're gonna need a couple other things to do that to compile a section make sure to search about how to bring to compile ESX files into the ESX or ESPN or support and stuff like that just google that and you can find a lot of integers about bs6 compilations so just gonna use notes for that so what should let us start by learning what is classes so classes are more like objects on JavaScript so if you're familiar with objects you declare an object like you'd say like felids obj and with the curly braces and here you can give it the attributes and attributes like key value pairs so you give it here the key and you give it : then you give it the value in here I know value of the key and someone else so far you can declare a couple of things you can you can handle arrays and arrays can handle objects and nasty things so javascript is so awesome so incredible like that also you can put in whatever you like variables in here like floats doubles integer variables you can put objects inside objects and other objects inside those all of the objects and someone and so forth so JavaScript supports all of that so this is actually how objects works also you can put in here functions in depth inside objects then run these functions within that particular objects so objects and JavaScript are very nasty and they can just they actually very flexible so you can make them reacts however you tell them to they will react upon your changes or up on you what we have to tell you what you I shall actually tell them to do so this actually what objects classes are more like objects but a little bit more suitable for greater job and for more flexible code manipulation so so let's say for declaring a class all you do is just type in a class and here you the class keyword you give it the name of the class you want to declare let's say I'm gonna use it here like an animal class or something that so I'm just gonna give it like an element and that's it so this is all you need to do for a parent class then open a curly brace and closing curly brace and here we go you've got a class right now now here this is like the Declaration of a class so you need to declare B the class syntax you can give it method and like particular objects so first things first the class has a constructor so constructor is whenever you try to initially this class this constructor is going to be called the first thing is going to be called is the constructor and the constructor is a method so it's type like constructor as you can see we get it with the influences and the constructor as I've said whenever you try to initiate this class the animal class you try to initiate this class and the constructor is gonna be like the first method is gonna be called automatically for you so here whatever you put initialization code or something like that it is gonna be done for you whenever you try to initialize this animal class and structure actually use it for initialization things so here you have this like you can imagine this if classes comes up for you a little bit hard and you can't quietly imagine what is classes take them as an objects so and take this constructor thing as initializer so here the constructor what it does whenever you try to initialize to initiate this and create an instance of this animal class the constructor just gonna go ahead and initialize whatever he code you put in here so each we couldn't try to initialize variables in here and actually variables to declare variables and their classes you can't like saying here like if you're if you're like C developer or PHP or something advanced you can't say in here like this is a variable let's say my variable here and equals to something and like 50 and someone and so forth now this is this is not how it being done with JavaScript and like probably some of you might say why that is happening how can i define my variables I've got this feeling the first time I started learning about JavaScript classes and I've got this like a very real thing that how can i declare variables how functions can return stuff and stuff like that but yeah over time of recording I've got I've got the idea behind the scenes why they have made it looks like that and why they haven't actually made it to declare variables then work with them right right or wrong actually so the declare variable or you can do use this this keyword and this keyword refers to the actual class in so this means this actual class if you're on another class this means whatever class you are endureth or and you're under the class actually then this and you give it a daunting here afterthought you name any variable this is how we differ a variable name it and you assign to it any value like me hello world or something like that hello world I can't spell hello word even hello world I can't spell it out of why so you can spill hello word putting into it variable and this variable is gonna be like declared into this class scope so whatever and do whatever method in here you're going to define or you're gonna use on this class you can access this top name easily and this is not can actually it's not like usually done or only into the constructor so you can declare any variables anytime and do any method as long as you are under the class the actual class code so you can create another method so let's say like spit spit name and this methods is how you can declare a method you give it a method name you give it like a parenthesis and you give it a color braces to define the actual method implementation so this is how we declare methods and you can call them from the actual class instance so let's say this dot name equals hello world but what we want is to pass in the animal name and we want to initialize that so this is what I mean by initialization so you give us some kind of like an initialize it state like a name the first name of the end up in animal and the Klosters gonna take them and put it into the actual class instance or the actual class save it as a variable into the class and putting into it the name that we have to put it into the constructor so whenever we try to initially this animal just gonna give it the name and you're just gonna store it into this class simple as that now under this split name what we want it's just gonna call so long my name is and I just give it like this top name so whatever you want to put into it or reference that variable you must be use this keyword so we chilling it you're not actually accessing any global variables say like you're gonna have you're gonna have like another variable called name in here and it's like hello something like that this case what are using this that going to you that's you not going to access this global variable else you aren't actually going to access the variable into the class instance into the class skill so this what it actually what it does it just gonna prevent us from accessing global variables if you want to access this global variable all you do is just remove this and you are actually good to go so what it wants to wanna actually need to use this and this is all we need to use for the spit name so simple as that now saving this we just go ahead and English way initiate or create an instance of this animal class so we use let's you can use variable or let's if you have noticed me I used letter loss but I love using let's just looks a little bit prettier than using ver or var keyword to declare variable I don't know everyone has its own preferences so let's take our variable and let's call this I don't know like a shark or something something pretty awkward and a shark I'm just gonna initiate this so to initiate this you use the new keyword so whatever you want to initiate or create an instance of a class you use the new keyword and you give it the class name then a parenthesis and this parenthesis what it does doesn't it call the constructor so just gonna go ahead and call the constructor and as you can see whenever I use this parenthesis which is gonna give me the name field so the constructor so take this how's the constructor and you need to pass seen the actual name of the animal so shark let's just name it short or something and here we go this is how we actually creates an instance of a class very simple very straight forward you can now all you do is just gonna go with the shark and you can spit name this is how you can call method you give it the actual instance that I do I've saved and you give it the method name dots using the dot notation and you give it a spit name if this one takes like arguments and stuff you can passing arguments in here and so on and so forth this hour simply works now if we try to run that I'm going to as I've said no genius so I'm gonna use no Jesus from the command line on from the terminal make sure to use terminal on video pseudocode there's an integrated terminal also I have a full video tutorial about video pseudocode so just to go ahead and watch out to check them out on my website so don't be waitin gates for you to learn what we're actually doing I can't write clear no let me just run that using node and just gonna put it underneath Jas and yeah as you can see we get my name is and shark so now we are spinning the shark name or the animal name so spit name and we're just gonna display the actual name that we have just pass it in and or or when actually trying to create the instance of the class as simple as that as you can see this how classes are very simplified version of classes but there's more complicated features of classes you can use on your own application so this just a very very basic snippets of how actually classes are being like defined and like initiated and the actual word example so symbols that is how actually classes work now let's say that we're gonna talk about a little bit about inheritance and extending from like a base class so let's say this animal is a base class and what we want is to have like multiple animal classes so this is like the base or the parent class and we when I just declare another animal class that just gonna have like the same things but a bit more like rather than spit name you can have I don't know something like heels or something and the shark says I don't know how Charlotte actually reacts underwater or something else but you can you've got the point actually so let's say we're gonna declare a child the class and we can see them how it really works so we'll just say it's gonna be like completely charged and we want to extend it from the animal class so you say extends the keyword use sticks in extends keyword and you give it which class you wanna extend from and we're gonna give it the animal color braces and here we've got our class so calling the constructor in here as well so of the constructor what we need since this one takes the name whenever you try to implement the constructor under a child class or whatever base class in here and whenever the base class is using the Constructors and make sure to pass in the base class variables first or base class arguments first in order to initialize that and you can pass in whatever other things like later on on this let's say I don't know the shark ate the real awkward but or let's say like a slice or long or length for something this okay let's say the shark length for three years or something this so this is the constructor and whenever you're are actually in dogie like the child class you need to call in the super so make sure to do that whenever your art extending from another class call me the super and the super means you are calling to the constructor of the base class so here you are initiating the animal class or the class you aren't extending from so make sure to do that if you don't see gonna give you a really weird earlier you can't quite understand at all so make sure to use in the superclass to initiate that whenever you're already using the constructor and you're the child class simple as that so here as I've said when you are actually construction it from another child class you need to pass in the argument of the first one so here you need to pass in the arguments of the name symbols that and we're just gonna have with the length is say equals let's though the length is only available into the shark or the child scalp symbols that so this is how we can get it and here we have the spit name now this shark class also has the spitting like spitting function or the spit name method so we don't need to redefine that at all so we can access the spit name and just gonna spit us the name and with no problems so here what we want is to extend this base class and add more methods let's say like what is what is my length and just gonna spit the length of this one so just gonna console.log she's gonna equals this length symbols that so this method just gonna extend from or extend actually the base class and add another method but this method still exists under the shower class since we are extending from the animal now simple style just go ahead and initiate this let's say shark equals shark and here calling the constructor of course as you can see give us which name and is gonna give it the short name and whatever length so which is gonna give you three points I don't know three point five like three point five meters or something like that from whatever feats and this is actually how you initiate things so let's just go ahead and use the shark if you can notice that whatever you do use that it gotta give us the options of using the spit name even though the spit name isn't the point under the child thing but it's the one under the parent which means it's just gonna extend everything from it so we can use the spit name in here and we can also use the new method as we have created only into this like the child think and what is my line symbols now so here this should give us a really nice output of the name and the length of the shark so I try to do yes no it mayn't audience and us can see just gonna give us my name is charged the same thing well sitting here and also the length of 3.5 us as a normal track would be I don't know I'm not actually good about sharks so something about don't don't take that on your mind that I'm trying lovers I just randomly use it this word I don't know how just came up on my mind but it just did just take you like this okay now jumping on the other cool feature with the yes X classes so now let's say we want to use like setters and getters so here you have like this length it's like the local variable of the shark class you can what you can do in here you can change this into one time so you can say in length and you can assign any new I mean you value into this attribute of in class whatever but what is not this is not a good like this is not good habit at all the development field so what we need is to like whatever we want to change this length is to use a method so we can deploy a method called sets length and here we pass in the new length and we cannot just sense the this length equals the new length and someone on so forth but you can use it this this is like the old way what actually all developers would be use you still can use that it's very efficient very reliable but what we want to use is the new syntax so you put in the set and you give it whatever name in here so let's just gonna go with a set length so this is not gonna be like also a function but when you call it there's not gonna be actually a real method so you can call so here it takes the length and we use this don't length equals length suppose that this guy just set us the the old length to a new length and so on and so forth now let's just go with the the short and whenever we try to set link as you can see we just did ok shows us this is not a function or this is not a method but this is like a variable but why we have just like declared it or define it as a method but this is not a method this is why using the set keyword this is taking it to a server but so we set length we can't call it like a task we must this is a variable so we just cannot assign to it something and it's a like just gonna be becomes 4 feet or something I was gonna see this is not a method it's pretty good like using this without a method thing so you can take it as like a local variable something a pass or a public variable that you can change whatever you want safely no Mon mean tortillas tennis can see the length has changed from FIFO a three point five into the newly assigned length which is four fits symbols now this is how actually sets works you can also use the Gans it's pretty much the same thing you can get the loan and you're just going to do is return we turn this length lengthens someone and so forth this actually how it works in a very basic way so you can use also the gate length and the gate lengths also it can be used as you can see the gate length it's also a variable all you're gonna do is just gonna return to you the lay actual length you can't set anything in here but all you can do is just grab some information from this variable this variable only for referencing and grabbing the value not for setting the value or something about so this is how it's very efficient with this set and again now moving on into the oven like the cool thing is the static method so if you have never heard about static methods what you do to the close static method if you say the static keyword before the method and you give it's like the the thing so it just go ahead with calculate calculates I don't know calculates please I can't find what to do let's just go ahead with who I am Who am I okay and this one what it does just gonna print out this dot me so if we try to now to call this after using the shark just go with the shark Who am I since it's a method so we can clearly use that with no problems so if you try no may touch and we have got an error in here as simple as that so if got a my is not a function so some of you might say why with that we have declared a function but remember it is a static unless static method it's not a normal method so what is about static method static methods are like special methods so this methods are under the actual instance so they are one-time method while the static methods are non runtime method so the static method has no relationship with the actual class instance so this is the class instance so whenever we are actually in she's new class instance and we assign it to this so this this keyword in here whenever we are actually into the runtime this is gonna be like replaced with this instance in here so just gonna javascript take this instance and replace the DES into the class with the shark I'm just gonna work so you can access shark boat length and Charlotte the lengthen shark door name and someone will so forth and you can also get these functions but the static method is not not a runtime which means it doesn't know about this instance model so which means it can't actually access the variables of that class it doesn't know about if any other function that like the the actual class has it doesn't actually know about this keyword or the super keyword that allow you to access actually be the base class in here so if you can access any base class variables or they have like special variables only available under the base class you can access into the super in here all of that is not available into the static method all you can do in here is print something or do something has no relation with the actual classes which means has no relation with the variables that has no relation with the methods that the class holds nothing like that so you can do like consumer log some hard coded or text or something less have a word or something this footwork we try to pronounce a word in here you can talk place some things in return like like static things but you can't access any variables in here and you have no relation with the actual classes so statics doesn't know about the actual class instance at all all it does it hub is you can return or print out or do something like the class has no relation actually with the class symbols that if we try to go ahead with it clear right now and try to run this again and as you can see here with God's like who am i house is not a function we're still getting like advanced I remember what I said like the shark or the my method is not actually has no relation with the actual instance so which means we can't access that instance what we can access from is the actual class so we take this class other objects and it does have that method like it doesn't it does actually know about the who are mine method under the actual class as the actual class the the objects itself and this is called like object methods not instance of an instance method while those methods called and sis method this one called object method so only you can access from the class and you can here say who I'm on and just gonna give you a like maybe the the method and you can access it remember that I've not used to be capsule lettering here the of the shark have just used the shark itself the actual class name and if trying to save that for me grab actually the terminal in here clear everything up bring down top as you can see we've got hello world successfully printed for us with no problem so as you can see we've got the shark in here Who am I after trying to access it from the actual class name not from the actual instance so this what about a cloud stack method you can use static method on a variety of things you can like console.log some errors you can come so long I don't know bringing some stuff specifically for that animal or the animal class or you can do some checking before a bath and so on and so forth so it's very useful some constant sometimes not all the time actually but what we need to use is like this method so I guess it's pretty much actually guys for the SX syntax classes so this what we need to cover so far but classes initialization and basic stuff and I think the video has been very very long right now so yeah we need to stop this video and that was actually guys thanks for watching I really really hope you enjoyed all if you have any video suggestions anything at all I'll be very happy also don't forget about the subscription and like comments I'll be very very happy and reading your comments make me feel really really nice so thanks for watching again I will catch you all in the next video