"Build a Basic PHP Website (2018)" was retired on December 10, 2019. You are now viewing the recommended replacement.
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
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