Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,310 --> 00:00:03,400 Let's now talk about a feature 2 2 00:00:03,400 --> 00:00:07,360 that is actually common to all objects in JavaScript, 3 3 00:00:07,360 --> 00:00:09,833 and that's getters and setters. 4 4 00:00:11,800 --> 00:00:14,090 So every object in JavaScript 5 5 00:00:14,090 --> 00:00:17,430 can have setter and getter properties. 6 6 00:00:17,430 --> 00:00:21,670 And we call these special properties assessor properties, 7 7 00:00:21,670 --> 00:00:26,430 while the more normal properties are called data properties. 8 8 00:00:26,430 --> 00:00:29,930 So getters and setters are basically functions 9 9 00:00:29,930 --> 00:00:34,930 that get and set a value so just as the name says, 10 10 00:00:35,090 --> 00:00:39,270 but on the outside they still look like regular properties. 11 11 00:00:39,270 --> 00:00:42,690 And so let's first take a look at getters and setters 12 12 00:00:42,690 --> 00:00:45,090 in a simple object literal, 13 13 00:00:45,090 --> 00:00:48,210 and for that I'm gonna use the bank account example 14 14 00:00:48,210 --> 00:00:50,713 from the Bankist application. 15 15 00:00:54,310 --> 00:00:56,723 So very simple object literal here. 16 16 00:00:58,170 --> 00:01:01,653 The owner is Jonas. 17 17 00:01:05,040 --> 00:01:06,633 Then some simple movements. 18 18 00:01:09,390 --> 00:01:12,983 So the values here don't really matter, okay? 19 19 00:01:14,720 --> 00:01:18,313 Oh, and of course I'm writing this object all wrong. 20 20 00:01:20,050 --> 00:01:22,603 Maybe you have already been noticing that. 21 21 00:01:24,360 --> 00:01:27,120 Okay, but now it should be correct. 22 22 00:01:27,120 --> 00:01:31,483 All right, but now to add a getter to this object. 23 23 00:01:32,530 --> 00:01:36,910 We can start by basically writing a normal method. 24 24 00:01:36,910 --> 00:01:39,220 So let's say that we want a method 25 25 00:01:39,220 --> 00:01:43,633 to get the latest movement and so let's call it latest. 26 26 00:01:44,700 --> 00:01:47,790 And then to transform this into a getter 27 27 00:01:47,790 --> 00:01:51,113 we simply prepend the keyword get. 28 28 00:01:52,390 --> 00:01:56,230 All right, and so let's simply return the last movement here 29 29 00:01:57,070 --> 00:02:01,483 so that's this.movements.slice -1. 30 30 00:02:03,220 --> 00:02:06,160 But this is actually gonna return an array, 31 31 00:02:06,160 --> 00:02:08,810 so an array with the last position 32 32 00:02:08,810 --> 00:02:13,033 and so we can simply take that out using the pop method. 33 33 00:02:13,930 --> 00:02:16,660 And we could've used destructuring as well, 34 34 00:02:16,660 --> 00:02:18,450 but I didn't want to save this 35 35 00:02:18,450 --> 00:02:20,493 into an external variable first. 36 36 00:02:21,620 --> 00:02:26,003 And so now we can use this getter like this. 37 37 00:02:26,890 --> 00:02:31,670 So account and then we say latest, 38 38 00:02:31,670 --> 00:02:34,440 but we simply use it as a property. 39 39 00:02:34,440 --> 00:02:37,070 All right, so we don't call the method, 40 40 00:02:37,070 --> 00:02:40,853 but instead we write it as if it was just a property. 41 41 00:02:41,930 --> 00:02:45,863 So let's see, and indeed that returns 300. 42 42 00:02:47,210 --> 00:02:49,120 So this can be very useful 43 43 00:02:49,120 --> 00:02:51,810 when we want to read something as a property, 44 44 00:02:51,810 --> 00:02:55,050 but still need to do some calculations before. 45 45 00:02:55,050 --> 00:02:59,253 Okay, and now we can do the same also as a setter. 46 46 00:03:00,740 --> 00:03:04,020 So we say set, latest again 47 47 00:03:05,430 --> 00:03:09,090 and then here we can basically add a new movement 48 48 00:03:09,090 --> 00:03:09,953 to the array. 49 49 00:03:10,840 --> 00:03:15,610 And any setter method needs to have exactly one parameter. 50 50 00:03:15,610 --> 00:03:17,963 So in this case that's simply a movement. 51 51 00:03:19,270 --> 00:03:24,270 So let's say this.movements.push 52 52 00:03:24,550 --> 00:03:27,463 and then that movement that we just passed into. 53 53 00:03:28,380 --> 00:03:31,640 Now it is not mandatory to specify a setter 54 54 00:03:31,640 --> 00:03:34,840 when we have a getter for the same property. 55 55 00:03:34,840 --> 00:03:39,620 Okay, so just a getter or just a setter would be enough. 56 56 00:03:39,620 --> 00:03:42,770 And so, how do we use the setter now? 57 57 00:03:42,770 --> 00:03:47,460 So if it was a regular method then we would have to do this. 58 58 00:03:47,460 --> 00:03:52,220 So account.latest and then call it with the movement, 59 59 00:03:52,220 --> 00:03:54,070 let's say 50. 60 60 00:03:54,070 --> 00:03:58,510 But now this is actually like a property and not a method. 61 61 00:03:58,510 --> 00:04:00,660 And so we can simply set it 62 62 00:04:00,660 --> 00:04:02,853 just like we set any other property. 63 63 00:04:03,740 --> 00:04:06,283 So we essentially set it equal to 50. 64 64 00:04:07,660 --> 00:04:11,380 And so now if we take a look at the movements here, 65 65 00:04:11,380 --> 00:04:14,150 it will then give us the complete array 66 66 00:04:14,150 --> 00:04:15,983 with the 50 there at the end. 67 67 00:04:17,660 --> 00:04:21,560 And so in a nutshell this is how getters and setters work 68 68 00:04:21,560 --> 00:04:25,410 for any regular object in JavaScript. 69 69 00:04:25,410 --> 00:04:30,020 Now however, classes do also have getters and setters, 70 70 00:04:30,020 --> 00:04:33,350 and they do indeed work in the exact same way. 71 71 00:04:33,350 --> 00:04:38,043 And so let's try them out now here in our person class. 72 72 00:04:39,440 --> 00:04:42,550 So here we can for example add a getter 73 73 00:04:42,550 --> 00:04:44,630 for the age property. 74 74 00:04:44,630 --> 00:04:49,630 So we can say get age and then we return the age. 75 75 00:04:52,530 --> 00:04:56,263 So this is of course very similar to the calcAge method 76 76 00:04:56,263 --> 00:04:59,920 that we already have here but that doesn't matter 77 77 00:04:59,920 --> 00:05:04,033 because this is really just a demonstration example. 78 78 00:05:06,420 --> 00:05:09,371 All right, and so like this we will be able 79 79 00:05:09,371 --> 00:05:14,371 to basically read the age of any object using a property. 80 80 00:05:15,950 --> 00:05:20,817 So let's try that here for example, jessica.age, 81 81 00:05:22,570 --> 00:05:26,463 and this time we actually need to log it to the console. 82 82 00:05:27,810 --> 00:05:30,503 And you see here we now get the same value. 83 83 00:05:31,470 --> 00:05:35,465 All right, so you see that the getter is indeed 84 84 00:05:35,465 --> 00:05:38,183 just like any other regular method 85 85 00:05:38,183 --> 00:05:41,010 that we set on the prototype. 86 86 00:05:41,010 --> 00:05:44,963 And in fact we can also check that out here. 87 87 00:05:46,210 --> 00:05:49,490 So if we take a look at the prototype of Jessica, 88 88 00:05:49,490 --> 00:05:51,750 it will be right there. 89 89 00:05:51,750 --> 00:05:53,260 Now it has these dots here 90 90 00:05:53,260 --> 00:05:56,663 because it's only calculated once we actually click this. 91 91 00:05:58,620 --> 00:05:59,920 Okay? 92 92 00:05:59,920 --> 00:06:04,920 So here too it already looks as if it would be a property 93 93 00:06:05,140 --> 00:06:06,750 and not a method. 94 94 00:06:06,750 --> 00:06:09,060 We still have the get method down here, 95 95 00:06:09,060 --> 00:06:12,053 but then it's also kind of ended as a property. 96 96 00:06:14,260 --> 00:06:15,093 All right? 97 97 00:06:16,510 --> 00:06:20,280 So that's a very simple use case of a getter, 98 98 00:06:20,280 --> 00:06:23,850 but setters and getters can actually be very useful 99 99 00:06:23,850 --> 00:06:27,120 for data validation and as an example, 100 100 00:06:27,120 --> 00:06:29,783 let's try some validation with the name. 101 101 00:06:30,700 --> 00:06:34,476 So for that I will actually change a firstName here 102 102 00:06:34,476 --> 00:06:35,476 to fullName. 103 103 00:06:38,210 --> 00:06:40,780 And so now here we expect a full name. 104 104 00:06:40,780 --> 00:06:44,053 So a name which basically contains a space. 105 105 00:06:45,290 --> 00:06:47,560 So let's say Jessica Davis here, 106 106 00:06:47,560 --> 00:06:51,830 and so now we can create a setter for the fullName property 107 107 00:06:51,830 --> 00:06:55,163 which will check if this is actually a full name. 108 108 00:06:56,340 --> 00:07:00,233 All right, so set fullName, 109 109 00:07:01,520 --> 00:07:03,283 and then we need the name itself, 110 110 00:07:04,680 --> 00:07:07,160 and then here we need some logic. 111 111 00:07:07,160 --> 00:07:09,663 So to test if it contains a space, 112 112 00:07:10,620 --> 00:07:13,843 if the name includes a space, 113 113 00:07:15,050 --> 00:07:17,600 and I'm not sure if it is called includes actually. 114 114 00:07:19,330 --> 00:07:21,330 Now let me just test it here very quick. 115 115 00:07:27,210 --> 00:07:30,073 Okay, we have to comment out this part. 116 116 00:07:35,960 --> 00:07:39,000 All right, so this method actually does exist. 117 117 00:07:39,000 --> 00:07:42,570 So I wasn't sure if it only exists on erase, 118 118 00:07:42,570 --> 00:07:45,223 but indeed it also exists on strings. 119 119 00:07:46,810 --> 00:07:50,550 And so in this case then we actually want to set 120 120 00:07:50,550 --> 00:07:55,550 this.fullName to the name that was received. 121 121 00:07:57,210 --> 00:07:59,953 But if not, we want to give an alert. 122 122 00:08:03,030 --> 00:08:08,030 So the given name is not a full name. 123 123 00:08:10,610 --> 00:08:14,350 So in this case what's really important to understand 124 124 00:08:14,350 --> 00:08:17,910 is that we are creating a setter for a property name 125 125 00:08:17,910 --> 00:08:19,603 that does already exist. 126 126 00:08:20,480 --> 00:08:23,073 So fullName is already a property 127 127 00:08:23,073 --> 00:08:25,100 that are trying to set here, 128 128 00:08:25,100 --> 00:08:27,130 but then we also have the setter. 129 129 00:08:27,130 --> 00:08:29,220 And so now what's gonna happen is 130 130 00:08:29,220 --> 00:08:32,010 that each time this code here is executed, 131 131 00:08:32,010 --> 00:08:35,430 so whenever we set the fullName on the this keyword, 132 132 00:08:35,430 --> 00:08:38,010 then actually this method here, 133 133 00:08:38,010 --> 00:08:41,460 so this setter is gonna be executed. 134 134 00:08:41,460 --> 00:08:44,630 And so that name that we pass in as fullName 135 135 00:08:44,630 --> 00:08:48,030 will then become this name. 136 136 00:08:48,030 --> 00:08:50,860 All right, let's check that out actually. 137 137 00:08:50,860 --> 00:08:53,910 And so now as we create Jessica here, 138 138 00:08:53,910 --> 00:08:58,910 you will see and indeed it, we saw Jessica Davis here, 139 139 00:08:59,700 --> 00:09:03,310 but now we got this crazy error here 140 140 00:09:03,310 --> 00:09:06,620 of maximum call stack size exceeded. 141 141 00:09:06,620 --> 00:09:09,420 Now that's a very cryptic error message, 142 142 00:09:09,420 --> 00:09:12,810 but what happens here is that there is a conflict. 143 143 00:09:12,810 --> 00:09:15,240 So right now both the setter function 144 144 00:09:15,240 --> 00:09:17,670 and this constructor function 145 145 00:09:17,670 --> 00:09:21,020 are trying to set the exact same property name. 146 146 00:09:21,020 --> 00:09:24,663 And so that gives origin to this weird error. 147 147 00:09:25,520 --> 00:09:27,350 So what we need to do instead 148 148 00:09:27,350 --> 00:09:30,330 is to here create a new property name. 149 149 00:09:30,330 --> 00:09:32,890 And the convention for doing that, 150 150 00:09:32,890 --> 00:09:36,620 so when we have a setter which is trying to set a property 151 151 00:09:36,620 --> 00:09:38,710 that does already exist, 152 152 00:09:38,710 --> 00:09:42,310 then here as a convention we add an underscore. 153 153 00:09:42,310 --> 00:09:45,360 So again, this is just a convention, 154 154 00:09:45,360 --> 00:09:47,540 it's not a JavaScript feature. 155 155 00:09:47,540 --> 00:09:50,120 So it's really just a different variable name 156 156 00:09:50,120 --> 00:09:52,940 to avoid that naming conflict. 157 157 00:09:52,940 --> 00:09:55,110 However, now when we do this, 158 158 00:09:55,110 --> 00:09:58,320 we are actually creating a new variable, 159 159 00:09:58,320 --> 00:10:00,700 so a fullName variable. 160 160 00:10:00,700 --> 00:10:02,603 So let's try this now actually. 161 161 00:10:04,780 --> 00:10:09,610 So if we try to look at Jessica Davis you see that right now 162 162 00:10:09,610 --> 00:10:13,023 the property that exists is underscore fullName. 163 163 00:10:14,000 --> 00:10:17,590 And so right now we cannot do jessica.fullName 164 164 00:10:19,600 --> 00:10:22,260 because that simply doesn't exist. 165 165 00:10:22,260 --> 00:10:26,120 And so to fix this we now also need to create a getter 166 166 00:10:26,120 --> 00:10:27,823 for the fullName property. 167 167 00:10:29,230 --> 00:10:32,953 And so that will simply return the underscore fullName. 168 168 00:10:34,610 --> 00:10:35,633 So let's see. 169 169 00:10:39,090 --> 00:10:41,537 So return this._fullName. 170 170 00:10:45,050 --> 00:10:47,620 And so if we try to do the same now, 171 171 00:10:47,620 --> 00:10:51,523 then you see that we are back to having this fullName here. 172 172 00:10:54,190 --> 00:10:55,510 All right? 173 173 00:10:55,510 --> 00:10:58,490 And of course, the actual property that is here 174 174 00:10:58,490 --> 00:11:01,380 is now still underscore fullName, 175 175 00:11:01,380 --> 00:11:06,380 because well that's what we do here in the setter, right? 176 176 00:11:06,560 --> 00:11:09,520 But then we can also compute this full name 177 177 00:11:09,520 --> 00:11:11,583 just as we can compute the age. 178 178 00:11:13,330 --> 00:11:16,450 So this pattern here is important to understand 179 179 00:11:16,450 --> 00:11:21,450 whenever we try to set a property that already exists. 180 180 00:11:24,910 --> 00:11:29,910 Now let's try another name here just to see what happens, 181 181 00:11:32,210 --> 00:11:33,673 and actually after all this. 182 182 00:11:36,830 --> 00:11:39,713 So let's create a Walter object here. 183 183 00:11:41,600 --> 00:11:46,143 New PersonCl, that's right. 184 184 00:11:47,150 --> 00:11:51,090 And now we're just using a name with one word, 185 185 00:11:51,090 --> 00:11:55,800 let's say 1965 and so now we get this error. 186 186 00:11:55,800 --> 00:11:58,163 So Walter is not a full name, 187 187 00:11:59,210 --> 00:12:02,010 and so right now if we check out Walter, 188 188 00:12:02,010 --> 00:12:06,930 age probably doesn't have any name, and yeah it doesn't. 189 189 00:12:06,930 --> 00:12:09,350 So just the birth year now. 190 190 00:12:09,350 --> 00:12:11,823 But if we then put it as a full name, 191 191 00:12:12,890 --> 00:12:17,890 so Walter White then indeed, Walter like this, 192 192 00:12:18,230 --> 00:12:20,770 then we get the underscore fullName. 193 193 00:12:20,770 --> 00:12:24,710 But just like before we can then also access walter.fullName 194 194 00:12:25,820 --> 00:12:30,350 because of that setter or actually of that getter 195 195 00:12:30,350 --> 00:12:32,830 that we just defined earlier. 196 196 00:12:32,830 --> 00:12:37,830 Now okay, great, so this is another nice feature of classes 197 197 00:12:38,350 --> 00:12:41,000 that can be very useful sometimes. 198 198 00:12:41,000 --> 00:12:44,330 Now we don't need to use getters or setters, 199 199 00:12:44,330 --> 00:12:46,340 and many people actually don't, 200 200 00:12:46,340 --> 00:12:50,170 but yeah, as I just said sometimes it's just nice 201 201 00:12:50,170 --> 00:12:52,370 to be able to use these features 202 202 00:12:52,370 --> 00:12:57,270 and especially when we need like a validation like this 203 203 00:12:57,270 --> 00:13:00,360 by the time we are creating a new object. 204 204 00:13:00,360 --> 00:13:04,230 So that's essentially what this setter here does. 205 205 00:13:04,230 --> 00:13:05,063 Next up, 206 206 00:13:05,063 --> 00:13:08,340 we're gonna take a look at yet another feature of classes, 207 207 00:13:08,340 --> 00:13:10,540 which is static methods. 208 208 00:13:10,540 --> 00:13:12,673 So let's check that out right now. 18371