1
00:00:00,520 --> 00:00:04,050
Wow, you have done a ton of cool stuff so
far in this course.

2
00:00:04,050 --> 00:00:08,400
You've created object literals, refactored
those object literals into a class,

3
00:00:08,400 --> 00:00:12,890
created object instances from that class,
wrote constructor methods, and getter and

4
00:00:12,890 --> 00:00:14,120
setter methods.

5
00:00:14,120 --> 00:00:16,680
Now it's time to build on what we've done.

6
00:00:16,680 --> 00:00:21,030
Did you know that the value of an object's
property can be another object?

7
00:00:21,030 --> 00:00:24,550
When we first talked about object oriented
programming, one of the things that we

8
00:00:24,550 --> 00:00:28,740
learned was that OOP is a programming
paradigm that uses objects.

9
00:00:28,740 --> 00:00:32,132
These objects are designed to
interact with one another.

10
00:00:32,132 --> 00:00:34,710
We're gonna be doing some more
advanced things in this video.

11
00:00:34,710 --> 00:00:37,290
It's okay if you're not
100% sure how to do

12
00:00:37,290 --> 00:00:39,500
these things on your own when we're done.

13
00:00:39,500 --> 00:00:42,670
My goal is to expose you to some of
the really neat things you can do with

14
00:00:42,670 --> 00:00:46,660
JavaScript and to get you excited
about object-oriented programming.

15
00:00:46,660 --> 00:00:49,410
In future Treehouse content,
we'll continue to revisit

16
00:00:49,410 --> 00:00:52,040
everything that we've talked
about in this course and more.

17
00:00:52,040 --> 00:00:54,670
For this video,
just try to follow along and have fun.

18
00:00:55,790 --> 00:00:59,080
Currently, we're passing our setter
function a string that represents

19
00:00:59,080 --> 00:01:00,590
the name of the owner.

20
00:01:00,590 --> 00:01:02,810
What if we wanted to do more with this?

21
00:01:02,810 --> 00:01:05,170
Knowing the name of the pet's
owner is great, but

22
00:01:05,170 --> 00:01:09,350
it's probably a good idea to have
more information than just that.

23
00:01:09,350 --> 00:01:12,240
What if the pet gets lost and
is found by a neighbor?

24
00:01:12,240 --> 00:01:15,720
It would be really helpful if we had a way
to store the owner's phone number and

25
00:01:15,720 --> 00:01:17,260
address as well.

26
00:01:17,260 --> 00:01:20,140
We could add these as additional
properties to the pet object,

27
00:01:20,140 --> 00:01:22,795
but I think there's a better option.

28
00:01:22,795 --> 00:01:23,974
Are you thinking what I'm thinking?

29
00:01:23,974 --> 00:01:25,038
You are?

30
00:01:25,038 --> 00:01:29,390
You're right,
let's create a new class called Owner.

31
00:01:29,390 --> 00:01:32,730
And then instead of setting the owner
property equal to the string,

32
00:01:32,730 --> 00:01:37,010
Ashley, we'll set it equal to
a new instance of the owner class.

33
00:01:37,010 --> 00:01:38,833
To start, let's code up the Owner class.

34
00:01:44,160 --> 00:01:45,317
First we'll declare the class.

35
00:01:51,290 --> 00:01:56,018
And then we'll create the constructor
method to initialize the name and

36
00:01:56,018 --> 00:01:57,501
address properties.

37
00:02:11,684 --> 00:02:14,079
For the phone number, however,
I'd like to use a setter method.

38
00:02:14,079 --> 00:02:19,019
If you recall, setters are great to use
when you want to attach some kind of logic

39
00:02:19,019 --> 00:02:22,365
to a property value or
simplify your coding process.

40
00:02:22,365 --> 00:02:26,899
Using a setter method for the phone number
property will allow me to normalize

41
00:02:26,899 --> 00:02:31,432
a phone number any time one is set,
by automatically removing all non numeric

42
00:02:31,432 --> 00:02:34,730
characters like spaces,
hyphens, and parentheses.

43
00:02:37,040 --> 00:02:40,132
The setter method will
receive one parameter,

44
00:02:40,132 --> 00:02:44,003
which is the value being set for
the phone number property.

45
00:02:49,966 --> 00:02:52,151
To normalize the phone
number before I set it,

46
00:02:52,151 --> 00:02:55,925
I'll use the string method replace and
a regular expression.

47
00:02:55,925 --> 00:02:59,510
I've put more information about these
concepts inside the teacher's notes, but

48
00:02:59,510 --> 00:03:01,960
this isn't stuff you need to know for
this course.

49
00:03:01,960 --> 00:03:05,340
Don't worry if you haven't seen it before,
for now, just try to follow along.

50
00:03:06,460 --> 00:03:14,283
So first, I'll create a variable to
store the normalized phone number.

51
00:03:14,283 --> 00:03:16,607
Because the phone number
parameter is a string,

52
00:03:16,607 --> 00:03:18,602
I can use the string method replace on it.

53
00:03:22,850 --> 00:03:24,780
This method takes two parameters.

54
00:03:24,780 --> 00:03:28,540
The characters to be replaced and
what they're being replaced with.

55
00:03:28,540 --> 00:03:30,118
For the first parameter,

56
00:03:30,118 --> 00:03:34,358
a regular expression is used to
identify all non numeric characters.

57
00:03:41,691 --> 00:03:44,896
For the second parameter,
we'll use an empty string to indicate that

58
00:03:44,896 --> 00:03:48,170
any non numeric characters should
be replaced with that empty string.

59
00:03:49,170 --> 00:03:50,710
Now, to complete our setter method,

60
00:03:50,710 --> 00:03:53,954
we can store the normalized phone number
to the phone number backing property.

61
00:04:05,230 --> 00:04:09,279
Perfect, now that that's done, let's
create the associated getter method for

62
00:04:09,279 --> 00:04:10,091
the phone number.

63
00:04:22,350 --> 00:04:24,840
Awesome job,
the new Owner class is all set.

64
00:04:24,840 --> 00:04:27,899
To use it, let's go back down
to our previous example and

65
00:04:27,899 --> 00:04:31,549
set the ernie.owner property to
a new instance of the Owner class.

66
00:04:42,286 --> 00:04:45,640
Notice that I'm only passing in
the name and address parameters.

67
00:04:47,130 --> 00:04:50,870
Because ernie.owner now represents
an object, you can use dot or

68
00:04:50,870 --> 00:04:54,970
bracket notation on it to access or
set the properties of that object.

69
00:04:54,970 --> 00:04:59,833
So to set the phone number of the owner,
using our setter method, we could do this.

70
00:05:14,319 --> 00:05:15,929
I've added some extra parentheses and

71
00:05:15,929 --> 00:05:19,750
hyphens in the phone number to make
sure our normalizer is working properly.

72
00:05:19,750 --> 00:05:22,834
Let's log the value of the ernie.owner
property to the console to see

73
00:05:22,834 --> 00:05:23,573
how this looks.

74
00:05:37,954 --> 00:05:41,860
Perfect, the owner property is set to
the instance of the new owner class,

75
00:05:41,860 --> 00:05:42,980
just like we wanted.

76
00:05:44,070 --> 00:05:48,280
Also, notice how the owner phone
number was successfully normalized.

77
00:05:48,280 --> 00:05:51,510
Now, what if we wanted to log just
the owner's name or phone number?

78
00:05:53,070 --> 00:05:55,307
We could do this for the name property.

79
00:06:01,450 --> 00:06:02,580
And this for the phone property.

80
00:06:03,890 --> 00:06:06,129
Let's save this and
run it again to see what's logged.

81
00:06:12,345 --> 00:06:16,430
Perfect, whoa, cool,
I'm really proud of you.

82
00:06:16,430 --> 00:06:19,957
This is some tough and confusing material
and you're doing an awesome job.

83
00:06:19,957 --> 00:06:23,590
I really appreciate you following along
with this video, and I hope it excited you

84
00:06:23,590 --> 00:06:26,870
about some of the super neat things
you can do with objects in JavaScript.