5.9 Getters and Setters

Hi folks, in this lesson, we can take a look at adding getters and setters to properties that we create in object literals. Getters and setters are special functions that are invoked automatically whenever a property is accessed or assigned to. Let's start by looking at getters. We can add a getter using the get keyword in front of the property name. So, in this example, we create a regular object literal called, myObj. We give it a regular property with the key, otherProp, and the value, other, in string format. We then add a new property called prop, but we use the get keyword in front of the property name. And notice how the property actually looks like a method. In this example, we'll just log to the console and then return the value of the other prop property. So now, whenever we access prop, it will invoke the getter. And let's review the output in a browser. So we see our log message and then the getter property actually returns the value of otherProp, which in this case is the string, other. Inside our getter, we can perform whatever logic we want. Although, as I said, in this case, we just log a message to the console and then return a different property value. Again inside the getter, we've used the special object called, this. We will come back to this shortly in the next section, in this context, just understand that this refers to the object, myObj. So now let's take a look at setters. We can add a setter for the same property that we have a getter for. So a setter looks very much like a getter except that we use the set keyword instead of the get keyword. And a setter will receive a value, and that is the new value that is being set to the property. So in this basic example, we can just do another console log, and we'll just log out the value that we are setting. And on the last line inside the setter, this line here, we set the value of otherProp to the new value. We don't have to add both getters and setters to the same property, although we have done in this case. And when using getters and setters, we will very often set or get a different property than the getter or setter themselves. In the console.log statement down at the bottom, you can see that we were getting the value prop. But that was actually returning the value of otherProp. And this is most commonly how getters and setters are used. So let's just invoke our new setter. And let's just log out the objects once we've invoked the setter. Let's go back to the browser now, so we see the log message from the setter, and below that, we can see a log of the object. And we can see that the other property has had its value set to new. It's important to understand, however, that the other property that we've been working with is not hidden or protected in any way. Just because we're using a getter and a setter with it. We can still access otherProp directly if we want to. But if we are building something to be used by other developers, like a widget, or a plugin for some framework. We only need to publicize the property that has the getter and the setter attached to it. And not the property that the getter and setter operates on, we don't have to use a different property if we just want to add a getter. We only needed it in this example because we had both a getter and a setter. So in this lesson, we learned how to add getters and setters to properties within object literals. Getters and setters are properties that have methods which are invoked when the property is either accessed. Or has a new value assigned to it. We also learned that inside a getter or a setter, the this keyword points to the object that the getter or setter belongs to. In the next lesson, we're going to look at custom objects. Thanks for watching.