Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn how to retrieve and set values in objects using property names using both bracket and dot notation.
-
0:00
JavaScript objects let you store multiple pieces of
-
0:03
information in a single variable.
-
0:05
In this way objects are similar to arrays.
-
0:08
However, arrays use a number, an index value to access an array item, and
-
0:13
objects use a key to access their properties.
-
0:17
For example, if you had an array named students,
-
0:20
you'd get to the first item using an index value of zero, like this.
-
0:25
Let's look at an example object.
-
0:27
There are actually two different ways to access the value inside an object.
-
0:32
First, you can access the value of the name property like this.
-
0:36
Use the same type of square brackets you use with an array, but
-
0:40
instead of providing a number, you provide the property's name as a string.
-
0:46
But, there's another easier and
-
0:48
more common way to access properties of an object, called .notation.
-
0:52
You don't need square brackets and
-
0:54
you don't need to put quote marks around the property's name.
-
0:57
Just add a dot after the object name, followed by the property name.
-
1:03
You can use either the brackets or dot notation to access the property value.
-
1:07
Dot notation is more common however.
-
1:10
You can also set a property's value this way.
-
1:13
Just use the equal sign.
-
1:14
The assignment operator just as you do with simple variables.
-
1:18
For example, to change the name of this person object,
-
1:22
you just assign it a new value.
-
1:26
In fact, you can [SOUND] even create new properties on an object this way.
-
1:30
For example, to add a country property to this object, you'd write this.
-
1:35
This not only adds a property named country to the object, but
-
1:38
also gives it a value.
-
1:41
One way to think of a basic object like this, an object used to
-
1:44
store properties and values is like a kind of package for variables.
-
1:48
Think of properties as a collection of variables contained inside the object.
-
1:53
This helps keep related data grouped in one easily accessed unit.
-
1:57
This simplifies handling data, for example.
-
2:01
You can pass an object and
-
2:02
all of its properties as a single argument to a function.
-
2:06
This is particularly helpful if you want to return a lot of
-
2:09
information from a function.
-
2:10
Remember the return keyword in JavaScript only lets you return one thing,
-
2:16
but by returning a object full of information, you can
-
2:20
create a function that returns one thing that's also full of lots of information.
-
2:24
All right, let's start working with JavaScript objects.
-
2:28
You can follow along with workspaces if you'd like.
-
2:30
Click the launch workspace button to open the workspace for this video.
-
2:34
If you prefer to use your own text editor you can download the project files from
-
2:38
this page.
-
2:39
Open the file object.js, it has a single print function, which we created in
-
2:44
the last section of this course, and the object you created in the last video.
-
2:49
The object has five properties with different types of values, strings.
-
2:54
[BLANK_AUDIO]
-
2:56
Number, boolean, and an array.
-
3:01
Let's use the object.
-
3:03
I'll create a new variable named message that combines a string with
-
3:07
a property from the object.
-
3:12
The name of the object is person so to access the value of the name property I
-
3:17
just type person, a period, and name, and then I'll close the paragraph tag.
-
3:25
Let's print this message to the page using the print function.
-
3:28
[BLANK_AUDIO]
-
3:32
I'll save the file and preview the workspace.
-
3:36
Cool.
-
3:37
The message prints out to the page, and
-
3:39
you can see that the object property works just like any other variable.
-
3:44
I just wanna point out that this string here we created isn't actual HTML.
-
3:50
It's just a string of characters like any other in JavaScript.
-
3:53
However, when they're added to the document, the browser converts it to
-
3:57
HTML and applies any formatting at that other paragraph's on the page receive.
-
4:02
Let's access another property and add it our string.
-
4:04
[BLANK_AUDIO]
-
4:12
We can also change the values of properties.
-
4:15
Let's change the name property, and update the message variable with the new value.
-
4:22
[BLANK_AUDIO]
-
4:32
Let's see how this works.
-
4:34
I'll save the file, and preview the workspace.
-
4:38
Here you can see the original property value, and
-
4:42
here's the new value after we change the name property.
-
4:46
You can perform math on numeric properties, too.
-
4:48
[BLANK_AUDIO]
-
5:01
I'll save and preview.
-
5:06
You can also access properties of those values.
-
5:08
For example, the skills property, contains an array.
-
5:12
You can look at the length property of that array to see how
-
5:15
many skills the student has.
-
5:17
[BLANK_AUDIO]
-
5:23
Remember that person is the object, skills is the property, but
-
5:28
since the value in skills is another object, an array of string values,
-
5:33
we can access a property of that object, person.skills.lenghth.
-
5:38
It's not uncommon to see objects within objects like this.
-
5:42
Just remember to use a period to connect the different objects and properties.
-
5:47
You can also access methods of properties.
-
5:50
For example, to print out a list of the students skills you can
-
5:53
use the array join method, like this.
-
5:57
You learned about this method in the last section of this course.
-
6:00
Here we start with the object person, access the skills property,
-
6:04
which is an array, then use an array method on that property.
-
6:10
As you can see, working with object properties isn't all
-
6:13
that different from working with variables.
-
6:16
In the next video,
-
6:17
you'll learn how to loop through all of the properties in an object.
-
6:20
See you there.
You need to sign up for Treehouse in order to download course files.
Sign up