Preview
Video Player
00:00
00:00
Object Interaction
6:27Creating objects that work together.
Wow, you have done a ton of cool stuff so
far in this course.
0:00
You've created object literals, refactored
those object literals into a class,
0:04
created object instances from that class,
wrote constructor methods, and getter and
0:08
setter methods.
0:12
Now it's time to build on what we've done.
0:14
Did you know that the value of an object's
property can be another object?
0:16
When we first talked about object oriented
programming, one of the things that we
0:21
learned was that OOP is a programming
paradigm that uses objects.
0:24
These objects are designed to
interact with one another.
0:28
We're gonna be doing some more
advanced things in this video.
0:32
It's okay if you're not
100% sure how to do
0:34
these things on your own when we're done.
0:37
My goal is to expose you to some of
the really neat things you can do with
0:39
JavaScript and to get you excited
about object-oriented programming.
0:42
In future Treehouse content,
we'll continue to revisit
0:46
everything that we've talked
about in this course and more.
0:49
For this video,
just try to follow along and have fun.
0:52
Currently, we're passing our setter
function a string that represents
0:55
the name of the owner.
0:59
What if we wanted to do more with this?
1:00
Knowing the name of the pet's
owner is great, but
1:02
it's probably a good idea to have
more information than just that.
1:05
What if the pet gets lost and
is found by a neighbor?
1:09
It would be really helpful if we had a way
to store the owner's phone number and
1:12
address as well.
1:15
We could add these as additional
properties to the pet object,
1:17
but I think there's a better option.
1:20
Are you thinking what I'm thinking?
1:22
You are?
1:23
You're right,
let's create a new class called Owner.
1:25
And then instead of setting the owner
property equal to the string,
1:29
Ashley, we'll set it equal to
a new instance of the owner class.
1:32
To start, let's code up the Owner class.
1:37
First we'll declare the class.
1:44
And then we'll create the constructor
method to initialize the name and
1:51
address properties.
1:56
For the phone number, however,
I'd like to use a setter method.
2:11
If you recall, setters are great to use
when you want to attach some kind of logic
2:14
to a property value or
simplify your coding process.
2:19
Using a setter method for the phone number
property will allow me to normalize
2:22
a phone number any time one is set,
by automatically removing all non numeric
2:26
characters like spaces,
hyphens, and parentheses.
2:31
The setter method will
receive one parameter,
2:37
which is the value being set for
the phone number property.
2:40
To normalize the phone
number before I set it,
2:49
I'll use the string method replace and
a regular expression.
2:52
I've put more information about these
concepts inside the teacher's notes, but
2:55
this isn't stuff you need to know for
this course.
2:59
Don't worry if you haven't seen it before,
for now, just try to follow along.
3:01
So first, I'll create a variable to
store the normalized phone number.
3:06
Because the phone number
parameter is a string,
3:14
I can use the string method replace on it.
3:16
This method takes two parameters.
3:22
The characters to be replaced and
what they're being replaced with.
3:24
For the first parameter,
3:28
a regular expression is used to
identify all non numeric characters.
3:30
For the second parameter,
we'll use an empty string to indicate that
3:41
any non numeric characters should
be replaced with that empty string.
3:44
Now, to complete our setter method,
3:49
we can store the normalized phone number
to the phone number backing property.
3:50
Perfect, now that that's done, let's
create the associated getter method for
4:05
the phone number.
4:09
Awesome job,
the new Owner class is all set.
4:22
To use it, let's go back down
to our previous example and
4:24
set the ernie.owner property to
a new instance of the Owner class.
4:27
Notice that I'm only passing in
the name and address parameters.
4:42
Because ernie.owner now represents
an object, you can use dot or
4:47
bracket notation on it to access or
set the properties of that object.
4:50
So to set the phone number of the owner,
using our setter method, we could do this.
4:54
I've added some extra parentheses and
5:14
hyphens in the phone number to make
sure our normalizer is working properly.
5:15
Let's log the value of the ernie.owner
property to the console to see
5:19
how this looks.
5:22
Perfect, the owner property is set to
the instance of the new owner class,
5:37
just like we wanted.
5:41
Also, notice how the owner phone
number was successfully normalized.
5:44
Now, what if we wanted to log just
the owner's name or phone number?
5:48
We could do this for the name property.
5:53
And this for the phone property.
6:01
Let's save this and
run it again to see what's logged.
6:03
Perfect, whoa, cool,
I'm really proud of you.
6:12
This is some tough and confusing material
and you're doing an awesome job.
6:16
I really appreciate you following along
with this video, and I hope it excited you
6:19
about some of the super neat things
you can do with objects in JavaScript.
6:23