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
A JavaScript object has properties and methods. A property is like a variable that belongs to the object, and a method is something the object can "do," or that can be "done" to the object. In this video, you'll learn the syntax for creating an object literal that stores data as property/value pairs.
In JavaScript, anything that is not a primitive type (undefined, null, boolean, number, or string) is an object.
Resources
[MUSIC]
0:00
Hey everyone, I'm Guil, a developer and
instructor here at Treehouse.
0:09
I'm happy that you've joined me here to
continue your JavaScript learning journey.
0:13
Now, it's time to learn
about JavaScript objects.
0:17
Objects are a really big subject.
0:19
In fact, JavaScript is often referred to
as an object-based programming language,
0:22
which means that the language is made
up of different types of objects.
0:27
You've learned that many core JavaScript
features, strings, arrays, numbers,
0:30
and Boolean, for example, are either
an object or can be treated as an object.
0:35
But what exactly is an object?
0:40
One of the simplest ways to think of
an object is something that has properties
0:44
and methods.
0:49
A property is like a variable
that belongs to the object.
0:50
And a method is something that object can
do or that can be done to the object.
0:53
You've already worked with or
0:59
seen examples of objects like
the built in map and console objects.
1:00
An array for example, is also an object
and it has a property named length.
1:05
It also has many methods that let
you do something to the array or
1:09
with the elements in the array.
1:13
For example, the push method adds
an element to the end of an array.
1:15
There are even programming patterns
that are object oriented, or
1:18
that specifically use objects as
a flexible way of developing applications.
1:22
But that's part of more advanced
JavaScript programming,
1:26
which you'll learn about
in a later course.
1:29
In this course, you're going to
focus on one specific use for
1:31
objects, storing and
accessing related data.
1:35
You've already worked with two ways
of storing data with JavaScript,
1:38
assigning a value to a variable and
storing a list of values in an array.
1:42
JavaScript objects let you store data
as what are called key value pairs or
1:47
property value pairs.
1:52
A key, or a property name,
is like a variable name, and
1:53
a value is like the value
of that variable.
1:56
In other words,
2:00
you might think of an object as the single
item that holds multiple variables.
2:00
Let's look at how to create an object.
2:05
You start by assigning what's called
an object literal to a variable.
2:08
The curly braces assigned to the variable
name represents an object literal.
2:12
You can't do much with an empty object, so
you'll usually add data inside the object.
2:17
Within the braces, you add a property name
also called a key, followed by a colon and
2:21
a valid value, like a string.
2:26
Notice that in this example, the property
name, or key, is not within quotes.
2:29
The key acts like a variable name.
2:33
So the rules of variable
names apply to it.
2:35
Only use letters, numbers,
a dollar sign, and underscore and
2:38
don't start the name with a number.
2:42
The colon separates the property
name from its value.
2:44
And the value can be any of the valid
JavaScript values you've learned about
2:47
a string, number, Boolean,
array, or even another object.
2:51
You separate each property
value pair with a comma,
2:54
similar to how you separate
elements in an array with commas.
2:57
To make object literals more readable,
3:01
developers place each key
value pair on its own line.
3:03
In addition,
each line is indented inside the object.
3:07
This makes it easier to see that
those lines belong to the object.
3:11
Now you might understand why
they're called object literals.
3:15
You literally write out the object and
the contents inside it in one statement.
3:18
This is compared to other built
in objects like map, console,
3:22
and document, and
primitive types like strings, numbers, and
3:26
Booleans, which are treated
as objects behind the scenes.
3:30
Up next, you'll start creating objects,
adding data inside them,
3:34
then learn how to access and
manipulate that data in your program.
3:37
You need to sign up for Treehouse in order to download course files.
Sign up