Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Add logic in addition to setting property values via setter methods.
Getters and Setters
Here's some relevant documentation on getters and setters.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 before 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 whose 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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up