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
Start a free Courses trial
to watch this video
Objects are a really big subject. JavaScript is often referred to as an "object-oriented" or "object-based" programming language. As you learn more about JavaScript, you'll discover that most everything in JavaScript is either an object or can be treated as an object.
Objects code snippet
{
title: 'Avengers',
time: '12pm',
status: 'available'
},
{
title: 'Wonder Woman',
time: '2pm',
status: 'unavailable'
},
{
title: 'The Last Jedi',
time: '4pm',
status: 'available'
},
{
title: 'Black Panther',
time: '6pm',
status: 'unavailable'
},
{
title: 'Lady Bird',
time: '8pm',
status: 'available'
}
Resources
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
[MUSIC]
0:00
So you've already seen two ways
to store data with JavaScript.
0:03
A single value in a variable and
a list of values in an array.
0:07
Now it's time to talk
about JavaScript objects.
0:11
Objects are actually a really
big subject in JavaScript.
0:14
In fact, JavaScript is often
referred to as an object-oriented or
0:17
object-based programming language.
0:20
As you learn more and
more about JavaScript.
0:22
You'll discover that most everything
in JavaScript is either an object or
0:24
can be treated as an object.
0:28
The simplest way of think of an object is
something that has properties and methods.
0:29
A property is like a variable
that belongs to the object.
0:34
And a method is something the object can
do or that can be done to the object.
0:38
There is so much you can do with objects.
0:43
For this video, we'll focus on one
specific use for objects, to store and
0:45
access data.
0:49
To create an object,
0:50
you start by assigning what's called
an object literal to a variable.
0:52
So let's create an object to hold various
pieces of information about a movie.
0:57
I'll name the variable movie.
1:02
You learned that square
brackets create an array.
1:06
Well to create an object
you use curly braces.
1:09
Curly braces represent an object.
1:13
So JavaScript let you store data as
what are called key value pairs or
1:15
a property value pairs.
1:20
A key, or property name,
is kind of like a variable name.
1:22
And a value is like
the value of that variable.
1:25
So in other words,
1:27
you can think of an object as a single
item that holds multiple variables.
1:28
Inside the curly braces,
1:32
I'll add the property title
followed by a colon, and a value.
1:34
I'll set the value to
the string Wonder woman.
1:39
You separate each property
value pair with a comma.
1:44
So I'll type a comma and
below that I'll add one more property,
1:48
time, and set the value to the string 2pm.
1:52
Keep in mind that you can add any
number of properties inside an object.
1:58
Here we're just adding two for now.
2:02
So as you can see,
objects act like data containers.
2:03
They help keep related data grouped
in one easily accessed unit,
2:07
which simplifies data handling.
2:11
So, for example,
you can pass an object and
2:13
all of its properties as
an argument to a function.
2:16
So the most common way to access
properties of an object is with dat
2:20
notation.
2:24
So for example,
2:25
I'll pop up an alert box that displays
the value of the title property.
2:26
So inside the alert I'll type
the object name which is movie.
2:32
Then at a dot followed by
the property name, title.
2:38
I'll give this a save.
2:43
And when I refresh my browser
2:44
you'll see the movie title
Wonder Woman in the alert box.
2:47
And you can also set a property's
value using dot notation.
2:51
To do that, use the equals sign,
just as you do with variables.
2:55
So for example,
to change the title of the movie object,
2:58
I'll assign the title
property a new value.
3:03
Let's say Avengers, and now,
Avengers appears in the alert box.
3:07
You can even create new properties
on an object using dot notation.
3:14
For example, to add a status property
to the movie object, you'd write this,
3:18
movie.status.
3:23
And I'll set it equal to unavailable.
3:27
This not only adds a property named status
to the object, but it also gives it value.
3:32
So now if I log the movie
object to the console
3:38
with console.log, and pass it movie.
3:43
And the console will see an object
logged and all the properties and
3:50
values for the movie object.
3:55
And notice that it also includes
a new property, status, and
3:57
it's set to unavailable.
4:01
It's common to combine objects with
arrays by making an array of objects.
4:04
In other words, you can place
a series of objects inside an array.
4:09
For example, I'll bring back the movies
array from earlier by typing var
4:13
movies = [ ].
4:18
Inside this array I'll add five objects,
separated by a comma.
4:21
And I'll paste them in so that you
don't have to watch me type them all.
4:25
So as you can see,
each object contains a title property,
4:29
followed by a time and status property.
4:33
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