WEBVTT 1 00:00:01.430 --> 00:00:03.435 Let's now talk about one of the biggest 2 00:00:03.435 --> 00:00:06.602 additions to ES6, and that is classes. 3 00:00:08.256 --> 00:00:11.152 Now, classes actually don't add anything new 4 00:00:11.152 --> 00:00:14.217 to the language, they're just synthetic sugar 5 00:00:14.217 --> 00:00:18.168 over the way we do prototypal inheritance in JavaScript, 6 00:00:18.168 --> 00:00:21.233 and that means that classes simply make it easier 7 00:00:21.233 --> 00:00:24.147 to implement inheritance and to create objects 8 00:00:24.147 --> 00:00:26.014 based on blueprints. 9 00:00:26.014 --> 00:00:29.206 So, in ES5, these blueprints are called 10 00:00:29.206 --> 00:00:31.500 function constructors, right? 11 00:00:31.500 --> 00:00:34.589 And we edit methods to their prototype properties 12 00:00:34.589 --> 00:00:37.478 in order to make all the instances created through 13 00:00:37.478 --> 00:00:40.998 a function constructor inherit these methods. 14 00:00:40.998 --> 00:00:43.254 So, let's start by doing that now, 15 00:00:43.254 --> 00:00:47.614 and then write the same code with ES6 classes after that. 16 00:00:47.614 --> 00:00:50.281 So, ES5, and I'm going to create 17 00:00:51.814 --> 00:00:54.002 a person function constructor, 18 00:00:54.002 --> 00:00:57.419 so do one that we already know very well. 19 00:00:58.556 --> 00:01:01.889 So Person5, because of ES5 is a function 20 00:01:04.421 --> 00:01:07.921 which accepts the name, the year of birth, 21 00:01:09.695 --> 00:01:11.445 and also a job, okay? 22 00:01:14.277 --> 00:01:17.947 And I'm writing it as a function expression here, okay, 23 00:01:17.947 --> 00:01:20.170 but I could also equally have written it 24 00:01:20.170 --> 00:01:24.343 as a function declaration, so it works the exact same way. 25 00:01:24.343 --> 00:01:26.926 So, all of this is nothing new. 26 00:01:29.461 --> 00:01:33.628 Okay, so this.yearOfBirth is year of birth, of course, 27 00:01:38.743 --> 00:01:42.326 and finally the job is a job that we input. 28 00:01:44.089 --> 00:01:47.799 Alright, and now to make all the instances 29 00:01:47.799 --> 00:01:50.688 inherit a calculateAge method. 30 00:01:50.688 --> 00:01:53.243 It's as easy as adding it to the prototype property 31 00:01:53.243 --> 00:01:56.160 of the function constructor, right? 32 00:01:58.204 --> 00:02:01.047 So all of this is nothing new. 33 00:02:01.047 --> 00:02:05.214 But, so here we can practice it a little bit more, okay? 34 00:02:09.927 --> 00:02:14.541 So the age is, and let's actually create a new date here 35 00:02:14.541 --> 00:02:18.191 so that we are always up to date with the year. 36 00:02:18.191 --> 00:02:21.608 So get full year minus the year of birth. 37 00:02:26.341 --> 00:02:30.008 Understand, simple, log this to the console. 38 00:02:31.606 --> 00:02:34.139 So very simple stuff. 39 00:02:34.139 --> 00:02:37.639 And just to test it, john5 is a new Person 40 00:02:44.599 --> 00:02:47.924 called John, born in 1990, and let's say 41 00:02:47.924 --> 00:02:49.591 that he's a teacher. 42 00:02:50.769 --> 00:02:54.266 Okay, so this is the way that we used to do it in ES. 43 00:02:54.266 --> 00:02:58.323 Let's now do the exact same thing but using ES6 classes, 44 00:02:58.323 --> 00:03:01.573 so that you can see the big difference. 45 00:03:03.697 --> 00:03:07.425 And so we use the class keyword, and then we simply 46 00:03:07.425 --> 00:03:10.497 say the name of the class, which is similar 47 00:03:10.497 --> 00:03:13.610 to the name of the function constructor that we used before. 48 00:03:13.610 --> 00:03:16.490 So this should be called Person, and I'm gonna call it 49 00:03:16.490 --> 00:03:19.496 Person6 here, and that's it. 50 00:03:19.496 --> 00:03:22.683 So it looks a bit like a function declaration, right, 51 00:03:22.683 --> 00:03:26.322 but this is actually a class declaration, 52 00:03:26.322 --> 00:03:28.535 and the way that a class declaration works 53 00:03:28.535 --> 00:03:33.010 is that all classes have to have the constructor method, 54 00:03:33.010 --> 00:03:36.177 okay, so we have to write constructor, 55 00:03:38.892 --> 00:03:41.404 and this is where we define the initial properties 56 00:03:41.404 --> 00:03:44.330 that we want in our object. 57 00:03:44.330 --> 00:03:46.114 So again it's going to be, of course, 58 00:03:46.114 --> 00:03:48.697 name, year of birth, and a job. 59 00:03:54.079 --> 00:03:56.884 And then this looks like just a regular function, 60 00:03:56.884 --> 00:03:59.222 and what we then do here is the exact same thing 61 00:03:59.222 --> 00:04:02.535 as we did before, so we have to say this name 62 00:04:02.535 --> 00:04:06.009 is equal to the name that we pass in, 63 00:04:06.009 --> 00:04:09.509 this.yearOfBirth, should be year of birth, 64 00:04:10.781 --> 00:04:14.074 which is the one that we pass in here. 65 00:04:14.074 --> 00:04:17.502 And of course the same with the job. 66 00:04:17.502 --> 00:04:20.548 Okay, so again, this part here, 67 00:04:20.548 --> 00:04:23.097 the constructor part, which every class declaration 68 00:04:23.097 --> 00:04:27.294 has to have is very similar to this part here 69 00:04:27.294 --> 00:04:29.555 of the function constructor. 70 00:04:29.555 --> 00:04:31.922 Now, if we want to add a method to this, 71 00:04:31.922 --> 00:04:35.242 we simply would also here in the class. 72 00:04:35.242 --> 00:04:39.242 So all we have to do now is to say calculateAge, 73 00:04:41.482 --> 00:04:44.808 and that's it, now we can add our code in here. 74 00:04:44.808 --> 00:04:48.731 So there's no function keywords here, no prototype 75 00:04:48.731 --> 00:04:50.099 like we had to do here. 76 00:04:50.099 --> 00:04:53.745 No, all we do here is to simply add this new method 77 00:04:53.745 --> 00:04:55.328 right to our class. 78 00:04:57.374 --> 00:05:01.320 And note that we don't have any separating punctuation here, 79 00:05:01.320 --> 00:05:05.023 okay, so no commas or no semicolons 80 00:05:05.023 --> 00:05:07.068 like in objects, for example. 81 00:05:07.068 --> 00:05:08.778 In here, in the class definition, 82 00:05:08.778 --> 00:05:12.417 we don't need anything like that, okay. 83 00:05:12.417 --> 00:05:15.739 So I'm just gonna copy the code from the calculateAge 84 00:05:15.739 --> 00:05:18.599 method there to here, because everything 85 00:05:18.599 --> 00:05:21.560 is gonna work the same, and that's it. 86 00:05:21.560 --> 00:05:24.500 So this class here is now effectively 87 00:05:24.500 --> 00:05:28.744 the exact same thing as this, but it's nicely structured 88 00:05:28.744 --> 00:05:32.755 here into this entire class and it looks a bit better, 89 00:05:32.755 --> 00:05:34.757 and is also easier to write. 90 00:05:34.757 --> 00:05:38.285 And so that's why we say that it's synthetic sugar. 91 00:05:38.285 --> 00:05:41.750 And let's now create an instance of this class, 92 00:05:41.750 --> 00:05:45.917 and I'm gonna make it a constant, so john6 is a new Person6 93 00:05:52.221 --> 00:05:56.388 called John, also born in 1990, and he is also a teacher. 94 00:05:59.479 --> 00:06:01.718 And what I want to do now is to actually show you 95 00:06:01.718 --> 00:06:05.991 in a console that these two things are the exact same thing. 96 00:06:05.991 --> 00:06:09.050 So let's take a look at them here in the console. 97 00:06:09.050 --> 00:06:12.467 So john5 and john6, and let me open them. 98 00:06:17.991 --> 00:06:20.648 And here we see that they actually look the exact same, 99 00:06:20.648 --> 00:06:23.478 right, so all of these are the same. 100 00:06:23.478 --> 00:06:25.542 The prototype is still the object 101 00:06:25.542 --> 00:06:28.755 and in here we inherit the calculateAge method 102 00:06:28.755 --> 00:06:31.255 that we defined up here, okay? 103 00:06:32.132 --> 00:06:34.273 And then in here in the prototype, 104 00:06:34.273 --> 00:06:37.499 we also have the calculateAge method, 105 00:06:37.499 --> 00:06:39.953 which is of course this one here. 106 00:06:39.953 --> 00:06:43.353 So writing it like this is under the hood of JavaScript, 107 00:06:43.353 --> 00:06:47.471 behind the scenes, converted to the exact same thing 108 00:06:47.471 --> 00:06:49.990 as we wrote in the old way. 109 00:06:49.990 --> 00:06:52.168 So again, this is just synthetic sugar, 110 00:06:52.168 --> 00:06:55.227 which makes it easier to write classes 111 00:06:55.227 --> 00:06:57.190 than it was before. 112 00:06:57.190 --> 00:07:00.683 And actually, there are some people criticizing classes, 113 00:07:00.683 --> 00:07:03.737 because they basically hide the object-oriented 114 00:07:03.737 --> 00:07:06.553 nature of inheritance in JavaScript, 115 00:07:06.553 --> 00:07:09.624 and so some beginners who don't learn about that, 116 00:07:09.624 --> 00:07:12.597 they may never really understand how inheritance works 117 00:07:12.597 --> 00:07:14.776 behind the scenes in JavaScript. 118 00:07:14.776 --> 00:07:17.175 But you do understand it, right? 119 00:07:17.175 --> 00:07:21.882 And so you're 100% ready to start using ES6 classes. 120 00:07:21.882 --> 00:07:24.372 Now, another thing that we can do with classes, 121 00:07:24.372 --> 00:07:27.802 is to add static methods, and static methods 122 00:07:27.802 --> 00:07:30.925 are methods that are simply attached to the class, 123 00:07:30.925 --> 00:07:34.535 but not inherited by the class instances, 124 00:07:34.535 --> 00:07:38.198 so by objects that we create through that class. 125 00:07:38.198 --> 00:07:41.126 So I actually think that this isn't really helpful, 126 00:07:41.126 --> 00:07:43.288 but I still wanted to show it to you. 127 00:07:43.288 --> 00:07:47.455 So let's say that we want to add a static class here 128 00:07:48.962 --> 00:07:50.879 simply called greeting. 129 00:07:54.506 --> 00:07:58.866 And all we do is to log something to a console. 130 00:07:58.866 --> 00:08:00.616 Let's say, Hey there. 131 00:08:01.462 --> 00:08:04.857 So we can use this like as helper functions. 132 00:08:04.857 --> 00:08:08.309 So in order to use this, we cannot use it on John, 133 00:08:08.309 --> 00:08:10.764 because it's a static method, and as I said, 134 00:08:10.764 --> 00:08:13.465 these instances are not gonna inherit it. 135 00:08:13.465 --> 00:08:17.676 And so, all we can do is to call it like this. 136 00:08:17.676 --> 00:08:19.426 So, Person5.greeting. 137 00:08:24.495 --> 00:08:27.289 So it's basically a method that is attached 138 00:08:27.289 --> 00:08:28.700 to this class definition, 139 00:08:28.700 --> 00:08:31.285 and this class definition is under the hood, 140 00:08:31.285 --> 00:08:34.269 behind the scenes, a function definition, 141 00:08:34.269 --> 00:08:37.009 and so, it's also an object as you already know. 142 00:08:37.009 --> 00:08:40.239 And so we know that we can attach methods to an object, 143 00:08:40.239 --> 00:08:43.165 and so that's simply what we're doing here. 144 00:08:43.165 --> 00:08:47.262 So if we now reload this, we get this error here, 145 00:08:47.262 --> 00:08:50.803 and that's simply because I misspelled it. 146 00:08:50.803 --> 00:08:54.620 But now, of course it works with our Hey there 147 00:08:54.620 --> 00:08:56.763 string log to the console. 148 00:08:56.763 --> 00:08:59.721 So again, that part, I think is not really useful, 149 00:08:59.721 --> 00:09:02.703 but we can still use it if we want. 150 00:09:02.703 --> 00:09:06.870 Alright, so that's it for the fundamentals of ES6 classes. 151 00:09:07.880 --> 00:09:10.550 Just two more things that I need to say here, 152 00:09:10.550 --> 00:09:14.557 and first, the class definitions are not hoisted, 153 00:09:14.557 --> 00:09:16.970 so unlike function constructors, 154 00:09:16.970 --> 00:09:19.123 we need to first implement a class, 155 00:09:19.123 --> 00:09:22.770 and only later in our code we can start using it. 156 00:09:22.770 --> 00:09:26.585 So, this is a very important thing to keep in mind. 157 00:09:26.585 --> 00:09:29.921 And second, we can only add methods to classes, 158 00:09:29.921 --> 00:09:31.689 but not properties. 159 00:09:31.689 --> 00:09:33.467 But that's not a problem at all, 160 00:09:33.467 --> 00:09:36.437 because inheriting properties through the object 161 00:09:36.437 --> 00:09:39.628 instances is not a best practice anyway. 162 00:09:39.628 --> 00:09:42.426 And so, that's why this rule is now really enforced 163 00:09:42.426 --> 00:09:43.759 here in classes. 164 00:09:44.810 --> 00:09:47.011 Okay, so in the next lecture, 165 00:09:47.011 --> 00:09:49.321 we will see how to implement inheritance 166 00:09:49.321 --> 00:09:53.534 from one class to another, and that's a very cool topic, 167 00:09:53.534 --> 00:09:57.617 so don't wait and move right to the next lecture.