Learn JavaScript #21 | Classes Explained

We're all classy people, and so is JavaScript. So, if you come from a programming background then you're going to be familiar with classes and what they do, but if you're not or even if you just need a primer on the subject. A class is a blueprint that you can create objects from, and they will, we can in the in the class, we can define certain functions and variables that each object created from that class will have, it will have access to. So, classes in JavaScript were not supported before ECMAScript 2015 which is a specification, which is just a series of rules, that are official, that browsers can then go ahead and say yeah, we will write support for that into our JavaScript interpreter. So, what we need to do is also discuss what browsers are supported and and why. So, Chrome 42 and above, Firefox 45 and above, and Microsoft edge are all supported. Safari as well. I think Safari 12...I could be wrong. Internet Explorer is not supported, neither is Opera, neither are those browsers before those versions. So this is not a legacy web development course. We're not going to be aiming for compatibility across Internet Explorer 6, for example, or Windows 98. That's not what this course is about this course is about. This course is about modern web development, and so one of the tools in a modern web developers toolbox is ECMAScript 2015, like html5. Now if you guys do want to learn about legacy web development, that might actually be a course I put together after this because I love retro things and that would be fun. But, aside from that, let's start using classes. Let me analogize this a bit. If we were to create animals, they would all have similar properties, or they will all have the same properties. So they would all have a height, width, and oh wait, they may also have a volume, and then there's other specifics that not all animals have. But for all those properties that all animals do have, for instance a weight, we're going to create that inside of the class, so that when we instantiate the class, when we create an object using the blueprint that is the class, that property will be set. So every object will have it. So, just to understand this better you guys are going to have to do it and see it, so let's get started. To create a class in JavaScript it's very similar to every other programming language. The procedure is, rather the syntax, is close to Python and C, I think C# I could be wrong, and a few others that I've never used. So, what we do is we use the keyword class, and then we give the name to our class just like functions. So in this case it's going to be called animal, and then you put a space and your curly brackets. Now this is going to tell me that it's not supported by the current javascript version, which is wrong, that's something to do with JetBrains. If you guys get a similar error in your code editor it is safe to ignore that as long as you are using one of the supported browsers, or a modern browser. So, we created a class now we can instantiate it, or now we can create an object that uses this class as a blueprint. So let's go ahead and create a variable called dog, it's going to be equal to the instantiation of this class. How you do that is you use the keyword new, space, and then the name of the class. So in this case it's animal, and you use regular brackets after this much like when you call a function, that's what this looks like. So, now we've created our class and we've instantiated the class, so I'm going to save this and run it in the browser, and there are no errors. That means we've done everything up to this point correctly. So, that's how to create a class. In the next video we're going to be discussing how to run a function when the class is created, and then we're going to get into class methods, variables, etc, and then how to do stuff with it. And then we're going to do a project, so I can't wait for that. Thank you guys for watching and I'll see you guys in the next video.