1
00:00:00,074 --> 00:00:03,909
You learned previously that when a getter
method is called, a property value

2
00:00:03,909 --> 00:00:08,880
is computed and returned, but this value
is not ever updated or stored anywhere.

3
00:00:08,880 --> 00:00:12,264
A setter method, on the other hand,
receives a value and

4
00:00:12,264 --> 00:00:14,814
can perform logic on
that value if need be.

5
00:00:14,814 --> 00:00:18,271
Then it either updates an existing
property with that value or

6
00:00:18,271 --> 00:00:20,270
stores the value to a new property.

7
00:00:21,320 --> 00:00:23,834
This is pretty confusing and
complicated at first.

8
00:00:23,834 --> 00:00:25,324
Don't worry if you're having trouble.

9
00:00:25,324 --> 00:00:29,140
This is tough stuff and it can take
awhile for new concepts to sink in.

10
00:00:29,140 --> 00:00:32,995
When I'm learning a new concept, I spend
a lot of time practicing the code and

11
00:00:32,995 --> 00:00:34,669
reading about the topic online.

12
00:00:34,669 --> 00:00:37,988
I found that being exposed to a topic
from many different perspectives and

13
00:00:37,988 --> 00:00:40,670
angles helps me understand
things more deeply.

14
00:00:40,670 --> 00:00:42,841
So I've included some
things about getters and

15
00:00:42,841 --> 00:00:45,238
setters that I find useful
in the teacher's notes.

16
00:00:45,238 --> 00:00:46,128
For this example,

17
00:00:46,128 --> 00:00:50,600
we're going to add a setter method that
sets an owner property for the pet class.

18
00:00:50,600 --> 00:00:53,656
We'll start with a simple example
to show the basic syntax and

19
00:00:53,656 --> 00:00:57,443
get familiar with the concept, and
in the next video we'll dive in deeper.

20
00:00:57,443 --> 00:00:59,032
So back in our Pet.js file,

21
00:00:59,032 --> 00:01:02,220
let's add a few lines under
our existing getter method.

22
00:01:04,660 --> 00:01:08,449
A setter method is created by
typing the key word set followed by

23
00:01:08,449 --> 00:01:12,254
the name of the property being set,
which in our case is owner.

24
00:01:12,254 --> 00:01:14,778
And then our usual parentheses and
curly braces.

25
00:01:17,310 --> 00:01:20,737
Setters always receive
exactly one parameter.

26
00:01:20,737 --> 00:01:24,044
The parameter is the value of
the property that we'd like to set.

27
00:01:24,044 --> 00:01:26,269
In this example,
it will be the owner's name.

28
00:01:29,568 --> 00:01:30,531
Inside our method,

29
00:01:30,531 --> 00:01:34,200
we have to set an owner property
equal to the parameter we passed in.

30
00:01:34,200 --> 00:01:35,629
But there's a little snag.

31
00:01:35,629 --> 00:01:39,074
The name of a property can never be
the same as the name of a getter or

32
00:01:39,074 --> 00:01:40,420
setter method.

33
00:01:40,420 --> 00:01:42,196
This means we can't do this.

34
00:01:45,297 --> 00:01:48,027
We have to create a property
name that's different from

35
00:01:48,027 --> 00:01:50,350
owner to hold the value of owner.

36
00:01:50,350 --> 00:01:52,375
This is called a backing property.

37
00:01:52,375 --> 00:01:57,100
And while we can name the backing property
however we would like, convention dictates

38
00:01:57,100 --> 00:02:00,994
to use the name of the setter function but
with an underscore before it.

39
00:02:00,994 --> 00:02:02,148
Just like this.

40
00:02:04,651 --> 00:02:08,231
While we're in our setter method,
let's also add a console log.

41
00:02:08,231 --> 00:02:10,369
When we set the owner property and
run the file,

42
00:02:10,369 --> 00:02:13,754
this will demonstrate that the setter
function has actually been called.

43
00:02:26,143 --> 00:02:26,760
Great.

44
00:02:26,760 --> 00:02:28,644
So how do we use our setter method?

45
00:02:28,644 --> 00:02:32,424
Move down to the end of the file and
create a new line.

46
00:02:32,424 --> 00:02:36,544
Type the name of the object whose owner
property you want to set followed by a dot

47
00:02:36,544 --> 00:02:40,920
and then the name of the setter method,
which in this case is owner.

48
00:02:40,920 --> 00:02:45,517
Add an equals sign and
then the value of the owner's name.

49
00:02:45,517 --> 00:02:49,183
You're probably thinking to yourself,
this looks exactly like

50
00:02:49,183 --> 00:02:53,330
setting a property value using
dot notation, and you'd be right.

51
00:02:53,330 --> 00:02:55,355
That's what's great about getter and
setter methods.

52
00:02:55,355 --> 00:02:59,395
They provide the syntactical
simplicity of direct property access,

53
00:02:59,395 --> 00:03:03,850
while simultaneously offering
the flexibility of a method.

54
00:03:03,850 --> 00:03:06,725
Great, we've set our owner
property using a setter method.

55
00:03:06,725 --> 00:03:09,580
Now let's try to access this property.

56
00:03:09,580 --> 00:03:10,887
I'll create a new line and

57
00:03:10,887 --> 00:03:13,806
log the owner property of
the ernie object to the console.

58
00:03:17,300 --> 00:03:19,877
Let's save and
jump down to our console to run the file.

59
00:03:26,220 --> 00:03:29,869
Well, we can see that out
setter function was called, but

60
00:03:29,869 --> 00:03:33,758
the value of the owner property
is being output as undefined.

61
00:03:33,758 --> 00:03:34,756
That's not great.

62
00:03:34,756 --> 00:03:35,817
Why is that happening?

63
00:03:40,928 --> 00:03:45,020
If you recall, the setter method is
storing the value in a backing property.

64
00:03:45,020 --> 00:03:50,337
In our case,
that's actually _owner, not owner.

65
00:03:50,337 --> 00:03:54,693
When we try to retrieve the value of
owner by using ernie.owner, for example,

66
00:03:54,693 --> 00:03:59,250
we get undefined, meaning the owner
property has no assigned value.

67
00:03:59,250 --> 00:04:03,215
To solve this, we've got to create
a getter method called owner that returns

68
00:04:03,215 --> 00:04:05,056
the value of the backing property.

69
00:04:05,056 --> 00:04:07,207
I'll add that right
before I set our method.

70
00:04:15,996 --> 00:04:19,175
Awesome, now we have a way to
access the owner property.

71
00:04:19,175 --> 00:04:20,570
Let's try to run this again.

72
00:04:24,441 --> 00:04:28,258
Great, you'll see that now it's
outputting the value Ashley just like we

73
00:04:28,258 --> 00:04:28,992
expect it to.

74
00:04:28,992 --> 00:04:30,460
Awesome job.

75
00:04:30,460 --> 00:04:34,045
In this example, our setter function
didn't have any logic included.

76
00:04:34,045 --> 00:04:37,903
In the next video, I'm going to show you
an example of how adding logic to setter

77
00:04:37,903 --> 00:04:40,620
functions can be used to
simplify your coding process.