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
Create properties with dynamic values using getters in JavaScript.
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
[MUSIC]
0:00
Welcome back.
0:04
In JavaScript, there are two special
methods called getters and setters.
0:06
These methods allow us to create and
retrieve or
0:09
update an object's
properties respectively.
0:12
You learned previously how to access or
0:15
update an object's properties
using dot and bracket notation.
0:17
So why do we need methods
that do the same thing?
0:20
I promise that the answer is not
to needlessly complicate things.
0:23
The idea behind getter and
setter methods is to increase flexibility.
0:27
With getter and setter methods,
you have the option to include logic when
0:30
retrieving or setting the value of
a property while still enjoying the simple
0:34
syntax of accessing and
setting these properties directly.
0:38
This concept might be
a little confusing at first.
0:42
So feel free to slow me down if you want
or rewatch this section a few times.
0:44
You'll also get a chance to practice
in a code challenge after this video.
0:48
>> So what is a getter method?
0:53
In JavaScript it's a special
method used when you want to have
0:55
a property that has a dynamic or
computed value.
0:58
The value of the property is
computed in the getter method.
1:01
And even though it's not stored or
1:04
attached to the object it can be
accessed just like a regular property.
1:06
Go ahead and
open up the Pet.js file to follow along.
1:11
Put a few new lines in and
after your constructor method.
1:15
For this example we're going to add a
property called activity to the pet class.
1:18
This property should tell us what our
pet is up to based on the time of day.
1:23
Unfortunately, we can't set that
property in our constructor method,
1:27
because its value is dynamic.
1:30
It changes depending on what time it is.
1:33
This is a perfect opportunity
to use the getter method.
1:35
To create a getter method,
1:38
you type the keyword get and
then the name of the property in question.
1:40
And then just like a regular method,
we add parentheses and then curly braces.
1:44
Inside the curly braces we'll compute and
return our value.
1:52
To figure out the pet's activity, we'll get
the current hour and write an if statement
1:55
that will return a different activity
depending on that hour value.
1:59
I'm going to keep this function
as simple as possible, but
2:03
this is a great opportunity for
you to use your imagination and
2:06
make this function more
interesting by adding more to it.
2:09
First, we wanna figure out
what hour of the day it is.
2:12
And guess what, we're gonna use
a built-in JavaScript object to do this.
2:15
Declare a variable using
the const keyword called today.
2:20
This variable will hold a new instance
of the JavaScript date object.
2:24
Familiar, right?
2:31
If we were to output the value
of the today variable right now,
2:33
we would see a string that tells us
today's date and time in universal time.
2:36
For more information about universal time,
check out the teacher's notes.
2:40
Getting today's date and time as a string
isn't terribly useful for our purposes but
2:44
luckily the date object has many
different methods that will return
2:48
pieces of the date and
time that we can use however we need them.
2:52
One of these methods is getHours().
2:56
This will return the current
hour on a 24 hour clock.
2:58
We'll use the getHours() method to
help us figure out what our pet
3:02
is doing right now.
3:05
There's a ton more cool things you can do
with the date object, if you're interested
3:06
go ahead and check out the teacher's
notes for links to more documentation.
3:10
Do you remember how to access
an object's methods using dot notation?
3:14
If you wanna give yourself a quick
challenge, pause this video for
3:18
a moment and try to create a variable
that will hold the current hour
3:20
using the date object and
the getHours() method.
3:24
Otherwise keep following along and
I'll walk you through this step.
3:28
Okay.
3:32
Create a variable called hour using
the const keyword and set it equal
3:32
to today.getHours().
3:38
Great job.
3:44
That was pretty simple right?
3:44
Now we're gonna write the if statement.
3:47
All my pets do is sleep and play, so
my if statement will be pretty simple.
3:49
If the hour is after 8 and
3:58
on or before hour 20,
4:04
they are playing and
4:10
if it's any other hour,
4:15
they're sleeping.
4:21
Feel free to expand on
this in your own code.
4:34
Maybe your pets have a schedule that
include things like going outside,
4:37
having meals or
socializing with other pets.
4:40
When you create an object,
it's entirely your design.
4:43
So have fun with it. Great work.
4:46
You just wrote your first Getter method.
4:48
This special method
allowed you to create and
4:50
dynamically retrieve the value
of a property called activity.
4:53
Even though this property
wasn't declared and
4:57
set in a constructor method
like the other properties were,
4:59
you can access its value the same way,
using dot or bracket notation.
5:02
But remember if you were to output
the ernie object to the console,
5:06
you would not see the new
activity property.
5:10
A value for the activity property is
computed and returned from the getter
5:13
method when we access it, but
never actually attached to the object.
5:16
Let's test this out,
move down toward the bottom of your file,
5:21
after the class declaration.
5:24
On a new line, log the value for
the activity property for
5:27
the ernie object to the console.
5:30
Now let's save the file and run it.
5:36
Try this again now, but
5:46
log the ernie object as a whole.
5:51
Notice how the ernie object doesn't
show an activity property, but
6:00
when we access that property
directly a value is returned.
6:03
Okay, let's take a break here.
6:07
See you in the next video.
6:09
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