Create an Object Literal

4:38 with Dave McFarland

Walk through the solution to the first project in this practice session and see how to create a simple object literal.

Teacher's Notes
Video Transcript
Downloads

Code for completed solution

let book = {
  title: "Harry Potter and the Sorcerer's Stone",
  author: "J.K. Rowling",
  publish_year: 1997
};
for (book_property in book) {
 console.log(book_property + ": " + book[book_property]);
}

0:00
How'd it go?
0:00
Were you able to complete the projects?
0:03
If not, no worries.
0:04
You can watch my solution, compare it to what you wrote, and
0:07
then try to recreate it yourself.
0:09
I'll work on this first project in the 1_object.js file.
0:15
First, I'll create an object literal and assign it to the variable, book.
0:22
If the let keyword doesn't look familiar to you,
0:25
it's another way to create a variable, just like var.
0:29
You could use var as well, but
0:31
let is now the preferred method of creating a variable.
0:34
Check the teacher's notes for more information.
0:37
Next, I'll add a title property, and I'll add a value for that.
0:45
Remember, property name goes on the left followed by a colon, and
0:48
the value you are assigning to that property on the right.
0:54
To add another property, you type a comma.
1:01
And another property value pair.
1:05
Now don't forget to add the comma.
1:07
In fact, I'm so used to typing semicolons at the end of JavaScript statements,
1:11
that I sometimes make the mistake of typing a semicolon instead of a comma.
1:16
And when you do that, you end up with a syntax error.
1:25
Finally, I'll just add another comma and another property name and value.
1:34
And there you have it, a basic object literal.
1:38
The next step is to use a for-in loop to print this object to the console.
1:44
The basic structure of a for-in loop looks like this.
1:52
It loops through each property in an object.
1:58
And returns that property name.
2:00
To make this code work with the example,
2:02
I'll change the property name to book_property.
2:10
And the object to the name of the object we're working with, in this case,
2:13
it's called book.
2:15
Each time through the loop, book_property will hold the name of
2:20
a different property in the object, title, then author, then publish year.
2:26
To lock the property name out, I'll just call console.log and
2:32
pass the book_property into it.
2:39
Let's see how this works.
2:41
I'll save this file, and jump into the console.
2:46
I'll type clear to erase what's already there.
2:50
And then I can actually use the up arrow to cycle back to the earlier term I called
2:55
this JavaScript file.
2:56
Now there are the property names, title, author, publish_year.
3:01
Now to access the value of the property, we have to use bracket syntax to access
3:05
the property's value inside the object, like this.
3:15
Let's run this code.
3:22
There are the property values.
3:24
Remember, when using a for-in loop,
3:26
you can't use the dot syntax to access the property value.
3:29
For example,
3:32
book.property won't work.
3:40
It'll simply return the value undefined three times.
3:44
That's because there's no actual property named book_property.
3:48
Book_property is a variable, and the value in book_property is dynamic, that is,
3:53
it changes each time through the loop,
3:56
pointing to a different property name each time.
3:58
Because it's a dynamic value, you have to use the bracket syntax.
4:04
Okay, finally, we will use some string concatenation So
4:10
we can display the property name and its value together.
4:16
I'll save this file.
4:19
And run it in the console.
4:22
And there you have it, a basic object.
4:25
If you got a syntax error,
4:26
compare your code to the code listed in the teacher's notes below.
4:30
Feel free to add more properties to this object, and
4:32
practice creating object literals.
4:34
In the next video, I'll show you the solution to the second project.
4:37
See you there.

You need to sign up for Treehouse in order to download course files.

Practice Object Literals in JavaScript

Create an Object Literal

Code for completed solution

Sign in