Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Object-Oriented JavaScript!
You have completed Object-Oriented JavaScript!
Preview
Add logic in addition to setting property values via setter methods.
Resources
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