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.