Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Use dot notation to set the value of an object's property and add new properties to an object.
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
You can also use dot notation to set
the value of an object's property.
0:00
You use the equal sign, or the assignment
operator, just as you do with variables.
0:04
For example, to change the name
property of this student object,
0:09
you assign it a new value like this.
0:13
In fact, you can even create and
add new properties to an object this way.
0:15
For example, to add a city property to
the student object, you'd write this.
0:19
This not only adds a property
named city to the object, but
0:24
also assigns it a value.
0:28
Back in the object.js file,
0:30
let's change the value of
the person object's name property.
0:32
In the message, I'll include most
0:37
know me ${ person.name = 'Duke'}.
0:43
Let's see the updated message.
0:51
I'll save the file and
refresh the browser.
0:52
Notice the original name property value,
Edward, and
0:56
the new value after changing it, Duke.
0:59
If I type person into the console,
1:02
it returns the updated person object
with the name property set to Duke.
1:04
You learn that you can create and
1:10
add new properties to
an object using dot notation.
1:13
I'll add a new nickname
property to the person object.
1:16
We have person.nickname, and
assign it the string, Duke.
1:19
Then in the message, I'll change
person.name here to person.nickname.
1:28
Typing person into the console now,
1:38
returns the person object with a new
nickname property and value inside it.
1:40
You can also perform math using
properties set to numeric values.
1:49
For example, in the message,
1:54
I'll include my age is person.age + 1.
1:59
The age property is set
to 37 inside the object.
2:05
By adding 1, the value displaying
in the message is now 38.
2:09
You can also access
the properties of certain values.
2:19
For example, the skills property
is set to an array, you can
2:23
use the length property on that array to
return how many skills the person has.
2:27
I'll add another sentence in the message
that says, I have ${ } skills.
2:32
Again, person is the object and
skills is the property name.
2:38
Between the curly braces
type person.skills.
2:43
Since the value assigned to skills
is an array of string values,
2:49
you can access the length property of
the array with person.skills.length.
2:53
You access methods of
properties in a similar way.
2:59
For example,
to return a list of the person's skills,
3:02
use the array join method, like this.
3:06
You learned about the join
method in a previous course.
3:14
Here I start with the object,
3:18
person, then access the skills
property which is an array.
3:20
Then use the join array
method on that property,
3:24
passing it a string containing a comma and
space.
3:27
That way a comma and space appear
after each element in the array.
3:31
The message now shows that Edward,
or Duke, has 3 skills and
3:35
they are JavaScript, HTML, and CSS, good.
3:40
As you can see,
working with object properties isn't
3:44
all that different from
working with variables.
3:47
And objects are well arranged packages of
information holding data you want to use
3:49
in your code.
3:54
In the next stage,
3:54
you'll learn how to loop through
all of the properties in an object.
3:55
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