1
00:00:00,000 --> 00:00:04,879
[MUSIC]

2
00:00:04,879 --> 00:00:06,040
Welcome back.

3
00:00:06,040 --> 00:00:09,840
In JavaScript, there are two special
methods called getters and setters.

4
00:00:09,840 --> 00:00:12,520
These methods allow us to create and
retrieve or

5
00:00:12,520 --> 00:00:15,380
update an object's
properties respectively.

6
00:00:15,380 --> 00:00:17,180
You learned previously how to access or

7
00:00:17,180 --> 00:00:20,990
update an object's properties
using dot and bracket notation.

8
00:00:20,990 --> 00:00:23,420
So why do we need methods
that do the same thing?

9
00:00:23,420 --> 00:00:27,370
I promise that the answer is not
to needlessly complicate things.

10
00:00:27,370 --> 00:00:30,922
The idea behind getter and
setter methods is to increase flexibility.

11
00:00:30,922 --> 00:00:34,493
With getter and setter methods,
you have the option to include logic when

12
00:00:34,493 --> 00:00:38,237
retrieving or setting the value of
a property while still enjoying the simple

13
00:00:38,237 --> 00:00:42,040
syntax of accessing and
setting these properties directly.

14
00:00:42,040 --> 00:00:44,630
This concept might be
a little confusing at first.

15
00:00:44,630 --> 00:00:48,680
So feel free to slow me down if you want
or rewatch this section a few times.

16
00:00:48,680 --> 00:00:51,660
You'll also get a chance to practice
in a code challenge after this video.

17
00:00:53,190 --> 00:00:55,190
>> So what is a getter method?

18
00:00:55,190 --> 00:00:58,080
In JavaScript it's a special
method used when you want to have

19
00:00:58,080 --> 00:01:01,600
a property that has a dynamic or
computed value.

20
00:01:01,600 --> 00:01:04,870
The value of the property is
computed in the getter method.

21
00:01:04,870 --> 00:01:06,540
And even though it's not stored or

22
00:01:06,540 --> 00:01:11,340
attached to the object it can be
accessed just like a regular property.

23
00:01:11,340 --> 00:01:15,050
Go ahead and
open up the Pet.js file to follow along.

24
00:01:15,050 --> 00:01:17,430
Put a few new lines in and
after your constructor method.

25
00:01:18,710 --> 00:01:23,250
For this example we're going to add a
property called activity to the pet class.

26
00:01:23,250 --> 00:01:27,500
This property should tell us what our
pet is up to based on the time of day.

27
00:01:27,500 --> 00:01:30,920
Unfortunately, we can't set that
property in our constructor method,

28
00:01:30,920 --> 00:01:33,160
because its value is dynamic.

29
00:01:33,160 --> 00:01:35,640
It changes depending on what time it is.

30
00:01:35,640 --> 00:01:38,590
This is a perfect opportunity
to use the getter method.

31
00:01:38,590 --> 00:01:40,150
To create a getter method,

32
00:01:40,150 --> 00:01:44,800
you type the keyword get and
then the name of the property in question.

33
00:01:44,800 --> 00:01:48,941
And then just like a regular method,
we add parentheses and then curly braces.

34
00:01:52,203 --> 00:01:55,700
Inside the curly braces we'll compute and
return our value.

35
00:01:55,700 --> 00:01:59,650
To figure out the pet's activity, we'll get
the current hour and write an if statement

36
00:01:59,650 --> 00:02:03,920
that will return a different activity
depending on that hour value.

37
00:02:03,920 --> 00:02:06,480
I'm going to keep this function
as simple as possible, but

38
00:02:06,480 --> 00:02:09,910
this is a great opportunity for
you to use your imagination and

39
00:02:09,910 --> 00:02:12,980
make this function more
interesting by adding more to it.

40
00:02:12,980 --> 00:02:15,820
First, we wanna figure out
what hour of the day it is.

41
00:02:15,820 --> 00:02:20,370
And guess what, we're gonna use
a built-in JavaScript object to do this.

42
00:02:20,370 --> 00:02:23,090
Declare a variable using
the const keyword called today.

43
00:02:24,200 --> 00:02:28,130
This variable will hold a new instance
of the JavaScript date object.

44
00:02:31,550 --> 00:02:33,080
Familiar, right?

45
00:02:33,080 --> 00:02:36,190
If we were to output the value
of the today variable right now,

46
00:02:36,190 --> 00:02:40,670
we would see a string that tells us
today's date and time in universal time.

47
00:02:40,670 --> 00:02:44,590
For more information about universal time,
check out the teacher's notes.

48
00:02:44,590 --> 00:02:48,700
Getting today's date and time as a string
isn't terribly useful for our purposes but

49
00:02:48,700 --> 00:02:52,050
luckily the date object has many
different methods that will return

50
00:02:52,050 --> 00:02:56,030
pieces of the date and
time that we can use however we need them.

51
00:02:56,030 --> 00:02:58,920
One of these methods is getHours().

52
00:02:58,920 --> 00:03:02,280
This will return the current
hour on a 24 hour clock.

53
00:03:02,280 --> 00:03:05,160
We'll use the getHours() method to
help us figure out what our pet

54
00:03:05,160 --> 00:03:06,830
is doing right now.

55
00:03:06,830 --> 00:03:10,520
There's a ton more cool things you can do
with the date object, if you're interested

56
00:03:10,520 --> 00:03:14,070
go ahead and check out the teacher's
notes for links to more documentation.

57
00:03:14,070 --> 00:03:18,010
Do you remember how to access
an object's methods using dot notation?

58
00:03:18,010 --> 00:03:20,790
If you wanna give yourself a quick
challenge, pause this video for

59
00:03:20,790 --> 00:03:24,900
a moment and try to create a variable
that will hold the current hour

60
00:03:24,900 --> 00:03:28,130
using the date object and
the getHours() method.

61
00:03:28,130 --> 00:03:32,160
Otherwise keep following along and
I'll walk you through this step.

62
00:03:32,160 --> 00:03:32,900
Okay.

63
00:03:32,900 --> 00:03:37,140
Create a variable called hour using
the const keyword and set it equal

64
00:03:38,390 --> 00:03:44,000
to today.getHours().

65
00:03:44,000 --> 00:03:44,680
Great job.

66
00:03:44,680 --> 00:03:45,720
That was pretty simple right?

67
00:03:47,030 --> 00:03:48,340
Now we're gonna write the if statement.

68
00:03:49,420 --> 00:03:54,037
All my pets do is sleep and play, so
my if statement will be pretty simple.

69
00:03:58,299 --> 00:04:04,401
If the hour is after 8 and

70
00:04:04,401 --> 00:04:10,503
on or before hour 20,

71
00:04:10,503 --> 00:04:15,443
they are playing and

72
00:04:15,443 --> 00:04:21,545
if it's any other hour,

73
00:04:21,545 --> 00:04:26,787
they're sleeping.

74
00:04:34,982 --> 00:04:37,490
Feel free to expand on
this in your own code.

75
00:04:37,490 --> 00:04:40,770
Maybe your pets have a schedule that
include things like going outside,

76
00:04:40,770 --> 00:04:43,680
having meals or
socializing with other pets.

77
00:04:43,680 --> 00:04:46,460
When you create an object,
it's entirely your design.

78
00:04:46,460 --> 00:04:48,660
So have fun with it. Great work.

79
00:04:48,660 --> 00:04:50,810
You just wrote your first Getter method.

80
00:04:50,810 --> 00:04:53,210
This special method
allowed you to create and

81
00:04:53,210 --> 00:04:57,060
dynamically retrieve the value
of a property called activity.

82
00:04:57,060 --> 00:04:59,060
Even though this property
wasn't declared and

83
00:04:59,060 --> 00:05:02,100
set in a constructor method
like the other properties were,

84
00:05:02,100 --> 00:05:06,800
you can access its value the same way,
using dot or bracket notation.

85
00:05:06,800 --> 00:05:10,540
But remember if you were to output
the ernie object to the console,

86
00:05:10,540 --> 00:05:13,070
you would not see the new
activity property.

87
00:05:13,070 --> 00:05:16,640
A value for the activity property is
computed and returned from the getter

88
00:05:16,640 --> 00:05:21,280
method when we access it, but
never actually attached to the object.

89
00:05:21,280 --> 00:05:24,670
Let's test this out,
move down toward the bottom of your file,

90
00:05:24,670 --> 00:05:25,970
after the class declaration.

91
00:05:27,230 --> 00:05:30,352
On a new line, log the value for
the activity property for

92
00:05:30,352 --> 00:05:32,180
the ernie object to the console.

93
00:05:36,179 --> 00:05:38,639
Now let's save the file and run it.

94
00:05:46,713 --> 00:05:51,426
Try this again now, but

95
00:05:51,426 --> 00:05:58,030
log the ernie object as a whole.

96
00:06:00,311 --> 00:06:03,653
Notice how the ernie object doesn't
show an activity property, but

97
00:06:03,653 --> 00:06:06,547
when we access that property
directly a value is returned.

98
00:06:07,557 --> 00:06:09,067
Okay, let's take a break here.

99
00:06:09,067 --> 00:06:10,057
See you in the next video.