Setters

You learned previously that when a getter method is called, a property value 0:00 is computed and returned, but this value is not ever updated or stored anywhere. 0:03 A setter method, on the other hand, receives a value and 0:08 can perform logic on that value if need be. 0:12 Then it either updates an existing property with that value or 0:14 stores the value to a new property. 0:18 This is pretty confusing and complicated at first. 0:21 Don't worry if you're having trouble. 0:23 This is tough stuff and it can take awhile for new concepts to sink in. 0:25 When I'm learning a new concept, I spend a lot of time practicing the code and 0:29 reading about the topic online. 0:32 I found that being exposed to a topic from many different perspectives and 0:34 angles helps me understand things more deeply. 0:37 So I've included some things about getters and 0:40 setters that I find useful in the teacher's notes. 0:42 For this example, 0:45 we're going to add a setter method that sets an owner property for the pet class. 0:46 We'll start with a simple example to show the basic syntax and 0:50 get familiar with the concept, and in the next video we'll dive in deeper. 0:53 So back in our Pet.js file, 0:57 let's add a few lines under our existing getter method. 0:59 A setter method is created by typing the key word set followed by 1:04 the name of the property being set, which in our case is owner. 1:08 And then our usual parentheses and curly braces. 1:12 Setters always receive exactly one parameter. 1:17 The parameter is the value of the property that we'd like to set. 1:20 In this example, it will be the owner's name. 1:24 Inside our method, 1:29 we have to set an owner property equal to the parameter we passed in. 1:30 But there's a little snag. 1:34 The name of a property can never be the same as the name of a getter or 1:35 setter method. 1:39 This means we can't do this. 1:40 We have to create a property name that's different from 1:45 owner to hold the value of owner. 1:48 This is called a backing property. 1:50 And while we can name the backing property however we would like, convention dictates 1:52 to use the name of the setter function but with an underscore behind it. 1:57 Just like this. 2:00 While we're in our setter method, let's also add a console log. 2:04 When we set the owner property and run the file, 2:08 this will demonstrate that the setter function has actually been called. 2:10 Great. 2:26 So how do we use our setter method? 2:26 Move down to the end of the file and create a new line. 2:28 Type the name of the object who's owner property you want to set followed by a dot 2:32 and then the name of the setter method, which in this case is owner. 2:36 Add an equals sign and then the value of the owner's name. 2:40 You're probably thinking to yourself, this looks exactly like 2:45 setting a property value using dot notation, and you'd be right. 2:49 That's what's great about getter and setter methods. 2:53 They provide the syntactical simplicity of direct property access, 2:55 while simultaneously offering the flexibility of a method. 2:59 Great, we've set our owner property using a setter method. 3:03 Now let's try to access this property. 3:06 I'll create a new line and 3:09 log the owner property of the ernie object to the console. 3:10 Let's save and jump down to our console to run the file. 3:17 Well, we can see that out setter function was called, but 3:26 the value of the owner property is being output as undefined. 3:29 That's not great. 3:33 Why is that happening? 3:34 If you recall, the setter method is storing the value in a backing property. 3:40 In our case, that's actually _owner, not owner. 3:45 When we try to retrieve the value of owner by using ernie.owner, for example, 3:50 we get undefined, meaning the owner property has no assigned value. 3:54 To solve this, we've got to create a getter method called owner that returns 3:59 the value of the backing property. 4:03 I'll add that right before I set our method. 4:05 Awesome, now we have a way to access the owner property. 4:15 Let's try to run this again. 4:19 Great, you'll see that now it's outputting the value Ashley just like we 4:24 expect it to. 4:28 Awesome job. 4:28 In this example, our setter function didn't have any logic included. 4:30 In the next video, I'm going to show you an example of how adding logic to setter 4:34 functions can be used to simplify your coding process. 4:37