1 00:00:00,074 --> 00:00:03,909 You learned previously that when a getter method is called, a property value 2 00:00:03,909 --> 00:00:08,880 is computed and returned, but this value is not ever updated or stored anywhere. 3 00:00:08,880 --> 00:00:12,264 A setter method, on the other hand, receives a value and 4 00:00:12,264 --> 00:00:14,814 can perform logic on that value if need be. 5 00:00:14,814 --> 00:00:18,271 Then it either updates an existing property with that value or 6 00:00:18,271 --> 00:00:20,270 stores the value to a new property. 7 00:00:21,320 --> 00:00:23,834 This is pretty confusing and complicated at first. 8 00:00:23,834 --> 00:00:25,324 Don't worry if you're having trouble. 9 00:00:25,324 --> 00:00:29,140 This is tough stuff and it can take awhile for new concepts to sink in. 10 00:00:29,140 --> 00:00:32,995 When I'm learning a new concept, I spend a lot of time practicing the code and 11 00:00:32,995 --> 00:00:34,669 reading about the topic online. 12 00:00:34,669 --> 00:00:37,988 I found that being exposed to a topic from many different perspectives and 13 00:00:37,988 --> 00:00:40,670 angles helps me understand things more deeply. 14 00:00:40,670 --> 00:00:42,841 So I've included some things about getters and 15 00:00:42,841 --> 00:00:45,238 setters that I find useful in the teacher's notes. 16 00:00:45,238 --> 00:00:46,128 For this example, 17 00:00:46,128 --> 00:00:50,600 we're going to add a setter method that sets an owner property for the pet class. 18 00:00:50,600 --> 00:00:53,656 We'll start with a simple example to show the basic syntax and 19 00:00:53,656 --> 00:00:57,443 get familiar with the concept, and in the next video we'll dive in deeper. 20 00:00:57,443 --> 00:00:59,032 So back in our Pet.js file, 21 00:00:59,032 --> 00:01:02,220 let's add a few lines under our existing getter method. 22 00:01:04,660 --> 00:01:08,449 A setter method is created by typing the key word set followed by 23 00:01:08,449 --> 00:01:12,254 the name of the property being set, which in our case is owner. 24 00:01:12,254 --> 00:01:14,778 And then our usual parentheses and curly braces. 25 00:01:17,310 --> 00:01:20,737 Setters always receive exactly one parameter. 26 00:01:20,737 --> 00:01:24,044 The parameter is the value of the property that we'd like to set. 27 00:01:24,044 --> 00:01:26,269 In this example, it will be the owner's name. 28 00:01:29,568 --> 00:01:30,531 Inside our method, 29 00:01:30,531 --> 00:01:34,200 we have to set an owner property equal to the parameter we passed in. 30 00:01:34,200 --> 00:01:35,629 But there's a little snag. 31 00:01:35,629 --> 00:01:39,074 The name of a property can never be the same as the name of a getter or 32 00:01:39,074 --> 00:01:40,420 setter method. 33 00:01:40,420 --> 00:01:42,196 This means we can't do this. 34 00:01:45,297 --> 00:01:48,027 We have to create a property name that's different from 35 00:01:48,027 --> 00:01:50,350 owner to hold the value of owner. 36 00:01:50,350 --> 00:01:52,375 This is called a backing property. 37 00:01:52,375 --> 00:01:57,100 And while we can name the backing property however we would like, convention dictates 38 00:01:57,100 --> 00:02:00,994 to use the name of the setter function but with an underscore behind it. 39 00:02:00,994 --> 00:02:02,148 Just like this. 40 00:02:04,651 --> 00:02:08,231 While we're in our setter method, let's also add a console log. 41 00:02:08,231 --> 00:02:10,369 When we set the owner property and run the file, 42 00:02:10,369 --> 00:02:13,754 this will demonstrate that the setter function has actually been called. 43 00:02:26,143 --> 00:02:26,760 Great. 44 00:02:26,760 --> 00:02:28,644 So how do we use our setter method? 45 00:02:28,644 --> 00:02:32,424 Move down to the end of the file and create a new line. 46 00:02:32,424 --> 00:02:36,544 Type the name of the object who's owner property you want to set followed by a dot 47 00:02:36,544 --> 00:02:40,920 and then the name of the setter method, which in this case is owner. 48 00:02:40,920 --> 00:02:45,517 Add an equals sign and then the value of the owner's name. 49 00:02:45,517 --> 00:02:49,183 You're probably thinking to yourself, this looks exactly like 50 00:02:49,183 --> 00:02:53,330 setting a property value using dot notation, and you'd be right. 51 00:02:53,330 --> 00:02:55,355 That's what's great about getter and setter methods. 52 00:02:55,355 --> 00:02:59,395 They provide the syntactical simplicity of direct property access, 53 00:02:59,395 --> 00:03:03,850 while simultaneously offering the flexibility of a method. 54 00:03:03,850 --> 00:03:06,725 Great, we've set our owner property using a setter method. 55 00:03:06,725 --> 00:03:09,580 Now let's try to access this property. 56 00:03:09,580 --> 00:03:10,887 I'll create a new line and 57 00:03:10,887 --> 00:03:13,806 log the owner property of the ernie object to the console. 58 00:03:17,300 --> 00:03:19,877 Let's save and jump down to our console to run the file. 59 00:03:26,220 --> 00:03:29,869 Well, we can see that out setter function was called, but 60 00:03:29,869 --> 00:03:33,758 the value of the owner property is being output as undefined. 61 00:03:33,758 --> 00:03:34,756 That's not great. 62 00:03:34,756 --> 00:03:35,817 Why is that happening? 63 00:03:40,928 --> 00:03:45,020 If you recall, the setter method is storing the value in a backing property. 64 00:03:45,020 --> 00:03:50,337 In our case, that's actually _owner, not owner. 65 00:03:50,337 --> 00:03:54,693 When we try to retrieve the value of owner by using ernie.owner, for example, 66 00:03:54,693 --> 00:03:59,250 we get undefined, meaning the owner property has no assigned value. 67 00:03:59,250 --> 00:04:03,215 To solve this, we've got to create a getter method called owner that returns 68 00:04:03,215 --> 00:04:05,056 the value of the backing property. 69 00:04:05,056 --> 00:04:07,207 I'll add that right before I set our method. 70 00:04:15,996 --> 00:04:19,175 Awesome, now we have a way to access the owner property. 71 00:04:19,175 --> 00:04:20,570 Let's try to run this again. 72 00:04:24,441 --> 00:04:28,258 Great, you'll see that now it's outputting the value Ashley just like we 73 00:04:28,258 --> 00:04:28,992 expect it to. 74 00:04:28,992 --> 00:04:30,460 Awesome job. 75 00:04:30,460 --> 00:04:34,045 In this example, our setter function didn't have any logic included. 76 00:04:34,045 --> 00:04:37,903 In the next video, I'm going to show you an example of how adding logic to setter 77 00:04:37,903 --> 00:04:40,620 functions can be used to simplify your coding process.