Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Objects!
You have completed JavaScript Objects!
Preview
Learn how to access and use an object's data in your program.
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
JavaScript objects let you store
multiple pieces of information
0:00
in a single variable.
0:04
In this way objects are similar to arrays.
0:05
One difference is that arrays use a number
or index value to access an array element,
0:08
while objects use a key, or
property name to access a property.
0:13
For example,
if you had an array named students,
0:18
you'd get to the first element using
an index value of 0, like this.
0:21
Let's look at an example student object
with the properties name and age.
0:25
There are two different ways to
access the value inside an object.
0:30
First, you can access the value
of the name property like this.
0:33
You use the same type of square
brackets you use with an array, but
0:37
instead of providing a number, you
provide the property's name as a string.
0:41
There's another easier and
0:45
more common way to access properties
of an object called, dot notation.
0:47
You don't need square brackets, and
0:51
you don't need to put quote marks
around the properties' name.
0:52
You add a dot after the object name
followed by the property name.
0:55
You can use either the brackets or dot
notation to access a property value, but
0:59
you'll find that dot
notation is more common,
1:02
and that's what I'll use in this course.
1:05
Since an object is used to
store properties and values,
1:08
one way you might think of an object is
like a container, or tidy package of data.
1:11
The properties are like a collection of
variables contained inside the object.
1:16
This helps keep related data group
inside one easily accessed unit,
1:20
which simplifies handling and
maintaining data.
1:24
All right, let's get back to
working with JavaScript objects.
1:27
The object you created earlier,
in object.js, has five properties with
1:30
different types of values, strings,
a number, boolean, and an array.
1:35
Let's use the data in this object.
1:39
I'll create a new variable named message
and assign it a template literal.
1:42
Inside the backticks add the message,
Hi, I'm ${}.
1:47
Remember, the ${} inserts, or
interpolates a value into a string.
1:53
Now I'll use dot notation to
access the name property and
1:59
insert its value into the string.
2:03
The name of the object is person,
so to access the value
2:06
of the name property,
I'll type person.name.
2:12
Let's log this message to
the console using console.log.
2:17
I'll save the file, and
preview index.html in the browser.
2:22
The message, Hi, I'm Edward,
displays in the console.
2:25
Notice how the object property
works just like any other variable.
2:29
Let's access another property and
display it in the string.
2:34
Between the backticks, right,
2:38
I live in ${person.city}.
2:43
This returns the message, Hi,
I'm Edward, I live in New York.
2:49
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