WEBVTT 1 00:00:01.540 --> 00:00:02.380 So we learned 2 00:00:02.380 --> 00:00:05.090 how to implement prototypal inheritance 3 00:00:05.090 --> 00:00:06.877 with constructor functions 4 00:00:06.877 --> 00:00:09.550 and then manually setting methods 5 00:00:09.550 --> 00:00:13.200 on the constructor function's prototype property. 6 00:00:13.200 --> 00:00:18.040 But now it's time to turn our attention to ES6 classes, 7 00:00:18.040 --> 00:00:22.080 which essentially allow us to do the exact same thing 8 00:00:22.080 --> 00:00:25.673 but using a nicer and more modern syntax. 9 00:00:27.530 --> 00:00:29.480 Now, as I mentioned earlier, 10 00:00:29.480 --> 00:00:33.790 classes in JavaScript do not work like traditional classes 11 00:00:33.790 --> 00:00:38.120 in other languages like Java or C++. 12 00:00:38.120 --> 00:00:41.110 So instead, classes in JavaScript 13 00:00:41.110 --> 00:00:44.370 are just syntactic sugar over what we learned 14 00:00:44.370 --> 00:00:46.630 in the last few videos. 15 00:00:46.630 --> 00:00:49.270 So they still implement prototypal inheritance 16 00:00:49.270 --> 00:00:52.010 behind the scenes but with a syntax 17 00:00:52.010 --> 00:00:53.230 that makes more sense 18 00:00:53.230 --> 00:00:56.740 to people coming from other programming languages. 19 00:00:56.740 --> 00:00:58.440 And so that was basically the goal 20 00:00:58.440 --> 00:01:01.520 of adding classes to JavaScript. 21 00:01:01.520 --> 00:01:05.963 But anyway, let's now implement person using a class. 22 00:01:06.870 --> 00:01:10.560 So we can write class and then the name 23 00:01:10.560 --> 00:01:11.920 of the class. 24 00:01:11.920 --> 00:01:15.440 And let's actually call it PersonCl. 25 00:01:15.440 --> 00:01:17.850 So that stands for class. 26 00:01:17.850 --> 00:01:20.980 And then curly braces like this. 27 00:01:20.980 --> 00:01:24.210 And so this is actually a class declaration 28 00:01:24.210 --> 00:01:25.560 but just like in functions, 29 00:01:25.560 --> 00:01:28.440 we also have class expressions. 30 00:01:28.440 --> 00:01:30.823 And so that would work like this. 31 00:01:31.980 --> 00:01:34.543 So class expression. 32 00:01:36.450 --> 00:01:40.090 And class declaration. 33 00:01:40.090 --> 00:01:43.223 And so then you can pick whichever you like the most. 34 00:01:45.010 --> 00:01:47.640 So it would be PersonCl, 35 00:01:47.640 --> 00:01:49.393 and then class, 36 00:01:51.420 --> 00:01:53.180 and then just like a function, 37 00:01:53.180 --> 00:01:54.763 but without the arguments. 38 00:01:55.780 --> 00:01:56.680 Okay? 39 00:01:56.680 --> 00:01:59.040 And that is because, in fact, 40 00:01:59.040 --> 00:02:02.083 classes are just a special type of functions. 41 00:02:03.120 --> 00:02:05.850 So although we use the class keyword here, 42 00:02:05.850 --> 00:02:09.260 behind the scenes, classes are still functions, 43 00:02:09.260 --> 00:02:12.010 and therefore, we have class expressions 44 00:02:12.010 --> 00:02:14.000 and class declarations. 45 00:02:14.000 --> 00:02:14.940 Now, for some reasons, 46 00:02:14.940 --> 00:02:17.540 I prefer the class declaration 47 00:02:17.540 --> 00:02:19.903 and so I'm gonna use that right here. 48 00:02:21.030 --> 00:02:23.553 And so this is how we write a simple class. 49 00:02:23.553 --> 00:02:25.670 And then inside the class, 50 00:02:25.670 --> 00:02:28.010 the first thing that we need to do 51 00:02:28.010 --> 00:02:30.293 is to add a constructor method. 52 00:02:31.520 --> 00:02:33.400 So just like this, 53 00:02:33.400 --> 00:02:35.700 and this constructor actually works 54 00:02:35.700 --> 00:02:37.440 in a pretty similar way 55 00:02:37.440 --> 00:02:39.530 as a constructor function, 56 00:02:39.530 --> 00:02:42.010 so as we studied previously 57 00:02:42.010 --> 00:02:46.490 but this one is actually a method of this class. 58 00:02:46.490 --> 00:02:49.780 And in fact, it needs to be called constructor. 59 00:02:49.780 --> 00:02:51.640 So that is the rule. 60 00:02:51.640 --> 00:02:54.240 But just like in constructor functions, 61 00:02:54.240 --> 00:02:57.740 we pass in arguments basically for the properties 62 00:02:57.740 --> 00:02:59.513 that we want the object to have. 63 00:03:00.870 --> 00:03:02.263 So that's again firstName, 64 00:03:04.040 --> 00:03:05.750 and then the birthYear. 65 00:03:07.940 --> 00:03:10.910 Now, the act of creating a new object 66 00:03:10.910 --> 00:03:14.710 actually also works in the exact same way as before. 67 00:03:14.710 --> 00:03:16.830 So using the new operator. 68 00:03:16.830 --> 00:03:20.240 And so therefore, whenever we create a new object, 69 00:03:20.240 --> 00:03:23.860 so like a new instance using the new operator, 70 00:03:23.860 --> 00:03:27.290 this constructor will automatically be called. 71 00:03:27.290 --> 00:03:30.113 So let's actually try that right away. 72 00:03:32.150 --> 00:03:34.533 And this time, let's create jessica here. 73 00:03:36.760 --> 00:03:39.270 So new PersonCl 74 00:03:40.370 --> 00:03:42.210 and so as you see, everything here 75 00:03:42.210 --> 00:03:44.640 looks exactly the same as before. 76 00:03:44.640 --> 00:03:47.220 So it looks just like a regular function call 77 00:03:49.240 --> 00:03:53.350 and again, we also use the new keyword here. 78 00:03:53.350 --> 00:03:55.570 And so therefore, just like before, 79 00:03:55.570 --> 00:03:58.690 the this keyword here inside of the constructor 80 00:03:58.690 --> 00:04:02.810 will also be set to the newly created empty object. 81 00:04:02.810 --> 00:04:04.680 And so just like before, 82 00:04:04.680 --> 00:04:08.383 we set the properties of the object like this. 83 00:04:09.370 --> 00:04:13.160 So this.firstName is equal to firstName 84 00:04:13.160 --> 00:04:15.853 that we receive and the same for the birthYear. 85 00:04:20.750 --> 00:04:22.060 All right. 86 00:04:22.060 --> 00:04:25.170 So basically, when we create a new instance here, 87 00:04:25.170 --> 00:04:28.410 then it is this constructor that is gonna be called 88 00:04:28.410 --> 00:04:30.880 and that will return a new object 89 00:04:30.880 --> 00:04:33.973 and then that will be stored here into jessica. 90 00:04:36.000 --> 00:04:38.890 So let's just log this to the console 91 00:04:39.840 --> 00:04:43.790 and so, in fact, it looks just like before. 92 00:04:43.790 --> 00:04:48.100 All right, so here we basically have the properties 93 00:04:48.100 --> 00:04:50.310 that will be stored in the new object 94 00:04:50.310 --> 00:04:52.000 that we want to create. 95 00:04:52.000 --> 00:04:55.060 And so now it's time for the methods. 96 00:04:55.060 --> 00:04:58.560 And the methods we simply write like this. 97 00:04:58.560 --> 00:05:01.030 So we can simply add them here 98 00:05:01.030 --> 00:05:03.280 and all we have to do is to write their name. 99 00:05:05.210 --> 00:05:08.030 So just like a regular function in here. 100 00:05:08.030 --> 00:05:11.047 So this is very nice and very convenient. 101 00:05:11.047 --> 00:05:14.663 And so let's simply do the same as before. 102 00:05:16.660 --> 00:05:19.033 So this.birthYear. 103 00:05:20.970 --> 00:05:23.260 Now, what's important to understand here 104 00:05:23.260 --> 00:05:25.010 is that all of these methods 105 00:05:25.010 --> 00:05:26.530 that we write in the class, 106 00:05:26.530 --> 00:05:28.630 so outside of the constructor 107 00:05:28.630 --> 00:05:31.780 will be on the prototype of the objects. 108 00:05:31.780 --> 00:05:34.420 And not on the objects themselves. 109 00:05:34.420 --> 00:05:37.385 So this is really just like before, 110 00:05:37.385 --> 00:05:39.070 prototypal inheritance. 111 00:05:39.070 --> 00:05:40.500 And, in fact, we're gonna be able 112 00:05:40.500 --> 00:05:41.823 to confirm that here. 113 00:05:42.720 --> 00:05:45.900 So as we inspect this Jessica object, 114 00:05:45.900 --> 00:05:48.320 when we look into its prototype, 115 00:05:48.320 --> 00:05:52.240 then we will once again see the calcAge function here. 116 00:05:52.240 --> 00:05:53.140 All right? 117 00:05:53.140 --> 00:05:55.290 And so therefore, of course, 118 00:05:55.290 --> 00:05:57.713 we're gonna be able to do this. 119 00:05:59.550 --> 00:06:01.550 And actually, we don't even need to log it 120 00:06:01.550 --> 00:06:04.720 to the console because the calcAge method 121 00:06:04.720 --> 00:06:07.253 already does that on its own. 122 00:06:08.270 --> 00:06:10.853 And so indeed, we get an age here. 123 00:06:11.960 --> 00:06:14.350 And so one more time, let me prove to you 124 00:06:16.400 --> 00:06:17.900 that jessica_proto__is equal 125 00:06:24.980 --> 00:06:28.923 to PersonCl.prototype. 126 00:06:29.950 --> 00:06:31.850 And it is true. 127 00:06:31.850 --> 00:06:35.090 And so as you see, PersonCl here acts 128 00:06:35.090 --> 00:06:37.517 just like any other function constructor 129 00:06:37.517 --> 00:06:41.280 but the only difference that this looks a little bit nicer. 130 00:06:41.280 --> 00:06:44.260 So with this syntax, we don't have to manually mess 131 00:06:44.260 --> 00:06:46.210 with the prototype property. 132 00:06:46.210 --> 00:06:49.580 All we have to do is to write the methods here, 133 00:06:49.580 --> 00:06:50.940 so inside the class, 134 00:06:50.940 --> 00:06:53.050 but outside of the constructor, 135 00:06:53.050 --> 00:06:55.150 and then they will automatically be added 136 00:06:55.150 --> 00:06:58.653 to the prototype property of the class basically. 137 00:06:59.570 --> 00:07:01.320 So let me actually write that here. 138 00:07:09.640 --> 00:07:12.460 So they will be added to the prototype property 139 00:07:12.460 --> 00:07:15.420 of the Person class, which once again 140 00:07:15.420 --> 00:07:17.320 is gonna be the prototype 141 00:07:17.320 --> 00:07:20.960 of the objects created by that class. 142 00:07:20.960 --> 00:07:24.150 And we can take this demonstration even further 143 00:07:24.150 --> 00:07:27.120 by also adding a method manually 144 00:07:27.120 --> 00:07:28.930 to the prototype. 145 00:07:28.930 --> 00:07:31.203 So that's gonna work just as fine. 146 00:07:34.220 --> 00:07:36.223 So let's create a greet method here. 147 00:07:43.150 --> 00:07:44.733 So let's just say hey, 148 00:07:46.340 --> 00:07:47.797 this.firstName, 149 00:07:50.193 --> 00:07:52.550 and then we can call this on jessica. 150 00:07:53.610 --> 00:07:56.363 So, of course, jessica.greet. 151 00:07:59.580 --> 00:08:03.340 And so as you see that works just as well. 152 00:08:03.340 --> 00:08:04.450 All right? 153 00:08:04.450 --> 00:08:06.800 And so this is proof one more time 154 00:08:06.800 --> 00:08:10.030 that the class really just hides the true nature 155 00:08:10.030 --> 00:08:12.973 of prototypal inheritance in JavaScript. 156 00:08:14.210 --> 00:08:18.823 So, of course, we could now do the same like this. 157 00:08:20.290 --> 00:08:24.033 And notice how there are no commas between the methods. 158 00:08:25.710 --> 00:08:29.860 Okay, so we could do this, take out this 159 00:08:29.860 --> 00:08:31.923 and it would work the exact same way. 160 00:08:33.100 --> 00:08:33.933 You see? 161 00:08:35.400 --> 00:08:38.600 So this is great for people who are coming 162 00:08:38.600 --> 00:08:40.070 from another language 163 00:08:40.070 --> 00:08:43.330 and have experience with object-oriented programming, 164 00:08:43.330 --> 00:08:45.150 because it's gonna be a bit easier 165 00:08:45.150 --> 00:08:46.490 for these developers 166 00:08:46.490 --> 00:08:50.570 to start writing object-oriented code in JavaScript. 167 00:08:50.570 --> 00:08:52.550 Now, if you're one of these developers, 168 00:08:52.550 --> 00:08:53.870 then please make sure 169 00:08:53.870 --> 00:08:56.850 that before just starting to use classes, 170 00:08:56.850 --> 00:09:00.070 you really, truly understand function constructors 171 00:09:00.070 --> 00:09:04.230 and the prototype, and the whole prototype chain logic. 172 00:09:04.230 --> 00:09:05.870 Now, to finish, I just need 173 00:09:05.870 --> 00:09:08.990 to say a couple more thing about classes 174 00:09:08.990 --> 00:09:11.900 that are important to keep in mind. 175 00:09:11.900 --> 00:09:14.513 So first, classes are not hoisted. 176 00:09:16.000 --> 00:09:19.260 So first, let's scroll a bit here. 177 00:09:19.260 --> 00:09:22.550 Classes are not hoisted. 178 00:09:22.550 --> 00:09:26.010 And so even if they are class declarations. 179 00:09:26.010 --> 00:09:28.120 So functional declarations, remember, 180 00:09:28.120 --> 00:09:30.690 are hoisted, which means we can use them 181 00:09:30.690 --> 00:09:33.460 before they are declared in the code. 182 00:09:33.460 --> 00:09:35.593 But with classes, that doesn't work. 183 00:09:36.480 --> 00:09:39.410 Second, just like functions, 184 00:09:39.410 --> 00:09:42.563 classes are also first-class citizens. 185 00:09:44.630 --> 00:09:48.060 First-class citizens. 186 00:09:48.060 --> 00:09:49.310 And so what that means 187 00:09:49.310 --> 00:09:52.000 is that we can pass them into functions 188 00:09:52.000 --> 00:09:54.870 and also return them from functions. 189 00:09:54.870 --> 00:09:56.670 And as I mentioned before, 190 00:09:56.670 --> 00:09:59.950 that is because classes are really just a special kind 191 00:09:59.950 --> 00:10:01.823 of function behind the scenes. 192 00:10:03.460 --> 00:10:06.160 And third, the body of a class 193 00:10:06.160 --> 00:10:09.440 is always executed in strict mode. 194 00:10:09.440 --> 00:10:14.440 Classes are executed in strict mode. 195 00:10:14.820 --> 00:10:18.670 And so even if we didn't activate it for our entire script, 196 00:10:18.670 --> 00:10:21.000 all the code that is in the class 197 00:10:21.000 --> 00:10:23.430 will be executed in strict mode. 198 00:10:23.430 --> 00:10:24.263 Now, right. 199 00:10:25.420 --> 00:10:27.080 So keep these points in mind 200 00:10:27.080 --> 00:10:29.083 if you want to work with classes. 201 00:10:30.030 --> 00:10:32.200 So now at the end of this video, 202 00:10:32.200 --> 00:10:35.490 you might ask if you should use constructor functions, 203 00:10:35.490 --> 00:10:37.020 like we have been doing 204 00:10:37.020 --> 00:10:41.090 or if, instead, it's better to just use classes. 205 00:10:41.090 --> 00:10:43.620 And the first remark I want to do here 206 00:10:43.620 --> 00:10:45.700 is that constructor functions 207 00:10:45.700 --> 00:10:49.400 are not like old or deprecated syntax. 208 00:10:49.400 --> 00:10:53.290 So it's 100% fine to keep using them. 209 00:10:53.290 --> 00:10:55.770 So one more time, this is more a question 210 00:10:55.770 --> 00:10:57.750 of personal preference. 211 00:10:57.750 --> 00:11:00.540 Now, if you're asking if you should use classes 212 00:11:00.540 --> 00:11:03.980 without understanding prototypal inheritance, 213 00:11:03.980 --> 00:11:07.493 well, then the reply is definitely no. 214 00:11:08.380 --> 00:11:10.340 Now, some people actually say 215 00:11:10.340 --> 00:11:13.480 that classes are really bad in general 216 00:11:13.480 --> 00:11:16.470 and that no one should ever be using them 217 00:11:16.470 --> 00:11:20.240 simply because they hide the true nature of JavaScript. 218 00:11:20.240 --> 00:11:22.530 But I actually don't agree with that, 219 00:11:22.530 --> 00:11:25.660 and I think it's absolutely okay to use classes 220 00:11:25.660 --> 00:11:29.360 in your code as long as you understand everything 221 00:11:29.360 --> 00:11:31.400 that I just showed you previously 222 00:11:31.400 --> 00:11:35.260 about the prototype and prototypal inheritance. 223 00:11:35.260 --> 00:11:37.770 So you cannot just skip that part 224 00:11:37.770 --> 00:11:39.880 because you want to become an expert 225 00:11:39.880 --> 00:11:42.200 in JavaScript, right? 226 00:11:42.200 --> 00:11:44.160 And you also want to feel conformable 227 00:11:44.160 --> 00:11:45.910 while writing your code, 228 00:11:45.910 --> 00:11:47.450 and that essentially means 229 00:11:47.450 --> 00:11:51.030 to understand exactly what your code does. 230 00:11:51.030 --> 00:11:53.200 So that's super important too 231 00:11:53.200 --> 00:11:55.140 and so if you want to be confident, 232 00:11:55.140 --> 00:11:56.810 you need to understand. 233 00:11:56.810 --> 00:11:58.870 And so that's also the whole reason 234 00:11:58.870 --> 00:12:00.690 why all over the course, 235 00:12:00.690 --> 00:12:03.160 I'm going into such deep detail 236 00:12:03.160 --> 00:12:06.750 into how everything works in JavaScript. 237 00:12:06.750 --> 00:12:09.510 Now, what I personally like about classes 238 00:12:09.510 --> 00:12:12.070 is that they visually put all the code 239 00:12:12.070 --> 00:12:13.883 that belongs to a certain class, 240 00:12:14.930 --> 00:12:17.120 so like all the data here 241 00:12:17.120 --> 00:12:19.230 and all the behavior, 242 00:12:19.230 --> 00:12:22.423 all into one nice code block like this. 243 00:12:23.270 --> 00:12:26.360 With function constructors, in my opinion, 244 00:12:26.360 --> 00:12:29.750 it all looks just like a big mess. 245 00:12:29.750 --> 00:12:31.660 So like this. 246 00:12:31.660 --> 00:12:34.770 I mean, in this case, it's just a little bit of code 247 00:12:34.770 --> 00:12:37.760 but this can get out of hand pretty quick. 248 00:12:37.760 --> 00:12:39.260 And in these situations, 249 00:12:39.260 --> 00:12:44.060 I think that this actually looks at least a lot better. 250 00:12:44.060 --> 00:12:47.370 But, of course, that is just my personal opinion. 251 00:12:47.370 --> 00:12:50.920 What matters is that you start thinking about this yourself 252 00:12:50.920 --> 00:12:54.380 and take your own decisions based on what I'm explaining 253 00:12:54.380 --> 00:12:55.563 in these videos.