Object LiteralsS2C Home « Object Literals

This lesson is about object creation using 'object literals' rather than assignment. This method of object creation is more compact and so less error-prone. This method also gives us a more visual layout for the structure of the object we are creating.

In JavaScript Basic Tutorials - Lesson 7 - Objects we looked at creating our own objects using the Object constructor. We also added properties to our objects via assignment. Let's see some of that code again, to refresh our memories.

/*
 Create an object that holds first and last name properties
 */
var homeOwner = new Object();
homeOwner.firstName = 'Teddy';
homeOwner.lastName = 'Bear';

/*
 we could just as easily assign the surname property with a typo as below 
 and then scratched our heads when we tried to access the nameStore.lastName 
 property. Be careful what you type when assigning object properties
 */
homeOwner.lastNaem = Bear;

While this code is syntactically correct and acceptable, there are a number of issues with it:

1. This style of object creation requires a lot of repetitious coding.
2. The coding style gives no visual clues to the structure of the object.
3. Values for object creation are hardcoded.
4. There is no code reusability.

We will address the first two issues in the above list, as we move through this chapter. The other issues are covered in JavaScript Advanced Tutorials - Lesson 5 - Elegant Object Creation.

Object Creation Using Object Literals

Let's see an example of object literals at work so we can see the benefits, both compactly and visually.

/*
 * We will redo the address object we did in the Basics lesson
 * again first. This way we can compare both methods of object creation
 * 
 * Create an Address object via assignment.
 */
var anAddress = new Object();
anAddress.number = 12;
anAddress.street = 'Picnic Street';
anAddress.town = 'Toytown';
/*
 * We are nesting the homeOwner object we created above in our address object.
 * So that is another 3 lines of code!
 */
anAddress.owner = homeOwner;
homeOwner.firstName = 'Teddy';
homeOwner.lastName = 'Bear';

/*
 * Create an Address object using object literal notation.
 *
 * Visually more informative of object structure and less code than the 
 * code from above. For more complex objects the visual and compactual 
 * differences are accentuated :). 
 */
var anAddress = {
  number: 12,
  street: 'Picnic Street',
  town: 'Toytown',
  homeOwner: {
    firstName: 'Teddy',
    lastName: 'Bear'
  }
};

This style of coding using matching braces to mark object boundaries, with property names followed by a colon and values delimited by commas, is known as JavaScript Object Notation. This is more commonly known as JSON. which is popular with page authors because of its advantages over object assignment.

Lesson 7 Complete

Object literals compact our code, make the object structure more visual and thus cut down on coding errors while being more informative than creation via assignment.

Related Tutorials

JavaScript Basic Tutorials - Lesson 7 - Objects
JavaScript Advanced Tutorials - Lesson 5 - Elegant Object Creation

What's Next?

In this lesson we look at functions and how they make the JS world a better place.

Homepage Top