Preview
Video Player
00:00
00:00
Set the Value of Object Properties
4:00Use dot notation to set the value of an object's property and add new properties to an object.
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