WEBVTT 1 00:00:01.094 --> 00:00:02.350 line:15% And here it is, 2 00:00:02.350 --> 00:00:03.830 line:15% the final coding challenge 3 00:00:03.830 --> 00:00:06.023 line:15% about object oriented programming. 4 00:00:08.170 --> 00:00:09.550 And in this challenge, 5 00:00:09.550 --> 00:00:13.640 the goal is to recreate the challenge number 3, 6 00:00:13.640 --> 00:00:16.840 but this time using ES6 classes. 7 00:00:16.840 --> 00:00:18.830 So basically what you should do, 8 00:00:18.830 --> 00:00:22.270 is to create a class EV, 9 00:00:22.270 --> 00:00:23.920 so electric vehicle. 10 00:00:23.920 --> 00:00:25.798 Which is going to be a child class, 11 00:00:25.798 --> 00:00:30.670 of the car class that we already created before as well. 12 00:00:30.670 --> 00:00:33.180 Then in that EV class, 13 00:00:33.180 --> 00:00:36.170 make the charge property private. 14 00:00:36.170 --> 00:00:37.538 So that's number two. 15 00:00:37.538 --> 00:00:40.590 And then point number three, 16 00:00:40.590 --> 00:00:43.360 is that I want you to implement the ability 17 00:00:43.360 --> 00:00:47.490 to chain the accelerate and charged battery methods 18 00:00:47.490 --> 00:00:49.240 on this class. 19 00:00:49.240 --> 00:00:53.323 And the same also for the brake method in the car class. 20 00:00:54.230 --> 00:00:56.863 So that's actually called CarCL. 21 00:00:58.740 --> 00:01:02.220 So then go ahead and experiment with chaining, 22 00:01:02.220 --> 00:01:04.390 and all of that should be done 23 00:01:04.390 --> 00:01:07.230 using this test data down here. 24 00:01:07.230 --> 00:01:08.550 All right. 25 00:01:08.550 --> 00:01:11.480 So I already have to coat here. 26 00:01:11.480 --> 00:01:12.930 And so this makes it a bit easier 27 00:01:12.930 --> 00:01:15.880 to understand what the goal is. 28 00:01:15.880 --> 00:01:16.890 So, as I mentioned, 29 00:01:16.890 --> 00:01:20.600 we already have the CarCL class from before, 30 00:01:20.600 --> 00:01:23.150 and so this one is basically going to stay the same, 31 00:01:23.150 --> 00:01:25.290 except for the break method, 32 00:01:25.290 --> 00:01:27.173 which I want you to make chainable. 33 00:01:28.230 --> 00:01:31.380 And then here we have the EV already, 34 00:01:31.380 --> 00:01:36.090 as we implemented it previously using constructor functions. 35 00:01:36.090 --> 00:01:38.340 And so the big goal of this challenge, 36 00:01:38.340 --> 00:01:40.830 is basically to convert all of this, 37 00:01:40.830 --> 00:01:44.003 into a child class of the CarCL class. 38 00:01:48.090 --> 00:01:48.923 All right, 39 00:01:50.100 --> 00:01:51.903 so let's do this. 40 00:01:53.430 --> 00:01:57.460 So class EVCL, 41 00:01:57.460 --> 00:01:59.740 and now this should be a child class. 42 00:01:59.740 --> 00:02:03.220 And so we use the extends keyword. 43 00:02:03.220 --> 00:02:06.633 So this extends the CarCL class. 44 00:02:08.150 --> 00:02:11.780 And now let's put this curly brace actually down here, 45 00:02:11.780 --> 00:02:14.232 because all we need to do is to now modify this 46 00:02:14.232 --> 00:02:15.363 a little bit. 47 00:02:16.720 --> 00:02:20.440 So here we can transform this here 48 00:02:20.440 --> 00:02:22.343 into the constructor. 49 00:02:23.870 --> 00:02:25.374 So the constructor method, 50 00:02:25.374 --> 00:02:29.683 and we still need to make speed and charge Of course. 51 00:02:30.660 --> 00:02:34.000 Now here we don't need to call the car, 52 00:02:34.000 --> 00:02:36.220 but instead we call super. 53 00:02:36.220 --> 00:02:38.550 Remember, and we do that of course, 54 00:02:38.550 --> 00:02:40.510 without the disc keyword, 55 00:02:40.510 --> 00:02:41.720 because all of this 56 00:02:41.720 --> 00:02:44.083 will automatically happen behind the scenes. 57 00:02:46.240 --> 00:02:48.600 Okay. So if I save this now, 58 00:02:48.600 --> 00:02:50.250 we get to this error, 59 00:02:50.250 --> 00:02:51.360 but that's because 60 00:02:51.360 --> 00:02:54.423 we still have a lot of stuff to change down here. 61 00:02:55.700 --> 00:02:58.500 Next here is linking off the prototypes. 62 00:02:58.500 --> 00:03:02.200 And none of this is necessary with classes, 63 00:03:02.200 --> 00:03:05.540 because all of this simply happens automatically 64 00:03:05.540 --> 00:03:06.633 behind the scenes. 65 00:03:07.840 --> 00:03:10.400 We also don't need to set anything manually 66 00:03:10.400 --> 00:03:12.290 on the prototype properties. 67 00:03:12.290 --> 00:03:14.213 So let's get rid of this. 68 00:03:15.100 --> 00:03:16.090 And in here also, 69 00:03:16.090 --> 00:03:17.983 we don't need to function keyword. 70 00:03:20.037 --> 00:03:21.840 And so with this, 71 00:03:21.840 --> 00:03:24.863 uh, I think for now we should be good to go. 72 00:03:26.180 --> 00:03:29.940 So let's now create an object called Rivian, 73 00:03:29.940 --> 00:03:34.273 which is going at 120 with a charge of 23%. 74 00:03:35.960 --> 00:03:37.170 So Rivian, 75 00:03:37.170 --> 00:03:42.081 which is, uh, another electric vehicle brand. 76 00:03:42.081 --> 00:03:47.081 So EVCL Rivian 120 and 23% of charge. 77 00:03:51.350 --> 00:03:52.743 Let's check it out here, 78 00:03:54.100 --> 00:03:56.873 and yup, there it is. 79 00:03:58.890 --> 00:04:00.300 Great. 80 00:04:00.300 --> 00:04:02.380 So next up the task, 81 00:04:02.380 --> 00:04:04.653 is to make the charge private. 82 00:04:06.240 --> 00:04:07.463 So let's do that. 83 00:04:08.770 --> 00:04:10.390 So this is the CarCL. 84 00:04:10.390 --> 00:04:13.520 So here we don't have to charge in the parent class, 85 00:04:13.520 --> 00:04:16.550 but we do have it here in the child class. 86 00:04:16.550 --> 00:04:18.230 Now we receive this charge, 87 00:04:18.230 --> 00:04:20.680 actually as an input here. 88 00:04:20.680 --> 00:04:23.500 And so we still need to define 89 00:04:23.500 --> 00:04:27.000 all the fields outside of any method. 90 00:04:27.000 --> 00:04:28.600 So we do that up here, 91 00:04:28.600 --> 00:04:32.490 and that is true for both private and public fields. 92 00:04:32.490 --> 00:04:33.323 So in this case, 93 00:04:33.323 --> 00:04:34.563 we want a private field, 94 00:04:35.410 --> 00:04:37.360 and that's called charge, 95 00:04:37.360 --> 00:04:39.620 and then we don't give it any value. 96 00:04:39.620 --> 00:04:41.973 And here we simply reassign that. 97 00:04:43.160 --> 00:04:47.190 And then all we have to do is to change it everywhere. 98 00:04:47.190 --> 00:04:51.093 So that's here and here and here, 99 00:04:52.130 --> 00:04:53.083 give it a save. 100 00:04:55.210 --> 00:04:56.493 If we now check this, 101 00:04:58.460 --> 00:05:00.600 then indeed here it is. 102 00:05:00.600 --> 00:05:02.053 And we didn't get any error, 103 00:05:03.390 --> 00:05:07.880 but indeed, as we try to now access this property outside, 104 00:05:07.880 --> 00:05:10.610 then that is not going to work. 105 00:05:10.610 --> 00:05:12.730 So it is now truly private, 106 00:05:12.730 --> 00:05:16.560 and it is encapsulated inside of the class. 107 00:05:16.560 --> 00:05:17.740 So from outside, 108 00:05:17.740 --> 00:05:19.680 there is no way of changing it, 109 00:05:19.680 --> 00:05:24.680 except of course by charging the battery or by accelerating. 110 00:05:24.880 --> 00:05:26.560 And so once again, 111 00:05:26.560 --> 00:05:30.090 this method here is basically a public API, 112 00:05:30.090 --> 00:05:31.640 so that we can manipulate 113 00:05:31.640 --> 00:05:34.520 the charge property from the outside. 114 00:05:34.520 --> 00:05:37.970 But without being able to directly access the property 115 00:05:37.970 --> 00:05:39.253 from the outside. 116 00:05:41.590 --> 00:05:43.010 So next up, 117 00:05:43.010 --> 00:05:45.070 we want to implement a chaining 118 00:05:45.070 --> 00:05:48.373 on accelerate, chargeBattery and brake. 119 00:05:49.590 --> 00:05:50.423 So on brake, 120 00:05:50.423 --> 00:05:52.430 we need to do it here. 121 00:05:52.430 --> 00:05:53.520 And so remember, 122 00:05:53.520 --> 00:05:58.520 all we have to do is to return this keyword, right? 123 00:05:59.190 --> 00:06:00.463 So that's very easy, 124 00:06:01.620 --> 00:06:02.693 here to same, 125 00:06:03.800 --> 00:06:04.633 this. 126 00:06:05.830 --> 00:06:07.825 And again, we are doing this here, 127 00:06:07.825 --> 00:06:12.825 basically on all the methods that actually set something. 128 00:06:15.060 --> 00:06:17.373 And so that's why this makes the most sense. 129 00:06:19.370 --> 00:06:23.490 Great. So now we are able to do something like this. 130 00:06:23.490 --> 00:06:25.593 So we can accelerate, 131 00:06:27.120 --> 00:06:29.640 and then we can accelerate again, 132 00:06:29.640 --> 00:06:33.010 and we can accelerate again maybe. 133 00:06:33.010 --> 00:06:35.630 Let's brake for a change, 134 00:06:35.630 --> 00:06:37.343 then let's charge the battery, 135 00:06:38.620 --> 00:06:41.710 let's say to 50%, 136 00:06:41.710 --> 00:06:43.510 and then let's accelerate some more. 137 00:06:45.650 --> 00:06:49.363 And so this is what the result is going to be looking like. 138 00:06:50.840 --> 00:06:53.800 So here we are accelerating three times, 139 00:06:53.800 --> 00:06:57.900 then we are breaking down by five kilometers per hour, 140 00:06:57.900 --> 00:06:59.200 and then immediately, 141 00:06:59.200 --> 00:07:02.860 we add 20 kilometers per hour back again. 142 00:07:02.860 --> 00:07:05.200 And the charge then drops to 49. 143 00:07:05.200 --> 00:07:08.963 And that's because previously we had charged it to 50. 144 00:07:11.600 --> 00:07:14.610 And what's also interesting to see here, 145 00:07:14.610 --> 00:07:18.520 is that, or child class does also inherit 146 00:07:18.520 --> 00:07:22.190 the getters and setters from the parent class. 147 00:07:22.190 --> 00:07:25.223 So we can also do this. 148 00:07:26.740 --> 00:07:27.730 So remember, 149 00:07:27.730 --> 00:07:32.593 that is a setter and a getter that we defined previously. 150 00:07:34.240 --> 00:07:39.051 And so this is basically 195 kilometers per hour, 151 00:07:39.051 --> 00:07:41.960 converted to miles per hour. 152 00:07:41.960 --> 00:07:44.570 Okay. And with that, 153 00:07:44.570 --> 00:07:47.230 this challenge is now completed. 154 00:07:47.230 --> 00:07:49.520 And I think we used all the things 155 00:07:49.520 --> 00:07:53.360 that we learned over the course of this section 156 00:07:53.360 --> 00:07:56.200 right here in all of these four challenges. 157 00:07:56.200 --> 00:07:58.780 So this should cover everything that you learned. 158 00:07:58.780 --> 00:07:59.760 And so by now, 159 00:07:59.760 --> 00:08:01.910 you actually already put everything 160 00:08:01.910 --> 00:08:04.910 that we learned about object oriented programming 161 00:08:04.910 --> 00:08:07.380 into practice by yourself. 162 00:08:07.380 --> 00:08:09.530 So congratulations for that. 163 00:08:09.530 --> 00:08:11.440 That was a really great job, 164 00:08:11.440 --> 00:08:12.680 and a great effort 165 00:08:12.680 --> 00:08:15.173 to watch this entire section until the end. 166 00:08:16.020 --> 00:08:19.930 And now it's time to make this even more exciting 167 00:08:19.930 --> 00:08:21.160 and to do that, 168 00:08:21.160 --> 00:08:24.210 we will create an entire brand new project, 169 00:08:24.210 --> 00:08:26.800 which will be completely based on objects 170 00:08:26.800 --> 00:08:28.500 in the next section. 171 00:08:28.500 --> 00:08:30.060 So that project is going to be 172 00:08:30.060 --> 00:08:31.870 one of the most exciting things 173 00:08:31.870 --> 00:08:34.510 of this course, in my opinion. 174 00:08:34.510 --> 00:08:36.660 So I hope to see you there soon, 175 00:08:36.660 --> 00:08:38.230 once you're finished, 176 00:08:38.230 --> 00:08:41.250 basically digesting this section. 177 00:08:41.250 --> 00:08:43.520 So congratulations once again. 178 00:08:43.520 --> 00:08:46.070 I'm really happy to still have you with me, 179 00:08:46.070 --> 00:08:48.200 here at this point of the course. 180 00:08:48.200 --> 00:08:51.693 And so I see you back here in the next section.