1 00:00:02,680 --> 00:00:04,570 Enough about this for now, 2 00:00:04,600 --> 00:00:10,380 there's one last nice feature which I want to introduce here and that are getters and setters, 3 00:00:10,520 --> 00:00:11,510 now what's that? 4 00:00:11,510 --> 00:00:15,250 Now we have normal properties here, info for example 5 00:00:15,250 --> 00:00:20,260 and sometimes we want to control how a property can be set, 6 00:00:20,260 --> 00:00:24,970 so how a value can be assigned or how you can get it, 7 00:00:25,000 --> 00:00:29,680 so how you can retrieve it. Let's say here on our title, here 8 00:00:29,710 --> 00:00:36,550 I'm checking the validity of the inputs and then I'm assigning these properties all in one go when I 9 00:00:36,550 --> 00:00:38,170 create the new movie object. 10 00:00:38,800 --> 00:00:40,060 Well let's say for the title, 11 00:00:40,120 --> 00:00:45,760 so for properties where we know in advance that they will be part, I want to do that differently. 12 00:00:45,880 --> 00:00:51,080 I remove the title check up there and remove it from down there from info, 13 00:00:51,080 --> 00:00:58,430 instead what I'll do here in info is I will add a special keyword, get, then the property name of my choice, 14 00:00:58,430 --> 00:00:58,960 in this case, 15 00:00:59,000 --> 00:01:05,240 still title, then the parentheses as if this were a method and then curly braces for the method body. 16 00:01:05,240 --> 00:01:08,300 Now what this will do is it will create a so-called getter, 17 00:01:08,300 --> 00:01:13,380 so Javascript detects the special get keyword and in combination with a method thereafter, 18 00:01:13,490 --> 00:01:20,840 this can actually be accessed like a property, so without adding parentheses to call it in quotes but 19 00:01:20,840 --> 00:01:25,760 still execute some logic to retrieve the value and the same can be done for setting. We can add the 20 00:01:25,760 --> 00:01:31,000 set keyword, then the property name and then again parentheses in curly braces. 21 00:01:31,010 --> 00:01:36,320 Now here for setting, we also have to accept the parameter and that's the value parameter, 22 00:01:36,320 --> 00:01:42,270 of course you can give it any name you want which holds the value you're trying to set. Now inside of 23 00:01:42,270 --> 00:01:43,020 the setter, 24 00:01:43,020 --> 00:01:47,860 you can now target a property with this which refers to new movie 25 00:01:47,940 --> 00:01:55,020 if you call new movie.title later and for example set another property here, not the same so not 26 00:01:55,020 --> 00:02:01,650 title but often you use something like _title to make it clear that this is like the internal 27 00:02:01,710 --> 00:02:08,610 value and for the outside world, you have title with your getter and setter and set this equal to val 28 00:02:08,610 --> 00:02:14,910 for example but here you can now also perform an extra check and see if val trim is equal to an empty 29 00:02:14,910 --> 00:02:20,390 string and if that is the case, maybe set this to another default value, default like this 30 00:02:21,130 --> 00:02:25,910 and then return to not continue with this line here. 31 00:02:25,920 --> 00:02:28,350 Now of course the result will not be the same as before, 32 00:02:28,380 --> 00:02:32,550 before we stopped the entire function execution for an invalid input, 33 00:02:32,550 --> 00:02:37,230 now I continue and I just set a default value but that's exactly what I want to show. 34 00:02:37,560 --> 00:02:44,550 If you have such a scenario, you can use a setter to do some validation when a value is assigned to the 35 00:02:44,550 --> 00:02:51,180 title property and either accept it or set any other value, well and for a getter, you now have to define 36 00:02:51,180 --> 00:02:52,050 what you want to do 37 00:02:52,200 --> 00:02:59,220 if people tried to access title. You can also omit it, then you have a non-readable property, by the way 38 00:02:59,220 --> 00:03:02,610 if you omit a setter, you have a read-only property 39 00:03:02,610 --> 00:03:03,840 but here I added both 40 00:03:03,840 --> 00:03:07,140 and here I will just return this._title, 41 00:03:07,200 --> 00:03:11,460 so referring to this internal property which I create here on the fly. 42 00:03:11,460 --> 00:03:13,580 So how do we now use that? 43 00:03:13,620 --> 00:03:22,000 Well you can simply go to the line after this new movie creation here and then call new movie.info 44 00:03:22,030 --> 00:03:28,210 and then in there, title. You use it like a property, so you don't add parentheses here, instead you can 45 00:03:28,210 --> 00:03:35,320 assign a value like you assign it to a property because setters and getters are a special kind of property, 46 00:03:35,320 --> 00:03:36,400 a special syntax 47 00:03:36,400 --> 00:03:46,080 understood by Javascript and you can for example assign this title here which we got there. 48 00:03:46,110 --> 00:03:51,400 So now if that title is empty, we'll not stop here because I'm not checking for an empty title anymore, 49 00:03:51,450 --> 00:03:57,690 instead the setter which will be triggered whenever we assign a value to this title property because 50 00:03:57,690 --> 00:04:04,380 the setter is on title here will then check the value we try to assign, this value here which we assign 51 00:04:04,500 --> 00:04:11,970 is automatically passed in as this single parameter here and then we either accept it or if this happens 52 00:04:11,970 --> 00:04:19,410 to be empty, we set a default and the getter is triggered whenever we access the property, for example 53 00:04:19,410 --> 00:04:24,710 like this. When I access it and want to read from it, then the getter runs, 54 00:04:24,720 --> 00:04:29,880 so then Javascript looks for this title property and again even though this looks like a method, we 55 00:04:29,880 --> 00:04:35,640 don't execute it as one because combined with the get keyword, Javascript allows us to access it like 56 00:04:35,640 --> 00:04:38,710 a normal property and it will execute this function for us 57 00:04:38,970 --> 00:04:44,790 and here we could also do additional transformations, additional checks and for example here we could add 58 00:04:44,850 --> 00:04:50,190 our to uppercase transformation and we wouldn't need this method anymore, 59 00:04:50,190 --> 00:04:55,200 I'll keep that method for reference though but this would be an elegant way of always converting this 60 00:04:55,200 --> 00:04:59,460 title to uppercase when you retrieve it even if we saved it in different casing 61 00:04:59,850 --> 00:05:05,220 but again I'll not do it here to keep that code and hence here, I'll just return the unchanged code. 62 00:05:05,220 --> 00:05:07,800 Now let's have a look at this and reload here 63 00:05:07,800 --> 00:05:14,340 and if I now enter Javascript here and enter the other fields here as well and click add movie, Javascript 64 00:05:14,370 --> 00:05:15,370 is getting logged here, 65 00:05:15,390 --> 00:05:19,230 that's from line 74 which is where I access my getter, 66 00:05:19,260 --> 00:05:21,840 so that works and setting also seemed to work 67 00:05:21,840 --> 00:05:26,240 otherwise we wouldn't be able to get it and otherwise you wouldn't get the output down there. 68 00:05:26,310 --> 00:05:31,640 Now side note, you'll also see that internal variable now being reflected here as well, 69 00:05:31,650 --> 00:05:38,280 the _title thing, you would have to exclude this now here in your if check by also checking 70 00:05:38,910 --> 00:05:51,130 if key is unequal to _title so that this is not output. So this should 71 00:05:51,130 --> 00:05:56,080 be added if you plan on using this pattern here so that we don't output the _title when we 72 00:05:56,080 --> 00:06:03,300 go through all properties. So getters and setters can be nice if you want to add some extra validation, 73 00:06:03,380 --> 00:06:08,770 maybe a fallback or add some extra transformation when getting a value 74 00:06:08,900 --> 00:06:14,690 and as I mentioned, what also is nice is of course that it allows you to also work with kind of read 75 00:06:14,750 --> 00:06:20,120 only values. If we wouldn't have a setter here, if we tried to assign it like this, 76 00:06:20,120 --> 00:06:27,380 we'll actually get an error if I reload here and we try to enter Javascript here and then any values 77 00:06:27,380 --> 00:06:32,210 here, you'll see I get an error because I can't set a property which only has a getter. 78 00:06:32,270 --> 00:06:37,700 So this allows us to add read-only properties and make sure you can only assign it here initially maybe 79 00:06:37,850 --> 00:06:45,440 but never thereafter by adding a getter but no setter. You can also add both or none of that, you'll not 80 00:06:45,440 --> 00:06:49,880 need getters and setters for every single property you use in your projects, 81 00:06:49,880 --> 00:06:54,650 actually you will only use them sometimes but it's nice to know about them and to be able to create 82 00:06:54,650 --> 00:07:01,040 read-only properties, to add extra validation with fallback values and to also set up some default transformations 83 00:07:01,190 --> 00:07:03,010 for when you're reaching out to some data 84 00:07:03,020 --> 00:07:03,770 for example.