JavaScript objects let you store multiple pieces of

information in a single variable.

In this way objects are similar to arrays.

However, arrays use a number, an index value to access an array item, and

objects use a key to access their properties.

For example, if you had an array named students,

you'd get to the first item using an index value of zero, like this.

Let's look at an example object.

There are actually two different ways to access the value inside an object.

First, you can access the value of the name property like this.

Use the same type of square brackets you use with an array, but

instead of providing a number, you provide the property's name as a string.

But, there's another easier and

more common way to access properties of an object, called .notation.

You don't need square brackets and

you don't need to put quote marks around the property's name.

Just add a dot after the object name, followed by the property name.

You can use either the brackets or dot notation to access the property value.

Dot notation is more common however.

You can also set a property's value this way.

Just use the equal sign.

The assignment operator just as you do with simple variables.

For example, to change the name of this person object,

you just assign it a new value.

In fact, you can [SOUND] even create new properties on an object this way.

For example, to add a country property to this object, you'd write this.

This not only adds a property named country to the object, but

also gives it a value.

One way to think of a basic object like this, an object used to

store properties and values is like a kind of package for variables.

Think of properties as a collection of variables contained inside the object.

This helps keep related data grouped in one easily accessed unit.

This simplifies handling data, for example.

You can pass an object and

all of its properties as a single argument to a function.

This is particularly helpful if you want to return a lot of

information from a function.

Remember the return keyword in JavaScript only lets you return one thing,

but by returning a object full of information, you can

create a function that returns one thing that's also full of lots of information.

All right, let's start working with JavaScript objects.

You can follow along with workspaces if you'd like.

Click the launch workspace button to open the workspace for this video.

If you prefer to use your own text editor you can download the project files from

this page.

Open the file object.js, it has a single print function, which we created in

the last section of this course, and the object you created in the last video.

The object has five properties with different types of values, strings.

[BLANK_AUDIO]

Number, boolean, and an array.

Let's use the object.

I'll create a new variable named message that combines a string with

a property from the object.

The name of the object is person so to access the value of the name property I

just type person, a period, and name, and then I'll close the paragraph tag.

Let's print this message to the page using the print function.

[BLANK_AUDIO]

I'll save the file and preview the workspace.

Cool.

The message prints out to the page, and

you can see that the object property works just like any other variable.

I just wanna point out that this string here we created isn't actual HTML.

It's just a string of characters like any other in JavaScript.

However, when they're added to the document, the browser converts it to

HTML and applies any formatting at that other paragraph's on the page receive.

Let's access another property and add it our string.

[BLANK_AUDIO]

We can also change the values of properties.

Let's change the name property, and update the message variable with the new value.

[BLANK_AUDIO]

Let's see how this works.

I'll save the file, and preview the workspace.

Here you can see the original property value, and

here's the new value after we change the name property.

You can perform math on numeric properties, too.

[BLANK_AUDIO]

I'll save and preview.

You can also access properties of those values.

For example, the skills property, contains an array.

You can look at the length property of that array to see how

many skills the student has.

[BLANK_AUDIO]

Remember that person is the object, skills is the property, but

since the value in skills is another object, an array of string values,

we can access a property of that object, person.skills.lenghth.

It's not uncommon to see objects within objects like this.

Just remember to use a period to connect the different objects and properties.

You can also access methods of properties.

For example, to print out a list of the students skills you can

use the array join method, like this.

You learned about this method in the last section of this course.

Here we start with the object person, access the skills property,

which is an array, then use an array method on that property.

As you can see, working with object properties isn't all

that different from working with variables.

In the next video,

you'll learn how to loop through all of the properties in an object.

See you there.